[Mini Program] How wxml-to-canvas dynamically generates text and styles and avoids pitfalls

1. Wxml-to-canvas pitfalls

1. The width and height must be set for each element, and the values ​​must be without any units.
   If you don't set it, there will be problems with the layout being disordered or not being displayed, so you have to set the width and height for each element. At this time, some people will question what should I do if my width and height are not fixed? Don’t worry, the second part will introduce you how to dynamically set the width and height.
2. The background image cannot be used. There is no way to use backgroundImage to set the background image. At this time, everyone can only use positioning to realize the background image function.
3. If the generated poster has rounded corners, it will have a white or black background when saved on WeChat (different devices may display differently). I have not found a better solution so far, so the poster is generated with right angles.
4. You cannot use wx-show or display to prevent the canvas from being displayed initially. This will cause an error because it cannot obtain the canvas element. So you can only choose to position the canvas outside the page at the beginning
   (of course there is another idea but I have not tried it. It may be possible. I just put it forward and everyone can try it. That is, you do not get the canvas in onload but when you change the display or Get the value of wx-show later, but in this case, the poster will be much slower than generating the image at the beginning, so it is recommended that you position the canvas directly outside the interface)
5. Be sure to call the generated image in the promise then after the canvas is drawn.
6. When calling this.widget.renderToCanvas method, the attribute names must be wxml and style. However, if you need to change it, you can use it to implement it (ws and st are defined by yourself)

   const p1 = this.widget.renderToCanvas({
   					wxml: ws,
   					style: st
   				})

7. All text must be wrapped with text tags.

2. How to dynamically generate wxml and style

1- Pass the data and style into the wxml and style methods

1-将数据和样式传入 调用wxml方法和style方法

renderToCanvas(data) {

				let ws = wxml(data);
	            let styles = {
					countWidth,
					courseWidth,
					homeWidth,
					commentWidth
				}
				let st = style(styles)
				const p1 = this.widget.renderToCanvas({
					wxml: ws,
					style: st
				})
                //........(后续操作）
}

2- Transform wxml and style in index.js (similar to demo.js in the official code snippet)

2-在index.js中修改为传入参数

const wxml = (msg) => {
	return ` <view class="posterCon" >
    <text class="posterText text10">${msg.date}</text>
 	<text class="posterText text16">这是text</text>
    </view> 
    `
}

const style = (styles) => {
	return {
		posterCon: {
			fontWeight: 500,
			width:styles.countWidth,
			height: 300,	
		}
}

In this way, wxml and style can be modified dynamically! I wish everyone a happy meal~