uv-ui

# QRCode 二维码

✈

组件名：uv-qrcode

点击下载&安装 (opens new window)

组件是超级强大的二维码生成功能，可扩展性高。自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等，具体下方有说明。

此组件源于开源的优秀作品uQRCode (opens new window)，uv-ui只做了部分优化。本文档只对uni-app组件方式等重要的功能进行介绍，如果需要原生方法或更详细的说明，请参考uQRCode官方文档 (opens new window)。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

  1. 在nvue中使用该组件，会有报错提示reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!。 该报错完全不影响使用，是因为weex中使用gcanvas的BUG，只要用到gcanvas都会有，不影响应用，可以无视。
  2. options属性设置size属性暂时不生效，直接在组件上设置size即可<uv-qrcode size="300" ...。
  3. nvue本地运行有二维码，打包后没有二维码，解决方案参考：nvue打包后生成失败 (opens new window)

# 基本使用

二维码默认尺寸为 200px ，可以根据设置 size 进行调整。下面有更多参数说明。

<template>
	<view>
		<uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
	</view>
</template>

# 自定义样式

二维码配置选项，可以配置data、size、margin等参数，具体参考下方参数说明。

<template>
	<view>
		<uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options2"></uv-qrcode>
	</view>
</template>
<script>
export default {
	data() {
		return {
			options2: {
				data: 'https://www.uvui.cn',
				size: 300,
				useDynamicSize: false,
				errorCorrectLevel: 'Q',
				margin: 10,
				areaColor: "#F95F6B",
				backgroundColor: "#3c9cff",
				// 指定二维码前景，一般可在中间放logo
				foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
			}
		}
	}
}
</script>

# 自定义风格

通过内置 registerStyle 方法进行注册扩展插件，组件仅支持注册type为style的drawCanvas扩展，具体参考下方说明。

下载更多风格的模板，可以到uQRCode官方-风格下载 (opens new window) 。

温馨提示：options 配置中的 style 与插件标识对应上，比如示例中的 style: 'round'，round 即是标识。

<template>
	<view>
		<uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options3"></uv-qrcode>
	</view>
</template>
<script>
	import QRCodeStyleRound from './uqrcode.plugin.round.es.js';
	export default {
		data() {
			return {
				options3: {
					style: 'round',
					// 指定二维码前景，一般可在中间放logo
					foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
				}
			}
		},
		onReady() {
			/* 注册扩展插件 */
			this.$refs.qrcode.registerStyle(QRCodeStyleRound); // qrcode为组件的ref名称
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# QRCode Props

参数 说明 类型 默认值 可选值
value 二维码内容 String - -
options 二维码配置选项 Object - 参考uQRCode官方基本配置 (opens new window)
size 二维码尺寸，单位可以是px，rpx String | Number 200 -
fileType 导出的文件类型 String png png | jpg
start 是否初始化组件后就开始生成 Boolean true true | false
auto 是否数据发生改变自动重绘 Boolean true true | false
hide 隐藏组件 Boolean false true | false
type canvas 类型，微信小程序默认使用2d，其他为normal String - 2d | normal
queue 队列绘制，主要针对nvue端 Boolean false true | false
isQueueLoadImage 是否队列加载图片，可减少canvas发起的网络资源请求，节省服务器资源 Boolean false true | false
loading loading状态 Boolean true true | false
h5SaveIsDownload H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载 Boolean false true | false
h5DownloadName H5下载名称 String uvQRCode -
h5SaveTip 1.0.3 H5保存二维码时候是否显示提示 Boolean true true | false

# QRCode Methods

事件名 说明 使用方法
make() 生成二维码 this.$refs.qrcode.make({
 success: () => {
   console.log('生成成功');
 },
 fail: err => {
   console.log(err)
 }
});
remake() 重新生成二维码 this.$refs.qrcode.remake({
 success: () => {
   console.log('生成成功');
 },
 fail: err => {
   console.log(err)
 }
});
toTempFilePath() 导出临时文件路径。请在 complete 事件返回success=true后调用。 this.$refs.qrcode.toTempFilePath({
 success: (res) => {
   console.log(res);
 }
});
save() 保存二维码到本地相册。为了保证方法调用成功，请在 complete 事件返回success=true后调用。 this.$refs.qrcode.save({
 success: (res) => {
   console.log(res);
 }
});
registerStyle() 注册扩展插件，组件仅支持注册type为style的drawCanvas扩展。 参考上面的案例自定义风格。下载更多风格的模板，可以到uQRCode官方-风格 (opens new window)

# QRCode Events

事件名 说明 回调参数
@complete 生成完成时触发 { success: true | false }
@click 点击组件时触发 -
@change 重绘时触发 -

# QRCode Slots

事件名 说明
loading 自定义加载中的提示内容

← Waterfall 瀑布流 →