QRCode.js 动态生成二维码

一：什么是QRCode.js？

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。参考：使用 JavaScript 生成二维码

二：一般网页端生成二维码

1：页面

    

    生成二维码

2：二维码默认配置，清空

var qrcode = new QRCode('qrcode', {
    width: 150,  height: 150,
})
qrcode.clear();

3：点击生成二维码的时候动态生成二维码

function createQrcode(){
    qrcode.clear();
    var QRCodeStr = ‘https://www.baidu.com’;
    qrcode.makeCode(QRCodeStr);
}

三：小程序里面生成二维码

在小程序端，可以使用canvas生成二维码；但是如果是想把二维码生成在弹出层上，由于小程序中 canvas 是原生组件，默认位于视图最上层，会覆盖其他元素，因此会带来一些不便，因此如果不想使用 canvas 生成qrcode ，可以选择其他解决方案，放在image里。下面一个例子：

1：小程序页面

2：小程序js的配置

//首先在页面js上面引入小程序生成二维码js
var QR = require("../../utils/qrcode.js");

/**
* 页面的初始数据
*/
data: {
  canvasHidden: false, //默认不让canvas二维码隐藏，否则不能生成二维码
  imagePath: "" //弹出框二维码显示图片地址
},

3：小程序js onload里调用生成二维码方法

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
  var that = this;
  var initUrl = 'https://www.baidu.com?id='+id;
  //创建二维码
  that.createQrCode(initUrl, "mycanvas", 170, 170);
}

4：小程序js 生成二维码方法

  /**
* 绘制二维码图片
*/
createQrCode: function(url, canvasId, cavW, cavH) {
    //调用插件中的draw方法，绘制二维码图片
    QR.api.draw(url, canvasId, cavW, cavH);
    setTimeout(() => {
      this.canvasToTempImage();
    }, 500);
  },
/**
* 获取临时缓存照片路径，存入data中
*/
canvasToTempImage: function() {
  var that = this;
  //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
 wx.canvasToTempFilePath({
   canvasId: 'mycanvas',
   success: function(res) {
     var tempFilePath = res.tempFilePath;
     that.setData({
       imagePath: tempFilePath,
       canvasHidden:true
     });
   },
   fail: function(res) {
     console.log(res);
   }
  });
},