微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码

各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码、核销码等等。
那么,小程序端该如何生成二维码图片呢?
效果如下:
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码_第1张图片

weapp-qrcode.js

小伙伴们可以来我的gitee下载:XujiRe/weapp-qrcode
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码_第2张图片
下载完了接下来我们该如何使用呢?

使用技巧

将weapp-qrcode.js放在小程序的utils文件夹中
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码_第3张图片
代码编写:

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
			})
		
		}
	})
}

这个就是回调返回的数据
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码_第4张图片
好了,这是小编的一些开发思路,如果各位大佬有更好的方法,麻烦在下方评论或者私聊小编哦~
让小编一起学习。

你可能感兴趣的:(微信小程序,微信小程序,javascript,前端)