微信小程序前端根据内容生成二维码Qrcode

在微信小程序开发项目中，后端返回的api接口数据中，有一个支付页面，这个支付页面网址在小程序中是打不开的，需要生成二维码让客户扫描支付，客户扫描二维码就会打开支付页面，支付项目金额！

1、需要下载封装好的qrcode的js文件，下载地址已放到文章下面的下载按钮中。

2、在我们需要在使用的页面将qrcode.js文件引入

import * as QRCode from '../../utils/qrcode.js'

3、首先微信小程序wxml文件中写入canvas标签

<canvas canvasId="myCanvas" style="width: 450rpx;height: 450rpx;background:#fff;margin: 0 auto;"></canvas>

4、如果有中文的话，需要一个方法来解决中文乱码的问题（没有可不写）

  toUtf8(str) { //解决中文乱码的问题
    var out, i, len, c;
    out = "";
    len = str.length; //文本域值的长度
    for (i = 0; i < len; i++) {
      c = str.charCodeAt(i); //返回值是UTF-16的代码单元值 0-65535之间的整数 参数：大于等于0（如果小于0或者等于大于字符串的长度 则返回nan）
      // console.log('cc',c);
      if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i); // 从一个字符串中返回指定的字符
        // console.log('out',out); //就是文本域的值
      } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      } else {
        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      }
    }
    return out;
  },

5、 获取可使用屏幕的宽高度的方法（px）

// 获取可使用窗口的框高度
getWindowWH(){
    var seeWH = {} // 往seeWH对象中新增窗口宽高度两个属性
    try {
        const res = wx.getSystemInfoSync()// 获取设备信息
        var w = res.windowWidth / (750 / 450) //可使用窗口的宽度
        var h = res.windowWidth / (750 / 450) //可使用窗口的高度
        seeWH.w = w
        seeWH.h = h
    } catch (e) {
        // Do something when catch error
        console.log('获取设备信息失败', e);
    }

    return seeWH
},

6、创建画布的方法

// 创建画布 接收传递过来的几个实参
drawCanvas(e,n,t,i){
    var that=this
    // e:代表文本域的值
    // n：canvasID
    // t：可使用窗口的宽度
    // i：可使用窗口的高度
    // that.data.bgVal：背景颜色 默认：#fff
    // that.data.clVal ：前景颜色 默认：#000
    //这里的  drawQrcode.api.draw 是引入封装好的js文件进来里面 的 draw方法
    QRCode.api.draw(e,n,t,i,"","", that.data.bgVal, that.data.clVal)
},

7、 用画布内容区域生成导出一个指定的大小图片 的方法

createImage(){
    var that = this
    wx.canvasToTempFilePath({
        canvasId:"myCanvas", //必选
        success(res){
            // 生成好了关闭loading效果
            wx.hideLoading()
            console.log(res.tempFilePath)
        }
    })
},

8、点击生成二维码按钮事件

 // 点击生成二维码
  createQRCode() {
    var that=this
      // 有文本域的值 提示loading效果
      wx.showLoading({
        title: "生成中"
      })
      // 获取可使用宽高度
     let obj= that.getWindowWH()
      // 调用创建画布的方法，传递参数
      that.drawCanvas('https://www.codesou.cn/', "myCanvas", obj.w, obj.h)
      setTimeout(()=>{
        //调用 把当前画布内容导出生成指定大小的图片
        that.createImage()
      },300)
    }
  },