wxml-to-canvas 使用规则
先说结论： 仅适用生成简单布局的页面，复杂页面会有大量性能开销。 复杂页面可以其他使用webview嵌入的方式用原生H5代替。 安装使用见官方文档，本文主要提及重要使用规则。 需要为wxml-to-canvas指定width和height属性，默认为400*300，当该尺寸与wxss最大容器尺寸不一致时会有异常只能使用view、text、image标签view只用于布局、text只用于文字、image只用于图片（可绝对定位作为背景）text、image必须指定width、heightview可以不指定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博客_小程序 截屏
