dillonlfy / weapp-qrcode

微信小程序快速生成二维码，支持回调函数返回二维码临时文件

weapp-qrcode

微信小程序生成二维码工具

生成二维码数据的主要代码来自davidshimjs/qrcodejs，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。

截图

使用（自适应版本）

完整代码请参考pages/responsive/responsive，设置width和height的时候稍微所有不同。

canvas的长宽通过计算获得

const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;

// 300rpx 在6s上为 150px
const qrcode_w = 300 / rate;

Page({
    data: {
        ...
        qrcode_w: qrcode_w,
        ...
    },
    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            // usingIn: this,
            text: "https://github.com/tomfriwel/weapp-qrcode",
            image: '/images/bg.jpg',
            padding: 12,
            width: qrcode_w,
            height: qrcode_w,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
            callback: (res) => {
                // 生成二维码的临时文件
                console.log(res.path)
            }
        });
    },
    ...
})

wxml页面中：

<canvas class='canvas' style="width:{{qrcode_w}}px; height:{{qrcode_w}}px;" canvas-id='canvas' bindlongtap='save'></canvas>

wxss中的canvas样式不再设置长宽。这样后就达到了自适应的效果，可以在不同设备上进行查看。

使用（非自适应）

完整代码请参考pages/index/index

页面wxml中放置绘制二维码的canvas:

<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

页面js中引入:

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

页面加载好后:

//传入wxml中二维码canvas的canvas-id
//单位为px
var qrcode = new QRCode('canvas', {
    // usingIn: this,
    text: "https://github.com/tomfriwel/weapp-qrcode",
    width: 150,
    height: 150,
    padding: 12,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
    callback: (res) => {
        // 生成二维码的临时文件
        console.log(res.path)
    }
});

usingIn为可选参数，详情清查卡在自定义组件使用时失效及解决思路 #1

text为需要转化为二维码的字符串；

width和height为绘制出的二维码长宽，这里设置为跟canvas同样的长宽；

colorDark和colorLight为二维码交替的两种颜色；

correctLevel没有细看源码，命名上看应该是准确度；

如果需要再次生成二维码，调用qrcode.makeCode('text you want convert')。

wxss里需要设置同等的长宽，比如上面初始化时的长宽为150，那么：

.canvas {
    //...
    width: 150px;
    height: 150px;
}

参考

https://github.com/tomfriwel/weapp-qrcode

weapp-qrcode's Issues

windows，微信开发者工具，无法生成二维码，没有任何错误日志，回调函数也没有打印任何信息

qrcode = new QRCode('canvas', {
text: "https://github.com/tomfriwel/weapp-qrcode",
image: '/images/bg.jpg',
padding: 12,
width: qrcode_w,
height: qrcode_w,
colorDark: "#1CA4FC",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H,
callback: (res) => {
// 生成二维码的临时文件
console.log(res.path)
}
});

在安卓的小程序中使用，生成的二维码关键点会有缺失，导致微信无法识别。

把二维码封装成组件的时候无法导出图片，而且导出图片的时候进入的是初始化方法的callback

1、exportImage的方法我改成了这个，这样保存图片的时候才能够保存成功，如果canvas封装成组件的话，canvasToTempFilePath要传入当前canvas的实例

QRCode.prototype.exportImage = function (callback) {
if (callback && typeof callback === 'function') {

    wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this._htOption.width,
        height: this._htOption.height,
        destWidth: this._htOption.width,
        destHeight: this._htOption.height,
        canvasId: this.canvasId,
        success: (res) => {
          callback({path: res.tempFilePath})
        }
    }, this._htOption.usingIn)
  } 
}

2、另外，在初始化的方法内，生成图片本地链接的方法改成了这个，增加了this._htOption.callback的回调
_oContext.draw(false, () => {
setTimeout(() => {
this.exportImage(this._htOption.callback)
}, 800)
})

二维码绘制偏差？

根据示例给的参数，在微信模拟器和真机调试都可以正常显示，发布为体验版本绘制二维码坐标位置全乱了，扫一扫都不能检查出是个二维码。

希望可以支持ts

老哥，希望弄个ts 的声明文件

callback回调疑似未执行

onload中
var qrcode = new QRCode('canvas', {
usingIn: this,
text: "https://github.com/tomfriwel/weapp-qrcode",
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
callback: function(res) {
console.log(res) // 未打印
},
success: res => {
console.log(res) // 未打印
}
});