dillonlfy/ weapp-qrcode
About the developer
137 Stars 
257 Forks 
MIT License 
6 Commits 
7 Opened issues 
Description
微信小程序快速生成二维码，支持回调函数返回二维码临时文件
Services available
Contributors list
No Data
weapp-qrcode
微信小程序生成二维码工具
生成二维码数据的主要代码来自davidshimjs/qrcodejs，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。
截图
使用（自适应版本）
完整代码请参考
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