一：什么是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);
}
});
},
