weapp-qrcode.js

最近在项目中遇到一个需求，在微信小程序中需要对用户的二维码进行不同状态的变色

weapp-qrcode.js

引入

将图中红框部分下载下来放到项目中引用，一般来说我们会将它放在utils文件夹中

页面

<!--显示图片用的标签-->
<image class="container-4-item-v-ewm" src="{{ewmImg}}"></image>
<!--创建一个画布，将它移出屏幕外看不到的地方-->
<canvas class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;"/>

import QRCode from '../../../utils/weapp-qrcode.js';

onload(){
    new QRCode('myQrcode',{
        text: 这里就是放你要扫描出来的内容了,   
        width: 141,	//canvas 画布的宽
        height: 141,	//canvas 画布的高
        padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
            //工具回调数据
            // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
            wx.hideLoading()
            console.log("生成二维码",res)
            //将图片路劲放入data中，显示在wxml的image标签上
            that.setData({
                    ewmImg:res.path,
                    showEwmIndex:e.currentTarget.dataset.index
            })
        }
    })
}

API

drawQrcode([options])

options

Type: Object

参数	说明	示例
width	必须，二维码宽度，与canvas的width保持一致	200
height	必须，二维码高度，与canvas的height保持一致	200
canvasId	必须，绘制的canvasId	'myQrcode'
text	必须，二维码内容	'github.com/yingye'
typeNumber	非必须，二维码的计算模式，默认值-1	8
correctLevel	非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }	1
background	非必须，二维码背景颜色，默认值白色	'#ffffff'
foreground	非必须，二维码前景色，默认值黑色	'#000000'
_this	非必须，若在组件中使用，需要传入，v0.7.0版本支持	this
callback	非必须，绘制完成后的回调函数，v0.8.0版本支持	function (e) { console.log('e', e) }