前言
很久沒寫微信小程序的需求了，今天來活兒要做個二維碼掃碼相關的需求，本來以為是灑灑水的事情，誰知道也折磨了大半天，今天特此記錄一下~
需求：點擊按鈕，彈出二維碼，二維碼內容固定為test
源碼地址
代碼實現
首先我們知道，繪制二維碼我們必須依賴第三方庫實現。在web端常用是qrcode，而小程序端則使用weapp-qrcode
我們跟著文章來使用一下, 我們來新建代碼片段
npm install weapp-qrcode-canvas-2d --save
如果構建失敗，則先執行npm init 一路回車后，再執行上述操作
構建npm完成后，我們繼續參考示例
// index.html
<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>//index.js
import drawQrcode from 'weapp-qrcode-canvas-2d'onLoad() {const query = wx.createSelectorQuery()query.select('#myQrcode').fields({node: true,size: true}).exec((res) => {var canvas = res[0].node// 調用方法drawQrcode生成二維碼drawQrcode({canvas: canvas,canvasId: 'myQrcode',width: 260,padding: 30,background: '#ffffff',foreground: '#000000',text: 'abc',})// 獲取臨時路徑（得到之后，想干嘛就干嘛了）wx.canvasToTempFilePath({canvasId: 'myQrcode',canvas: canvas,x: 0,y: 0,width: 260,height: 260,destWidth: 260,destHeight: 260,success(res) {console.log('二維碼臨時路徑：', res.tempFilePath)},fail(res) {console.error(res)}})})
}
現在，你可以在模擬器中看到一個大大的二維碼，內容為abc 。可是我們的需求是點擊后再顯示二維碼。
提示：
- canvas的層級永遠是最上層！因此我們無法用
z-index: -1隱藏 - canvas不可以用
hidden或wx:if隱藏，否則wx.canvasToTempFilePath失效
于是，既然我們不能隨心所欲控制canvas，那我們就改變思路，控制image即可，也就是說將canvas繪制的二維碼保存到本地，用圖片渲染即可。
除此之外，為了不讓canvas出現在我們的頁面中，我們用CSS絕對定位到屏幕外面，這樣既沒有隱藏該節點，又不讓用戶看到這個討厭的canvas了
最后，drawQrcode繪制二維碼是一個異步操作，我們必須等待他執行完畢再獲取臨時路徑。
基于以上的經驗和思考，我們最后給出代碼：
import drawQrcode from 'weapp-qrcode-canvas-2d'Page({data: {src: "",flag: false,},onLoad() {// 選中節點const query = wx.createSelectorQuery()query.select('#myQrcode').fields({node: true,size: true}).exec((res) => {var canvas = res[0].node// 調用方法drawQrcode生成二維碼drawQrcode({// ...配置項}).then(res => {console.log(res, canvas);// 獲取臨時路徑（得到之后，想干嘛就干嘛了）wx.canvasToTempFilePath({//...配置項success: (res) => {console.log('二維碼臨時路徑：', res.tempFilePath)this.setData({src: res.tempFilePath})},})})})},onclick() {const flag = this.data.flag;// 狀態取反，控制顯示隱藏this.setData({flag: !flag})}
})
// html
<view class="box" bind:tap="onclick">點擊打開二維碼
</view><view class="box" wx:if="{{flag}}"><image style="width: 100%; height: 100%;" src="{{src}}" mode="aspectFill"/>
</view><canvas type="2d" style="width: 260px; height: 260px; position: absolute; top: -100%;" id="myQrcode"></canvas>
// index.css
.box {width: 100rpx;height: 100rpx;background-color: pink;margin: 100rpx auto;
}
