UNIAPP VU3 微信小程序 使用UQRCODE 生成二维码_uniapp绘制小程序二维码

使用uqrcode在UNIAPP VU3 微信小程序 使用UQRCODE 生成二维码

要先在uniapp插件市场下载UQRCODE插件,可直接导入到HBUILDER

然后,template部分 

	<view>
		<uqrcode ref="uqrcode" canvas-id="qrcode" 
		size=750 
		sizeUnit='rpx'
		:value=code2 
		 :start="false" 
		 :options="{style:'round',margin:50}"></uqrcode>
	</view>

script部分

import UQRCodePluginRound from './uqrcode.plugin.round.js'	
    const {proxy} = getCurrentInstance()
	onMounted(() => {
		code2.value="https://uqrcode.cn/doc/document/uni-app.html#methods"
		proxy.$refs.uqrcode.registerStyle(UQRCodePluginRound)
	})

VUE3 setup语法糖里没有this,所以文档里的this.$refs那些都跑不了,所以官方文档里的代码运行不了,

但可以用如图的getCurrentInstance()得到当时页面实例,用它的下面有$refs.uqrcode可以得到uqrcode实例. 从这个实例就能做一些定制了,

比如设置二维码的样式

方法如下:

1.导入它内部的样式插件,(第一行代码里的js文件)

  可以到github它的源文件里找到,共有4个样式,找你喜欢的就行,

uQRCode/plugin at main · Sansnn/uQRCode · GitHub

如图

2.在TEMPLATE部分的option里设置style,(值在1步里下载的js文件目录里可以看到详细的说明)

3.registerStyle()来注册样式

结果比默认的样式好看一些

如图