MENU

小程序使用weapp-qrcode.js三方库生成二维码

2026 年 04 月 08 日 • 笔记

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

将第三方库放在utils/weapp-qrcode.js

二维码生成成功

下载:weapp-qrcode.js