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

Coly 發布于2019-08-23 16:43 / 2706人閱讀

摘要：依舊是很簡單的需求，但是對于資深的攻城獅來說，除了布局，其他的就只能去了。特別是真機跑的時候，問題特別多。還是坑在基礎不牢固，文檔看得不深入，對小程序原生組件應該注意的事項把握不準，才會掉入這個非常基礎的坑。

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

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

從一個需求說起

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

(圖片來源于網絡)

canvas生成二維碼

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

wxml

wxss

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

    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使用限制

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

3.tip：請注意原生組件使用限制。

4.bug: 避免設置過大的寬高，在安卓下會有crash的問題

然后點開原生組件使用限制，就會發現本B.U.G的根本原因了：

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

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

將canvas轉換成image

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

    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顯示層級過高的坑。

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

GPU云服務器云服務器攻城獅服務器查看日志的程序 vps的層級時間服務器的層級

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103194.html

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

摘要：根據當時的情境，是在微信開發者工具中刪掉該小程序然后重新載入就解決了，大家給出的結論是微信小程序開發者工具的。 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 2019-08-26 13:42 評論0 收藏0
【Copy攻城獅日志】踩坑小程序之使用svg作為圖標

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

Miracle_lihb 2019-08-23 16:45 評論0 收藏0
【Copy攻城獅日志】CML之5分鐘入門多端統一框架

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

MycLambert 2019-08-23 16:47 評論0 收藏0
【Copy攻城獅日志】Node.js之http下載圖片失敗

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

darkbaby123 2019-08-23 16:46 評論0 收藏0
【Copy攻城獅日志】借助Taro暴改Nideshop實現電商支付寶小程序雛形

摘要：接下來，在支付寶小程序開發者工具中打，不出意外能跑起來一個電商支付寶小程序雛形。地址以上是我這個攻城獅對使用轉換原生微信小程序為支付寶小程序的一次微不足道的實踐。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開局一張圖，故事全靠編↑ 從一個需求說起作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一...

gnehc 2019-08-23 14:54 評論0 收藏0