微信小程序 在文档中也有描述 native-component
大致意思是:canvas组件在微信小程序中属于原生组件,而原生组件层级是最高的,多个同时加载的原生组件,谁加载的越慢谁的层级越高,-_-||
解决方法
1. 文档中给出 cover-view 和 cover-image 这俩玩意,这俩同为原生组件,可以覆盖部分原生组件 ==> 已自测,成功(推荐)
2. canvas => img => 展示
1> canvas组件设置样式 position:fixed; top:999999px;
2> 加载成功后 wx.canvasToTempFilePath 转为图片进行展示
updateTempPath(count, canvasId) {
/* 报表完成后渲染之后执行 */
setTimeout(()=>{
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: //图片的宽,
height: //图片的高,
canvasId: canvasId,
success: function(res) {
// 成功生成图片后执行
_self.setData({
sellImg: res.tempFilePath
});
},fail: function (res) {
// 失败执行
count += 1;
if (count < 3) {
_self.updateTempPath(count,canvasId);
}else {
console.log(res)
}
}
},_self);
}, 300);
}
