需求:
????動(dòng)態(tài)獲取分享碼地址,生成一個(gè)二維碼,可以保存二維碼圖片二蓝,然后分享給其他人。
解決方法:
????由于小程序中無法對dom操作指厌,所以考慮使用canvas畫出二維碼刊愚,可借助第三方庫weapp-qrcod.js
????下面介紹具體使用方法:
- 下載weapp-qrcode.js,且引入頁面中,下載地址https://github.com/tomfriwel/weapp-qrcode/blob/master/dist/weapp-qrcode.js
const QRCode= require('../../utils/qrcode.js')
2.wxml中引入canvas, js中對canvas初始化
<canvas class='canvas' canvas-id='canvas' style="width: 100%;height: 100%" bindlongtap="save" ></canvas>
wx.request({
url: '...',
method:'POST',
data:{},
success: function(res) {
if(res.data.data) {
if(qrcode) {
that.setData({
qrcode:that.data.qrcode.makeCode(res.data.data),
showLoading: false
})
}else{
that.setData({
qrcode:new QRCode('canvas', {
text: res.data.data,
width: 220,
height: 220,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
})
})
that.setData({
showLoading:false
})
}
}
}
})
3.實(shí)現(xiàn)長按保存
save: function() {
let that = this;
wx.showActionSheet({
itemList: ['保存圖片'],
success: function(res) {
if (res.tapIndex == 0) {
that.data.qrcode.exportImage(function(path) {
wx.saveImageToPhotosAlbum({
filePath: path,
success: function() {
wx.showToast({
title:'保存成功'
})
}
})
})
}
}
})
},