先说结论：

仅适用生成简单布局的页面，复杂页面会有大量性能开销。

复杂页面可以其他使用webview嵌入的方式用原生H5代替。

安装使用见官方文档，本文主要提及重要使用规则。

• 需要为wxml-to-canvas指定width和height属性，默认为400*300，当该尺寸与wxss最大容器尺寸不一致时会有异常
• 只能使用view、text、image标签
• view只用于布局、text只用于文字、image只用于图片（可绝对定位作为背景）
• text、image必须指定width、height
• view可以不指定height、只指定width，由子元素动态撑高。
• 渲染高度限制：IOS实际像素 < 4096，实际高度需 < 4096/3 = 1356
• 动态数据可通过函数结合模板字符串实现
• 画布高度最好是确定的数字（<1356）
• lineHeight可使text文本居中，lineHeight值等于height即可
• 多个absolute元素时，因为没有z-index，template元素自上而下渲染，对应z-index依次增高
• 元素默认为flex布局，子元素会继承父元素的flex布局属性（row或column）
• 背景颜色仅可使用backgroundColor，而非background。

性能优化指南

• 在canvas绘制完成后，可以使用this.widget.canvasToTempFilePath来保存并获取本地临时路径，但是图片可能会比较大，通常会1-2M，实际我们应该尽可能在保证清晰的情况下减小文件大小，我们可以通过canvasToTempFilePath的参数配置来进行调整，如下通常可以保持较小的体积及基本合适的清晰度。更多的配置可详细参考canvasToTempFilePath文档

{
destWidth: canvas组件的宽度,
destHeight: canvas组件的高度,
fileType: 'jpg',
quality: 0.9
}

以下是动态数据与动态高度及基本使用的示例：

//动态wxml : poster-data.js 
const getWxml = (info)=>{
  return `${info.a?`${info.b}`:''}`
}
//动态css
const getStyle = (info)=>{
  return {
    textTest: {
      width: 100,
      height: 20,
      fontSize: info.fontSize
    }
  }
}
//页面使用 : index.js
const { wxml, style } = require('./poster-data.js');
//...
data:{
  canvasHeight: 0,
  info:{
    a:1,
    b:2,
    fontSize: 16
  }
}
onLoad(){
  const tempHeight = this.computeContentHeight()
  this.setData({
    canvasHeight:tempHeight
  },()=>{
    this.widget = this.selectComponent('.widget');//数据就绪后canvas高度已确定，再获取canvas组件实例
  })
}
computeContentHeight(){
  //do something 根据数据动态现实隐藏而修改canvas高度
  return 500;
}

saveImage(){
  wx.showLoading({
    title: '生成中请稍后.',
    mask: false,
  });
  const template = getWxml(this.data.info);//获取template
  const css = getStyle(this.data.info)//获取canvas
  const p1=this.widget.renderToCanvas({wxml:template,style:css});
      p1.then((res)=>{
        const p2 =this.widget.canvasToTempFilePath();//canvas图片保存到本地临时路径
        p2.then(res=>{
          wx.hideLoading();
          this.data.poster = res.tempFilePath
          // 使用微信分享
          wx.showShareImageMenu({
            path:  res.tempFilePath
          });
          // 或保存到本地
          // wx.saveImageToPhotosAlbum({
          // 	filePath: res.tempFilePath,
          // 	success(res){
          // 		console.log(res);
          // 	},
          // 	fail(res){
          // 		console.log(res);
          // 	}
          // });
        });
      });
}
//隐藏canvas
.widget {
  position: absolute;
  left: -999px;
}

参考

• 小程序中实现页面截图 | 微信开放社区
• wxml-to-canvas 组件中高度不能超过 4096？，否则无法生成图片，报错 | 微信开放社区
• 微信扩展组件wxml-to-canvas支持动态传入数据吗？急 | 微信开放社区
• 小程序使用wxml-to-canvas截屏_培根芝士的博客-CSDN博客_小程序 截屏