背景
有这样一个需求，后台返回了url地址，微信小程序将url地址转成二维码图片，展示在页面上，并且该二维码图片可下载到用户手机相册中
实现
安装wx-qr
npmiwx-qr-S
在页面组件的json文件中引入wx-qr
{ "navigationBarTitleText": "我的线索库", "usingComponents": { "qr-container": "wx-qr" } }
页面中使用wx-qr展示二维码
<viewclass="qr-code-box"><qr-containertext="{{codeUrl}}"size="200"id="qr"></qr-container></view>
通过this.selectComponent选中qr-container，然后通过wx.saveImageToPhotosAlbum将二维码下载到本地
// 下载二维码downloadQrCode: asyncfunction (): Promise<void> { constqrContainer=this.selectComponent('#qr'); // 获取qr-containerwx.saveImageToPhotosAlbum({ // 保存二维码到本地filePath: qrContainer.getQrFile(), // 通过dom获取二维码的临时地址success() { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'error', duration: 2000 }) } }) },
效果
