May 21, 2021 WeChat Mini Program Development Document
Within the program, canvas is drawn with static templates and styles, pictures are exported, and scenes such as share diagrams can be generated.
npm install --save wxml-to-canvas
{
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas",
}
}
<video class="video" src="{{src}}">
<wxml-to-canvas class="widget"></wxml-to-canvas>
</video>
<image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image>
const {wxml, style} = require('./demo.js')
Page({
data: {
src: ''
},
onLoad() {
this.widget = this.selectComponent('.widget')
},
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
this.container = res
this.extraImage()
})
},
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
this.setData({
src: res.tempFilePath,
width: this.container.layoutBox.width,
height: this.container.layoutBox.height
})
})
}
})
Three labels, view, text, and image, are supported to match styles in the style object through class.
<view class="container" >
<view class="item-box red">
</view>
<view class="item-box green" >
<text class="text">yeah!</text>
</view>
<view class="item-box blue">
<image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg" rel="external nofollow" ></image>
</view>
</view>
The object property value is the cass hump form that corresponds to the wxml label. You need to specify the width and height properties for each element, or you will get a layout error.
When there are multiple classNames, the lower priority is higher, and the child element inherits the inheritable properties of the parent element.
The elements are all flex layouts. left/top, etc. only works under absolute positioning.
const style = {
container: {
width: 300,
height: 200,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: '#ccc',
alignItems: 'center',
},
itemBox: {
width: 80,
height: 60,
},
red: {
backgroundColor: '#ff0000'
},
green: {
backgroundColor: '#00ff00'
},
blue: {
backgroundColor: '#0000ff'
},
text: {
width: 80,
height: 60,
textAlign: 'center',
verticalAlign: 'middle',
}
}
Render to canvas, pass in the wxml template and style objects, and return container objects that contain layout and style information.
Extract the contents of the area where the container is in the canvas to produce a picture of the same size and return the temporary file address.
FileType supports jpg, png, quality for the quality of the picture, currently only valid for jpg. The value range is (0, 1) and is treated as 1.0 when it is not in range.
The property name | The value or type that is supported | The default |
---|---|---|
width | number | 0 |
height | number | 0 |
position | relative, absolute | relative |
left | number | 0 |
top | number | 0 |
right | number | 0 |
bottom | number | 0 |
margin | number | 0 |
padding | number | 0 |
borderWidth | number | 0 |
borderRadius | number | 0 |
flexDirection | column, row | row |
flexShrink | number | 1 |
flexGrow | number | |
flexWrap | wrap, nowrap | nowrap |
justifyContent | flex-start, center, flex-end, space-between, space-around | flex-start |
alignItems, alignSelf | flex-start, center, flex-end, stretch | flex-start |
Support for marginLeft, paddingLeft, etc
The property name | The value or type that is supported | The default |
---|---|---|
fontSize | number | 14 |
lineHeight | number / string | '1.4em' |
textAlign | left, center, right | left |
verticalAlign | top, middle, bottom | top |
color | string | #000000 |
backgroundColor | string | transparent |
LineHeight is desirable for strings or numeric types with em units.
The property name | The value or type that is supported | The default |
---|---|---|
scale | number | 1 |