小程序

2024-07-13 06:12| 来源: 网络整理| 查看: 265

不多说，直接看代码和文字见解：

第一步：先安装weapp-qrcode，利用一个函数触发drawQrcode的方法生成一个二维码Canvas

npm install weapp-qrcode --save

handleChange() { drawQrcode({ width: 180,//宽 height: 180,//高 canvasId: 'myQrcode',//绑定canvas的id text: '111'//识别二维码里面的内容数据 }) this.createShareQr() }

到这一步其实你的二维码几乎成型了，但是你还有要把它给展示出来

第二步：调用Taro.canvasToTempFilePath的Taro文档的方法，他是用来将Canvas转换为临时路径的图片。

// 将canvas转换为二维码图片 createShareQr = () => { let that = this Taro.canvasToTempFilePath({ canvasId: 'myQrcode', success(res) { console.log(res, 'res') let tempFilePath = res.tempFilePath; that.setState({ qrImagePath: tempFilePath, }, that.onPreviewImage) } }) }

到这里你已经可以拿到二维码图片的路径地址，后面直接用Image标签。

二维码图片保存功能：

方法1：

可以先利用Taro.previewImage让图片进入预览模式，直接调用微信小程序的原生保存方法（长按图片保存）

onPreviewImage = () => { Taro.previewImage({ urls: [get(this.state, 'qrImagePath')]//图片路径 }) }

方法2：

利用Taro.saveImageToPhotosAlbum实现图片保存，但是你先需要得到图片库的授权（Taro.openSetting授权）

// 保存图片至本地 saveToAlbum = () => { Taro.saveImageToPhotosAlbum({ filePath: this.state.shareImage,//需要保存的图片路径 success(res) { Taro.showToast({ title: '保存成功', icon: 'success', duration: 2000, }); }, fail() { Taro.showModal({ title: '提示', content: '需要您授权保存相册', showCancel: false, success() { Taro.openSetting({ success(settingdata) { if (settingdata.authSetting['scope.writePhotosAlbum']) { Taro.showModal({ title: '提示', content: '获取权限成功,再次保存图片即可成功', showCancel: false, }) } else { Taro.showModal({ title: '提示', content: '获取权限失败，无法保存到相册', showCancel: false, }) } } }); } }); } }) }

有点需要注意Taro.openSetting使用要搭配Taro.showModal

【本文地址】

小程序

小程序

今日新闻

推荐新闻