微信小程序快速生成二维码,支持回调函数返回二维码临时文件
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
components/myComponent
dist
images
pages
typings
utils
LICENSE
README.md
app.js
app.json
jsconfig.json
project.config.json
screenshot0.png
screenshot1.gif
screenshot2.png
weapp-qrcode.001.png

README.md

weapp-qrcode

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

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

截图

截图1 截图2 gif

使用(自适应版本)

完整代码请参考pages/responsive/responsive,设置widthheight的时候稍微所有不同。

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为需要转化为二维码的字符串;

widthheight为绘制出的二维码长宽,这里设置为跟canvas同样的长宽;

colorDarkcolorLight为二维码交替的两种颜色;

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

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

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

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

参考

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