QRCode.js 动态生成二维码

字数 292阅读 3440

一:什么是QRCode.js?

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

QRCode.js 地址:https://pan.baidu.com/s/1SnmQkdaL-nV5oFesS7ZPeQ

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

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