在近期的小程序开发中,有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode,由于小程序中没有DOM的概念,这些库在小程序中并不适用。
所以,针对微信小程序的特点,封装了 wxapp.qrcode.js ,用于在小程序中快速生成二维码
下面来介绍一下使用方法:
使用
创建canvas标签
先在 wxml 文件中,创建绘制的 canvas,并定义好 width, height, canvasId 。由于小程序没有动态创建标签的api,所以这一步不能省略。
//画布的宽高和id必须给
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
将weapp.qrcode.min.js 拷贝至项目中,然后引用js文件
let drawQrcode = require('../../utils/wxapp.qrcode.min.js');
再调用 drawQrcode() 绘制二维码
drawQrcode({
//宽度
width: 200,
//高度
height: 200,
//画布id
canvasId: 'myQrcode',
//要生成的内容
text: 'aaa'
}
API说明
参数 | 说明 |
---|---|
width | 必须,二维码宽度,与canvas的width保持一致 |
height | 必须,二维码高度,与canvas的height保持一致 |
canvasId | 必须,绘制的canvasId |
text | 必须,二维码内容 |
typeNumber | 非必须,二维码的计算模式,默认值-1 |
correctLevel | 非必须,二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 } |
background | 非必须,二维码背景颜色,默认值白色 |
foreground | 非必须,二维码前景色,默认值黑色 |
wxapp.qrcode.js下载路径为https://download.csdn.net/download/qq_41981057/10817093