【小程序】wxml-to-canvas如何动态生成文字和样式以及踩坑

一、wxml-to-canvas 踩坑

1. 必须给每一个元素都设置宽和高，并且是数值不带任何单位。
   如果不设置的话就会出现布局错乱或者不显示的问题，所以必须要给每一个元素设置宽和高，这时候就会有人有疑问我的宽高是不固定的怎么办呢？放心，第二部分会给大家介绍如何动态设置宽高
2. 无法使用背景图，没办法使用backgroundImage来设置背景图，这个时候只能大家使用定位来实现背景图的功能了
3. 生成的海报如果是圆角保存下来的时候在微信上会有白色或者黑色背景（不同设备显示可能不同）我目前没有找到更好的解决方案所以海报生成的是直角
4. 不可以使用wx-show 或者display 来让canvas一开始不显示 这样都会报错，因为它无法获取到canvas元素。所以只能选择一开始将canvas定位到页面以外
   （当然还有一个思路但是我没实验过，有可能是可以的，仅仅提出来大家可以尝试。 就是不在onload里面获取canvas而是在你改变 display或者wx-show的值的时候再获取 但是这样的话海报生成图片就会比一开始生成图片慢很多，所以还是建议大家把canvas直接定位到界面外就好了）
5. 一定要在canvas画好了以后 在promise then中再去调用生成图片
6. 调用this.widget.renderToCanvas 方法的时候 属性名必须是wxml和 style 但是大家有需要必须改动的话可以使用来实现（ws和st是自己定义的）

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

7. 所有的文字一定一定要记得使用text标签包裹哦

二、如何动态生成wxml和style

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

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-改造index.js(类比于官方代码片段中的demo.js)中的wxml和style

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,	
		}
}

这样就可以动态的去修改wxml和style啦！祝大家食用愉快哦～