需求：我要在一個頁面中生成一個二維碼，并且這個二維碼可以長按保存到本地或者發送給好友；
我這里是將生成的canvas二維碼轉換成圖片，利用長按圖片進行保存或轉發
效果圖：
第一步先下載對應的包：
npm install weapp-qrcode --save
第二步：?wxml
????????我們需要準備一個生成二維碼的canvas
<canvas class="pf canvas" style="width:260rpx;height:260rpx;" canvas-id="myQrcode" id="myQrcode"></canvas>canvas-id="myQrcode"? ? ? ? 這個id是生成二維碼的時候需要
id="myQrcode"? ? ? ? 這個id是轉換圖片的時候需要
? ? ? ? 還需要一個存放圖片的image?（圖片的位置自定義）
<image show-menu-by-longpress="true" src="{{qrcodeUrl}}" mode="aspectFit"></image>show-menu-by-longpress="true"? ? ? ? 必須存在
?第三步：JS
????????先導入weapp-qrcode包
import drawQrcode from 'weapp-qrcode'
? ? ? ?data中定義需要用到的變量
data: {showCodeFn:false,qrcodeUrl:''},
????????開始生成二維碼?
onLoad(options) { var that = this drawQrcode({width:130,height:130,canvasId: 'myQrcode',text: config.temporaryUrl+'wechat/unit/'+options.unitId,callback:function(e){//我這里判斷如果二維碼生成成功就調用轉換圖片的方法，萬一在沒生成二維碼之前，用戶點擊了圖片的，報錯或者看不見就尷尬了that.drawImg()}})},至于需要在哪個生命周期函數中生成二維碼，自己定
? ? ? ? ?將二維碼轉換成圖片的方法
drawImg(){var that = this// 創建一個選擇器查詢對象const query = wx.createSelectorQuery();// 執行查詢并獲取 canvas 節點的實例query.select('#myQrcode').boundingClientRect()// 查詢結束后執行回調函數query.exec((res) => {if (res[0]) {// res[0] 是 canvas 節點信息，確保節點存在wx.canvasToTempFilePath({canvasId: 'myQrcode',success(res) {that.setData({ //因為的的需求是點擊某個地方，才讓圖片顯示，所以在沒生成圖片之前，先把需要點擊的那個地方隱藏了，等生成圖片成功后，再放出來，所以這里是控制那個點擊地方的顯示/隱藏showCodeFn:true})console.log('查詢成功')const tempFilePath = res.tempFilePath;console.log(tempFilePath);that.setData({ //這是圖片地址qrcodeUrl: tempFilePath})},fail(err) {console.error( err);}});} else {console.error('未能找到對應的 canvas 節點');}});},
完成 ??ヽ(°▽°)ノ?
)
