QRCode.js 动态生成二维码

一：什么是QRCode.js？

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

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

1：页面

    <div id='qrcode'></div>
    <button onclick='createQrcode();'>生成二维码<button>

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：小程序页面

<view>
  <!-- 存放二维码的图片-->
  <view class='container'>
    <image style='width:310rpx;height:310rpx;margin-top:30rpx;' src="{{imagePath}}"></image>
  </view>
  <!-- 画布，用来画二维码，只用来站位，不用来显示-->
  <view class="canvas-box">
    <canvas hidden="{{canvasHidden}}" style="width: 170px;height: 170px;background:#f1f1f1;" canvas-id="mycanvas" />
  </view>
</view>

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);
   }
  });
},