微信小程序前端生成二維碼並保存

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('用戶點擊取消')
          }
        }
      })
    },