QRCode.jsは二次元コードを動的に生成する.

一:QRCode.jsとは?
QRCode.jsは、二次元コードを生成するためのJavaScriptライブラリである.主にDOMのラベルを取得し、HTML 5 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を使用したくない場合はqrcudeを生成し、他の解決策を選択して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);
   }
  });
},