使用微信小程序需要弹出动态二维码的需求,从插件市场选了一个下载次数较多的组件引入到项目中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;
}
},