国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Copy攻城獅日志】踩坑小程序之canvas的顯示層級(jí)問題

Coly / 2719人閱讀

摘要：依舊是很簡(jiǎn)單的需求，但是對(duì)于資深的攻城獅來說，除了布局，其他的就只能去了。特別是真機(jī)跑的時(shí)候，問題特別多。還是坑在基礎(chǔ)不牢固，文檔看得不深入，對(duì)小程序原生組件應(yīng)該注意的事項(xiàng)把握不準(zhǔn)，才會(huì)掉入這個(gè)非常基礎(chǔ)的坑。

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

↑開局一張圖，故事全靠編↑

從一個(gè)需求說起

狼叔@i5ting 曾說過：“單純講技術(shù)進(jìn)階點(diǎn)意義不大，脫離場(chǎng)景都是耍流氓”。今天，依舊從一個(gè)需求說起。什么需求呢？一個(gè)二維碼，一個(gè)二次確認(rèn)彈窗。這里的二維碼是前端生成的，二維碼下邊有個(gè)button，點(diǎn)擊button調(diào)起自定義的彈窗組件。依舊是很簡(jiǎn)單的需求，但是對(duì)于“資深”的Copy攻城獅來說，除了布局，其他的就只能去Copy了。分析了一下可能需要的代碼，就開始"刷刷刷"一頓CP(Copy&Paste)操作猛如虎，結(jié)果跑下代碼發(fā)現(xiàn)error二百五。特別是真機(jī)跑的時(shí)候，問題特別多。像這次的問題，開發(fā)者工具上壓根就發(fā)現(xiàn)不了，幸好習(xí)慣性真機(jī)預(yù)覽，不然一通push就等著失業(yè)了。還是坑在基礎(chǔ)不牢固，文檔看得不深入，對(duì)小程序原生組件應(yīng)該注意的事項(xiàng)把握不準(zhǔn)，才會(huì)掉入這個(gè)非常基礎(chǔ)的坑。


(圖片來源于網(wǎng)絡(luò))

canvas生成二維碼

通常來說，遇到這種類似的需要，我都會(huì)先找找被人造的輪子，嘗試一下，有合適的就直接拿過來用了。這次用的是@yingye 大佬開源的weapp-qrcode,這個(gè)js應(yīng)該是借鑒了jquery-qrcode 和 node-qrcode,有興趣的同學(xué)可以研究研究，生碼的邏輯應(yīng)該是類似的，只是小程序中沒有DOM操作，都是利用canvas來實(shí)現(xiàn)的。具體怎么實(shí)現(xiàn)，各位看客可以直接看相關(guān)的源碼或文檔。我的實(shí)現(xiàn)：

wxml

wxss

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

js

    drawQrcode({
      width: 140,  // 必須，二維碼寬度，與canvas的width保持一致
      height: 140, // 必須，二維碼高度，與canvas的height保持一致
      x: 0, // 非必須，二維碼繪制的 x 軸起始位置，默認(rèn)值0
      y: 0, // 非必須，二維碼繪制的 y 軸起始位置，默認(rèn)值0
      canvasId: "myQrcode", // 非必須，繪制的canvasId
      typeNumber: 10, // 非必須，二維碼的計(jì)算模式，默認(rèn)值-1
      text: "您的二維碼內(nèi)容",  // 必須，二維碼內(nèi)容
      callback(e) { // 非必須，繪制完成后的回調(diào)函數(shù)
        console.log("e: ", e)
      }
    })

二維碼效果：

canvas使用限制

當(dāng)我頁面如上圖一樣。底部有個(gè)按鈕。點(diǎn)擊喚起自定義的彈窗組件，在開發(fā)者工具上呈現(xiàn)的效果十分正常。但是在真機(jī)上就會(huì)出現(xiàn)文字開頭的不和諧現(xiàn)象。canvas直接覆蓋住了自定義組件。通過翻閱文檔，您會(huì)發(fā)現(xiàn)官方特別寫出了Bug&Tip：

3.tip：請(qǐng)注意原生組件使用限制。

4.bug: 避免設(shè)置過大的寬高，在安卓下會(huì)有crash的問題

然后點(diǎn)開原生組件使用限制，就會(huì)發(fā)現(xiàn)本B.U.G的根本原因了：

原生組件的層級(jí)是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。

也就是說canvas會(huì)覆蓋自定義的dialog組件。那么怎么解決呢？我的思路是“曲線救國(guó)”--將canvas轉(zhuǎn)成image。一不做二不休，擼起袖子，開干！

將canvas轉(zhuǎn)換成image

既然原生組件（camera、canvas、focus時(shí)的input、live-player、live-pusher、map、textarea、video）這么牛逼，那就打壓一下，去掉他們高貴的身份，豁免他們享有的特權(quán)，徹底ge他們的命，恢復(fù)他們的平民身份。按照這個(gè)思路，開始一步一步來實(shí)現(xiàn)
wxml

js

    data: {
      renderImg: ""
    },
    onLoad: function(){
        drawQrcode({
          width: 140,  // 必須，二維碼寬度，與canvas的width保持一致
          height: 140, // 必須，二維碼高度，與canvas的height保持一致
          x: 0, // 非必須，二維碼繪制的 x 軸起始位置，默認(rèn)值0
          y: 0, // 非必須，二維碼繪制的 y 軸起始位置，默認(rèn)值0
          canvasId: "myQrcode", // 非必須，繪制的canvasId
          typeNumber: 10, // 非必須，二維碼的計(jì)算模式，默認(rèn)值-1
          text: "您的二維碼內(nèi)容",  // 必須，二維碼內(nèi)容
          callback(e) { // 非必須，繪制完成后的回調(diào)函數(shù)
            console.log("e: ", e)
            if(e.errMsg == "drawCanvas:ok") { // 新增轉(zhuǎn)圖片
              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;  /** 居中 **/
}

至此，已填了這個(gè)canvas顯示層級(jí)過高的坑。

如您有更好的方案，歡迎提出指正！
如您覺得文章解決了您的問題，歡迎打賞

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103194.html

相關(guān)文章

  • 【Copy攻城獅日志】踩坑小程序之can't read property 'of

    摘要：根據(jù)當(dāng)時(shí)的情境，是在微信開發(fā)者工具中刪掉該小程序然后重新載入就解決了，大家給出的結(jié)論是微信小程序開發(fā)者工具的。 Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqishowImg(https://segmentfault.com/img/bVbqOLH?w=1526&h=818); ↑開局一張圖，故事全靠編...

    hsluoyz 評(píng)論0 收藏0

  • 【Copy攻城獅日志】踩坑小程序之使用svg作為圖標(biāo)

    摘要：可以使用網(wǎng)絡(luò)圖片，或者，或者使用標(biāo)簽。這個(gè)是常識(shí)，連入門級(jí)小程序員都知道的。那我究竟寫了個(gè)什么毫無疑問，一定是在中直接引用了本地圖片。雖然可以將圖標(biāo)轉(zhuǎn)化為字體應(yīng)用，但對(duì)于我來說，就使用那么幾個(gè)圖標(biāo)，實(shí)在是不想引用一大堆等文件，只想用下。 Created 2019-4-4 22:02:27 by huqi Updated 2019-4-4 23:12:34 by huqi show...

    Miracle_lihb 評(píng)論0 收藏0

  • 【Copy攻城獅日志】CML之5分鐘入門多端統(tǒng)一框架

    摘要：開局一張圖，故事全靠編是啥變色龍又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時(shí)代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說前端技術(shù)從年到年又發(fā)生了天翻地覆的變化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

    MycLambert 評(píng)論0 收藏0

  • 【Copy攻城獅日志】Node.js之http下載圖片失敗

    摘要：當(dāng)用戶或搜索引擎向網(wǎng)站服務(wù)器發(fā)出瀏覽請(qǐng)求時(shí)，服務(wù)器返回的數(shù)據(jù)流中頭信息中的狀態(tài)碼的一種，表示本網(wǎng)頁永久性轉(zhuǎn)移到另一個(gè)地址。通過在源代碼中添加日志輸出，我們也能清楚地看到的狀態(tài)碼。 Created 2019-4-5 22:24:33 by huqi Updated 2019-4-5 23:23:56 by huqi showImg(https://segmentfault.com/...

    darkbaby123 評(píng)論0 收藏0

  • 【Copy攻城獅日志】借助Taro暴改Nideshop實(shí)現(xiàn)電商支付寶小程序雛形

    摘要：接下來，在支付寶小程序開發(fā)者工具中打，不出意外能跑起來一個(gè)電商支付寶小程序雛形。地址以上是我這個(gè)攻城獅對(duì)使用轉(zhuǎn)換原生微信小程序?yàn)橹Ц秾毿〕绦虻囊淮挝⒉蛔愕赖膶?shí)踐。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開局一張圖，故事全靠編↑ 從一個(gè)需求說起 作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一...

    gnehc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<