小程序-二維碼生成

在h5端做二維碼我一般是借用插件 qrcode

現在在小程序也需要實現二維碼功能

如下圖：

也是用qrcode，wepapp版本  資源地址

 

引用方式地址事例：https://github.com/tomfriwel/weapp-qrcode/blob/master/components/myComponent/myComponent.js

 

生成二維碼：

1.下載weapp-qrcode.js資源，存放在小程序目錄

2.在需要引用的地方 引入資源

var QRCode = require('../../utils/weapp-qrcode.js')
var qrcode;

3.wxml中的展示容器

 canvas-id和調用的時候需要一致

 <canvas canvas-id='canvas1'></canvas>

4.調用生成二維碼

qrcode = new QRCode('canvas1', {
      usingIn: this,
      text: ‘郭婷’,
      width: 125,
      height: 125,
      colorDark: "#333333",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });

這樣二維碼就生成了 

 

還有個小問題 就是生成二維碼以后 canvas組件 是原生組件 在ios上 會上下滑動

解決方法：

1.在json文件配置

"disableScroll":true

2.對canvas組件disable-scroll進行設置 並綁定相應的事件  相關鏈接

disable-scroll

Boolean

false

當在 canvas 中移動時且有綁定手勢事件時，禁止屏幕滾動以及下拉刷新

 <canvas class='canvas' canvas-id='canvas' disable-scroll="true" bindtouchmove="touchMove"></canvas>