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

这篇具有很好参考价值的文章主要介绍了uqrcode+uni-app 微信小程序生成二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用微信小程序需要弹出动态二维码的需求，从插件市场选了一个下载次数较多的组件引入到项目中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+uni-app 微信小程序生成二维码,uni-app,微信小程序
注意：若微信开发者工具提示 uqrcode is undefined 类似这样子的错误提示，需要重启开发者工具，或者停止运行再重新启动，重启后便没有该错误提示了。

3、文档

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

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

到了这里，关于uqrcode+uni-app 微信小程序生成二维码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！