【Copy攻城狮日记】踩坑小顺序之canvas的显现层级题目

Created 2019-4-3 18:29:53 by huqi
Updated 2019-4-3 19:12:22 by huqi

↑残局一张图，故事端赖编↑

狼叔@i5ting 曾说过：“纯真讲手艺进阶点意义不大，离开场景都是耍流氓”。本日，照旧从一个需求提及。什么需求呢？一个二维码，一个二次确认弹窗。这里的二维码是前端天生的，二维码下边有个button，点击button调起自定义的弹窗组件。照旧是很简单的需求，然则关于“资深”的Copy攻城狮来讲，除了规划，其他的就只能去Copy了。剖析了一下能够须要的代码，就最先&＃8217;刷刷刷&＃8217;一顿CP(Copy&Paste)操纵猛如虎，结果跑下代码发明error二百五。迥殊是真机跑的时刻，题目迥殊多。像此次的题目，开发者东西上压根就发明不了，幸亏习惯性真机预览，不然一通push就等着赋闲了。照样坑在基本不稳固，文档看得不深切，对小顺序原生组件应当注重的事项把握不准，才会掉入这个异常基本的坑。

(图片来源于收集)

一般来讲，碰到这类相似的须要，我都邑先找找被人造的轮子，尝试一下，有适宜的就直接拿过来用了。此次用的是@yingye 大佬开源的weapp-qrcode,这个js应当是自创了jquery-qrcode 和 node-qrcode,有兴致的同砚能够研讨研讨，生码的逻辑应当是相似的，只是小顺序中没有DOM操纵，都是应用canvas来完成的。详细怎样完成，列位看客能够直接看相干的源码或文档。我的完成：

wxml

wxss

canvas{
display: block;
margin: 0rpx auto; /** 居中 **/
}

js

drawQrcode({
width: 140, // 必需，二维码宽度，与canvas的width保持一致
height: 140, // 必需，二维码高度，与canvas的height保持一致
x: 0, // 非必需，二维码绘制的 x 轴肇端位置，默认值0
y: 0, // 非必需，二维码绘制的 y 轴肇端位置，默认值0
canvasId: 'myQrcode', // 非必需，绘制的canvasId
typeNumber: 10, // 非必需，二维码的盘算形式，默认值-1
text: '您的二维码内容', // 必需，二维码内容
callback(e) { // 非必需，绘制完成后的回调函数
console.log('e: ', e)
}
})

二维码结果：

当我页面如上图一样。底部有个按钮。点击唤起自定义的弹窗组件，在开发者东西上显现的结果非常一般。然则在真机上就会涌现笔墨开首的不和谐征象。canvas直接掩盖住了自定义组件。经由过程翻阅文档，您会发明官方迥殊写出了Bug&Tip：

• 3.tip：请注重原生组件运用限定。
• 4.bug: 防止设置过大的宽高，在安卓下会有crash的题目

然后点开原生组件运用限定，就会发明本B.U.G的根本原因了：

• 原生组件的层级是最高的，所以页面中的其他组件不管设置 z-index 为若干，都没法盖在原生组件上。

也就是说canvas会掩盖自定义的dialog组件。那末怎样处理呢？我的思绪是“曲线救国”&＃8211;将canvas转成image。一不做二不休，撸起袖子，开干！

既然原生组件（camera、canvas、focus时的input、live-player、live-pusher、map、textarea、video）这么牛逼，那就打压一下，去掉他们尊贵的身份，宽免他们享有的特权，完全ge他们的命，恢复他们的布衣身份。根据这个思绪，最先一步一步来完成
wxml

js

data: {
renderImg: ''
},
onLoad: function(){
drawQrcode({
width: 140, // 必需，二维码宽度，与canvas的width保持一致
height: 140, // 必需，二维码高度，与canvas的height保持一致
x: 0, // 非必需，二维码绘制的 x 轴肇端位置，默认值0
y: 0, // 非必需，二维码绘制的 y 轴肇端位置，默认值0
canvasId: 'myQrcode', // 非必需，绘制的canvasId
typeNumber: 10, // 非必需，二维码的盘算形式，默认值-1
text: '您的二维码内容', // 必需，二维码内容
callback(e) { // 非必需，绘制完成后的回调函数
console.log('e: ', e)
if(e.errMsg == 'drawCanvas:ok') { // 新增转图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 140,
height: 140,
canvasId: 'myQrcode',
success: function(res) {
me.setData({ renderImg: res.tempFilePath});
}
});
}
}
})
}

以大将canvas替换成image，不过碰到闪灼的题目，这是wx:if特有的，这里经由过程取巧的方法，只改了canvas的款式：
wxss

canvas{
display: block;
margin: 0rpx -9999px; /** 占位处理二维码闪屏 **/
}
image{
display: block;
margin: 0rpx auto; /** 居中 **/
}

至此，已填了这个canvas显现层级太高的坑。

如您有更好的计划，迎接提出斧正！
如您以为文章处理了您的题目，迎接打赏