1杨凑、在wxml中加入canvas用來顯示二維碼滤奈，并在二維碼下面加個按鈕，保存二維碼：
<canvas class="code" canvas-id="myQrcode" style="background:red;width: 200rpx;height:200rpx;"/>
<view class="down" bindtap="saveQrcode">保存到手機(jī)相冊</view>
2撩满、引入weapp-qrcode：
import QRCode from "../../utils/weapp-qrcode.js" //引入生成二維碼的插件
3僵刮、在js文件中創(chuàng)建二維碼
reateQrcode() {
var that = this;
new QRCode('myQrcode', {
text:'生成二維碼要顯示的內(nèi)容',
width: that.createRpx2px(200),
height: that.createRpx2px(200),
padding: 12, // 生成二維碼四周自動留邊寬度，不傳入默認(rèn)為0
correctLevel: QRCode.CorrectLevel.L, // 二維碼可辨識度
callback: (res) => {
// 接下來就可以直接調(diào)用微信小程序的api保存到本地或者將這張二維碼直接畫在海報上面去鹦牛，看各自需求
that.data.qrcodePath = res.path;
}
})
},
4搞糕、用戶二維碼保存到本地相冊
//用戶二維碼保存到本地相冊
saveQrcode: function () {
var that = this;
wx.getImageInfo({
src: that.data.qrcodePath,
success: function (ret) {
var path = ret.path;
wx.saveImageToPhotosAlbum({
filePath: path,
success(result) {
if (result.errMsg === 'saveImageToPhotosAlbum:ok') {
wx.showToast({
title: '保存成功',
})
}
}
})
}
})
},
5、將rpx轉(zhuǎn)px曼追。由于二維碼的canvas在頁面中窍仰，顯示，為了適應(yīng)屏幕礼殊，采用了rpx作為單位驹吮。但是創(chuàng)建二維碼new QRCode時，傳入的是px晶伦，所以碟狞，為了傳入的尺寸和canvas一樣大，需要使用createRpx2px方法婚陪，將rpx轉(zhuǎn)為px：
createRpx2px(rpx) {
return wx.getSystemInfoSync().windowWidth / 750 * rpx
},
6族沃、生命周期函數(shù)--監(jiān)聽頁面加載
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
this.reateQrcode()
},
