这里写自定义目录标题
1.前端生成二维码并保存
1.下载weapp.qrcode.js文件并引入项目中
2.先在wxml文件中构建canvas画布
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
3.直接引入 js 文件,使用 drawQrcode() 绘制二维码
let drawQrcode = require("../../utils/weapp.qrcode.js")
drawQrcode({
_this: this,//在开发过程中发现这边不加this二维码出不来
width: 200,
height: 200,
canvasId: 'myQrcode',
text: path, //二维码的路径
image: {
imageResource: '../../pages/images/ygbLogo.png',//二维码中图片的路劲
dx: 60,
dy: 60,
dWidth: 80,
dHeight: 80
},
callback: (e) => {
// 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
//我的华为mate20pro放1000才出的来
setTimeout(() => {
//此处调用下面第四点调用canvas转图片的方法
},1000)
}
})
4.将canvas转成图片
let that=this;
wx.canvasToTempFilePath({
canvasId: 'shareCode',
success: function (res) {
that.setData({shareImg: res.tempFilePath})
},
fail: function (res) {
wx.showToast({title: '图片生成失败'});
console.log("图片生成失败error", res)
}
}, this)
5.保存
saveImg() {
let that = this;
// 获取用户是否开启用户授权相册
wx.getSetting({
success(res) {
// 如果没有则获取授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveSuccess()
},
fail() {
// 如果用户拒绝过或没有授权,则再次打开授权窗口
that.openPicture()
}
})
} else {
// 有则直接保存
that.saveSuccess()
}
}
})
},
//保存图片
saveSuccess(){
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImg,
success() { wx.showToast({ title: '保存成功'})},
fail() {wx.showToast({ title: '保存失败'})}
})
},
//打开授权窗口
openPicture() {
wx.showModal({
title: '提示',
content: '相册系统未授权,请重新授权并保存图片',
confirmColor: '#1989fa',
confirmText: '确定',
success(res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
console.log('打开授权页')
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
注:海报也是用canvas 绘制,海报上面如果需要使用到网络图片则需要调用wx.getImageInfo() api获取图片的临时路径。网络路径的域名需要配置在微信公众平台的downloadfile白名单下
getImageInfo(url) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url,
success(res) {
console.log(res)
resolve(res)
},
fail(res) {
reject(res)
}
})
})
},