1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 微信小程序前端生成二维码并保存(海报同理)

微信小程序前端生成二维码并保存(海报同理)

时间:2020-07-13 00:18:39

相关推荐

微信小程序前端生成二维码并保存(海报同理)

这里写自定义目录标题

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)}})})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。