小程序中某個頁面生成二維碼，並下載二維碼圖片

wxml:
<view class="input">
  <input placeholder="請輸入員工編號" bindinput="inputChange" value="{{inputVal}}"></input>
  <!-- <view class="icon-box" wx:if="{{true}}" catchtap="clearInput" >
    <van-icon name="close" class="close-icon" size="36rpx" />
  </view> -->
  <van-icon name="close" class="close-icon" size="36rpx" wx:if="{{show}}" />
  <button bindtap="createQrcode">生成二維碼</button>
</view>

<view class="code" wx:if="{{codeShow}}">
  <canvas class="canvas" style="width: 300rpx; height: 300rpx;" canvas-id="myQrcode"></canvas>
  <view class="down" bindtap="savePic">保存到手機相冊</view>
</view>

/* pages/generate/

// import QRcode from '../../miniprogram_npm/weapp-qrcode/index'
import QRcode from '../../utils/weapp-qrcode';

let userInfo = null;
let params = null;

Page({

  /**
   * 頁面的初始數據
   */
  data: {
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    this.isLogin()
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function (options) {
    // const that = this;
    // // 設置轉發內容
    // const shareObj = {
    //   title: '來吧',
    //   path: '/pages/index/index.wxml',
    //   success: function(res) {
    //     if(res.errMsg === 'shareAppMessage:ok') {

    //     }
    //   }
    // };
    // return shareObj;
  },
  // 是否登錄
  isLogin() {
    wx.getStorage({
      key: 'userInfo',
      success: res => {
        
      },
      fail: () => {
        wx.navigateTo({
          url: '/pages/login/index',
        })
      }
    })
  },
  // 生成二維碼
  createQrcode() {
    const {inputVal} = this.data;
    const that = this;
    if(inputVal) {
      this.setData({
        codeShow: true
      })
      const text = `/page/index/index?code=${inputVal}`;
      QRcode({
        width: this.rpx2px(300),
        height: this.rpx2px(300),
        canvasId: 'myQrcode',
        text,
        _this: this,
        callback: res => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: this.rpx2px(300),
            height: this.rpx2px(300),
            destWidth: this.rpx2px(300),
            destHeight: this.rpx2px(300),
            canvasId: 'myQrcode',
            success: function(res) {
              let path = res.tempFilePath
              that.setData({
                filePath: path,
              })
              },
          })
        }
      });
    } else {
      wx.showToast({
        title: '請輸入員工編號',
        icon: 'none'
      })
    }
  },
  inputChange(e) {
    if(e.detail.value.length) {
      this.setData({
        show: true
      })
    } else {
      this.setData({
        show: false
      })
    }
    this.setData({
      inputVal: e.detail.value,
    })
  },
  clearInput() {
    this.setData({
      inputVal: '',
    })
  },
  rpx2px(rpx) {
    const A = wx.getSystemInfoSync().windowWidth;
    const px = rpx * A / 750;
    return px;
  },
  // 保存圖片
  savePic() {
    const that = this;

    wx.getSetting({
      success:(res)=>{
        if (!res.authSetting['scope.writePhotosAlbum']){
          wx.authorize({
            scope:'scope.writePhotosAlbum',
            success:(res)=>{
              this.save()
            },
            fail: err => {
              if(err.errMsg.includes('authorize:fail')) {
                // 重新打開相冊權限
                wx.openSetting({
                  success(settingdata) {
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      // 獲取權限成功，給出再次點擊圖片保存到相冊的提示
                      this.save()
                    }else {
                      // 獲取權限失敗，給出不給權限就無法正常使用的提示
                    }
                  }
                })
              }
            }
          })
        } else {
          this.save();
        }

      }
    })
  },

  // save
  save() {
    const that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.filePath,
      success: (res) => {
        wx.showToast({
          title: '圖片保存成功',
          icon: 'none',
        })
      },
      fail:(res)=>{
        wx.showToast({
          title: '圖片保存失敗',
          icon: 'none',
        })
      },
      complete:(res)=>{}
    })
  },

})

　　

.wxss */ .input { height: 100rpx; line-height: 100rpx; display: flex; margin-top: 40rpx; position: relative; } .input > input { width: 70%; height: 100rpx; line-height: 100rpx; border: 1rpx solid #ccc; background-color: #fff; padding-left: 20rpx; } .input > button { width: 30%; height: 100rpx; line-height: 100rpx; font-size: 24rpx; background-color: #f00; border: 1rpx solid #f00; color: #fff; border-radius: 0; } .code { text-align: center; text-decoration: underline; font-size: 26rpx; color: orange; } .code .canvas { margin: 40rpx auto 40rpx; } /* .icon-box { height: 100rpx; width: 68rpx; position: relative; } */ .close-icon { position: absolute; right: 30%; top: 50%; transform: translateY(-50%); z-index: 999; }

　　效果：