小程序-二维码生成

在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>