小程序生成带参数的小程序码并使用canvas绘制分享页

293 阅读1分钟

需求是:a小程序里填写完报告单保存后生成带参数的小程序码,用户扫描小程序码进入b小程序并打开该报告单。 对于我来说还是遇到不少问题的。 最后实现的效果图就是这样啦

微信图片_20190904141442.png
以下是代码片段

/**点击保存后 */
  saveForm() {
    wx.showLoading({
      title: '正在保存',
    })
    this.getQRcode();
  },
  /**生成企业端二维码 */
  getQRcode() {
    let that = this;
    wx.request({
      url: “url”,//后端二维码地址
      responseType: "arraybuffer",//这个一定要加,不然出来的是一堆乱码
      data: {
        scene: 2,
        page: "pages/index/index"
      },
      success(res) {
        if (res.statusCode == 200) {
          var base64 = wx.arrayBufferToBase64(res.data);
          that.setData({
            qrCode: 'data:image/PNG;base64,' + base64
          })
          //下面这一步是将图片写入本地不能省这一步
          let fs = wx.getFileSystemManager();
          let dataBuffer = res.data;
          fs.writeFile({
            filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,//${wx.env.USER_DATA_PATH}/ 本地文件地址,qrcode.png自定义的图片名称
            data: dataBuffer,
            encoding: 'base64',
            success(res) {
              // 在成功的回调函数中,定义的FilePath的值就可以直接拿去绘制到画布上了
              // 后续各种绘制操作
              that.getShareImg();
            },
            fail() {
              console.log("写入文件错误")
            }
          })
        }

      }
    })
  },
  /**绘制分享图片 */
  getShareImg() {
    let that = this;
    let width = that.data.width;
    let height = that.data.height;
    const ctx = wx.createCanvasContext('myCanvas', that);
    ctx.drawImage('/image/shareimg.png', 0, 0, width, height);
    //${wx.env.USER_DATA_PATH}/qrcode.png存入的二维码地址
    ctx.drawImage(`${wx.env.USER_DATA_PATH}/qrcode.png`, (width - 180) / 2, 70, 180, 180);
    
    //canvasToTempFilePath绘制一定要写在draw()里哦,不然绘制空白的
    ctx.draw(false, setTimeout(function() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width,
        height,
        destWidth: width * 2,
        destHeight: height * 2,
        canvasId: 'myCanvas',
        success(res) {
          wx.hideLoading();
          that.setData({
            shareImg: res.tempFilePath
          })
        },
        fail(res) {
          console.log("fail")
        }
      }, that)
    }, 1000))

  },

以上就是相关代码啦,刚开始工作的新人一枚,如果有什么不对欢迎指出提醒啦。