各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码、核销码等等。
那么,小程序端该如何生成二维码图片呢?
效果如下:
weapp-qrcode.js
小伙伴们可以来我的gitee下载:XujiRe/weapp-qrcode
下载完了接下来我们该如何使用呢?
使用技巧
将weapp-qrcode.js放在小程序的utils文件夹中
代码编写:
wxml
<!--显示图片用的标签-->
<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;"/>
js
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
})
}
})
}
这个就是回调返回的数据
好了,这是小编的一些开发思路,如果各位大佬有更好的方法,麻烦在下方评论或者私聊小编哦~
让小编一起学习。