問題：由於業務需求，將頁面下拉的時候，拉到二維碼的位置，二維碼的展示會懸浮在固定在底部的view之上。因為之前的程式碼是直接通過canvas展示生成的二維碼。
而canvas元件是原生元件，關於層級的問題可以檢視小程式的開發文件：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/native-component.html

解決思路：將畫布的內容(即二維碼)匯出生成圖片，並返回檔案路徑，在前端通過Image展示，並且將畫布挪到螢幕之外。（這個辦法通過測試之後在模擬器、ios機和大部分安卓機上都沒有問題，但是也有坑，有點安卓機最後無法顯示二維碼，原因會在後文中詳述）

程式碼如下：
因為是在原有的程式碼基礎上修改

js檔案：
先在data中，定義一個二維碼圖片路徑：

QRImgUrl: '',//二維碼圖片路徑

新增一個將二維碼匯出生成圖片，並返回檔案路徑的方法：

saveCanvas() {
   wx.canvasToTempFilePath({
              canvasId: 'qr-code',
              success: (res) => {
                console.log(res)
                this.setData({
                  QRImgUrl: res.tempFilePath 
                })
              }
            })
          },
 

最後在呼叫draw之後（即繪製畫布的方法），呼叫saveCanvas：

              setTimeout(() => {
                  this.saveCanvas()
                }, 1000);

這裡的setTimeout一定要加，因為這就是一個比較奇怪的坑，如果畫布沒繪製完，圖片路徑匯出來就是空的。經過手頭的測試機測試，ios和模擬器在1000ms的情況下都可以顯示，部分安卓機3000ms才顯示，部分安卓機畫了3000ms也顯示不出來。。。（所以由於部分安卓機的問題，我最後放棄了這個方法，如果有人也碰到這個問題可以看另一篇文章是如何解決的）

wxml檔案：

樣式與原畫布的樣式是一致的，在原畫布的樣式中加一個position:fixed;right:800rpx(隨便往哪裡挪，上下左右都可以），挪到螢幕外面就可以了。原來展示canvas的地方就會展示這個Image。

結果：至此，針對層級的問題基本就解決了，image也不會遮擋住固定在底部的view。但是，又冒出了一個新的問題，就是上面所說的有些機器上二維碼無法顯示（大概settimeout設定的時間足夠就可以了，我也沒試過，畢竟業務場景裡不可能給太多的時間讓他畫。。），所以又要換個思路，解決這個新的問題。