微信小程序实现生成二维码功能并下载到本地

背景

有这样一个需求，后台返回了url地址，微信小程序将url地址转成二维码图片，展示在页面上，并且该二维码图片可下载到用户手机相册中

实现

1. 安装wx-qr

   npm i wx-qr -S
   

2. 在页面组件的json文件中引入wx-qr

   {
     "navigationBarTitleText": "我的线索库",
     "usingComponents": {
       "qr-container": "wx-qr"
     }
   }
   
   
   

3. 页面中使用wx-qr展示二维码

   <view class="qr-code-box">
     <qr-container text="{{codeUrl}}" size="200" id="qr"></qr-container>
   </view>
   

4. 通过this.selectComponent选中qr-container，然后通过wx.saveImageToPhotosAlbum将二维码下载到本地

   // 下载二维码
   downloadQrCode: async function (): Promise<void> {
     const qrContainer = this.selectComponent('#qr'); // 获取qr-container
     wx.saveImageToPhotosAlbum({ // 保存二维码到本地
       filePath: qrContainer.getQrFile(), // 通过dom获取二维码的临时地址
       success() {
         wx.showToast({
           title: '保存成功',
           icon: 'success',
           duration: 2000
         })
       },
       fail() {
         wx.showToast({
           title: '保存失败',
           icon: 'error',
           duration: 2000
         })
       }
     })
   },
   

5. 效果
   

备注

关于wx-qr的使用，可参考wx-qr文档