uqrcode+uni-app 微信小程序生成二维码

Swn_2023-09-23 14:28

使用微信小程序需要弹出动态二维码的需求，从插件市场选了一个下载次数较多的组件引入到项目中uqrcode，使用步骤如下：

1、从插件市场下载

插件地址：https://ext.dcloud.net.cn/plugin?id=1287，若你是跟我一样是用uni-app开发微信小程序的，则该插件的介绍只需要看下面的即可，上面是作者介绍用于原生开发中。

2、引入

下载好后，按照下面方式引入

复制代码

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

上述是二维码的内容，我是写在popup中

复制代码

<uni-popup id="popupQrcode" ref="popupQrcode" type="center" :animation="true">
	<uqrcode ref="uqrcodepop" canvas-id="qrcode" :value="qrcodeUrl" :options="{ margin: 10 }" :size="300"
				:loading="qrcodeLoading" @complete="qrchange($event)"></uqrcode>
</uni-popup>

（按照自己的需要引入即可）

下图是关于uni-app使用的关键部分：

注意：若微信开发者工具提示 uqrcode is undefined 类似这样子的错误提示，需要重启开发者工具，或者停止运行再重新启动，重启后便没有该错误提示了。

3、文档

除了简单使用之外，若有进一步要求，比如显示loading、二维码大小、重新生成二维码、点击事件、下载保存等需求，可在此基础上添加事件和方法即可，文档地址：https://uqrcode.cn/doc/document/uni-app.html

复制代码

qrchange(e) {
	if (e.success) {
		console.log('生成成功');
		_this.qrcodeLoading = false;
    } else {
	   console.log('生成失败');
	   _this.qrcodeLoading = false;
    } 
},