这里写自定义目录标题
1.前端生成二维码并保存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)}})})},