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

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

weapp-qrcode

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

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

截图

背景图测试中...（页面pages/test/test）

使用（自适应版本，使用rpx为单位）

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

canvas的长宽通过计算获得

const QRCode = require('../../utils/weapp-qrcode.js')import rpx2px from '../../utils/rpx2px.js'let qrcode;// 300rpx 在6s上为 150pxconst qrcodeWidth = rpx2px(300)Page({ data: { ... qrcodeWidth: qrcodeWidth, ... }, onLoad: function (options) { qrcode = new QRCode('canvas', { // usingIn: this, text: "https://github.com/tomfriwel/weapp-qrcode", image: '/images/bg.jpg', width: qrcodeWidth, height: qrcodeWidth, colorDark: "#1CA4FC", colorLight: "white", correctLevel: QRCode.CorrectLevel.H, }); }, ...})

wxml页面中：

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

使用（非自适应）

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

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

页面js中引入:

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

页面加载好后:

//传入wxml中二维码canvas的canvas-id//单位为pxvar 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,});

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

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

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

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

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

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

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

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

主要流程

TODO

https://github.com/SumiMakito/Awesome-qr.js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。