Qrcode 二维码

概述

Qrcode 二维码，主要用于存储网址、名片、文本信息、特定代码等信息。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

使用前请先阅读uni-app官方 canvas组件 (opens new window) 注意事项。
保存二维码图片，可根据@ready事件返回的canvasId自行完成保存功能。
Nvue下Canvas是作为独立的模块，云端打包时需要选择使用Canvas模块才能正常使用相关的功能。需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：

"app-plus" : {
/* 模块配置 */
"modules" : {
   "Canvas" : "nvue canvas" //使用Canvas模块
 }
}

1
2
3
4
5
6

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiQrcode from "@/components/firstui/fui-qrcode/fui-qrcode.vue"
 export default {
	components:{
	  fuiQrcode
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序和文档API。

组件初始化

通过 value 属性设置二维码内容。

<fui-qrcode :value="value"></fui-qrcode>

data() {
	return {
		value: 'https://doc.firstui.cn'
	}
}

1
2
3
4
5

# Slots

名称	说明
-	-

# Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	二维码宽度，单位rpx	400	-
height	Number, String	二维码高度，单位rpx	400	-
value	String	二维码文本内容	-	-
foreground	String	二维码前景色	#181818	-
background	String	二维码背景色	#ffffff	-

# Events

事件名	说明	回调参数
@ready	组件初始化完成时触发	{ canvasId:唯一标识符 }
@longclick	手指长按 500ms 之后触发	-
@touchStart	手指触摸动作开始	-
@touchEnd	手指触摸动作结束	-

TIP

注：若 nvue android端报以下错误，暂时不用处理！

reportJSException >>>> exception function:gcanvas setBackGround for android view, 
exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: 
TextureView doesn't support displaying a background drawable!

1
2
3

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用。

开通会员 (opens new window)

← Poster 分享海报 Barcode 条形码 →