小程序中某个页面生成二维码，并下载二维码图片

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=" 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({
         this.rpx2px(300),
        height: this.rpx2px(300),
        canvasId: 'myQrcode',
        text,
        _this: this,
        callback: res => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
             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 {  70%; height: 100rpx; line-height: 100rpx; border: 1rpx solid #ccc; background-color: #fff; padding-left: 20rpx; } .input > button {  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;  68rpx; position: relative; } */ .close-icon { position: absolute; right: 30%; top: 50%; transform: translateY(-50%); z-index: 999; }

　　效果：