Need help with weapp-qrcode?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dillonlfy
182 Stars 333 Forks MIT License 6 Commits 7 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

weapp-qrcode

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

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

截图

截图1 截图2 gif

使用(自适应版本)

完整代码请参考

pages/responsive/responsive
,设置
width
height
的时候稍微所有不同。

canvas
的长宽通过计算获得 ```js const W = wx.getSystemInfoSync().windowWidth; const rate = 750.0 / W;

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

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

wxml
页面中:
html

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

使用(非自适应)

完整代码请参考

pages/index/index

页面

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


页面

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

页面加载好后:

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.