Qrcode 二维码 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Qrcode 二维码 3.5.42

二维码生成插件，可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。

# 平台差异说明

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

注意

该版本已正式废弃，不再提供任何维护更新，建议您立即升级到最新版。

# 基本使用

直接引入即可使用

通过value配置二维码内容

<u-qrcode value="https://uview.d3u.cn/"></u-qrcode>
✅ Copy success!

# 设置LOGO

直接引入即可使用

通过options配置二维码参数

<u-qrcode value="https://uview.d3u.cn/" :options="{ 
   foregroundImageSrc:'https://uview.d3u.cn/common/logo.png', 
   foregroundImageBackgroundColor:'none' 
}"></u-qrcode>
✅ Copy success!

# 改变颜色和样式

通过options配置二维码参数

<u-qrcode value="https://uview.d3u.cn/" :options="{ foregroundColor: '#3eaf7c' }"></u-qrcode>
<u-qrcode value="https://uview.d3u.cn/" :options="{ style: 'liquid'}"></u-qrcode>
<u-qrcode value="https://uview.d3u.cn/" :options="{ style: 'round'}"></u-qrcode>
<u-qrcode value="https://uview.d3u.cn/" :options="{ style: 'words', words: '打开手机扫一扫' }"></u-qrcode>
✅ Copy success!

# 此页面源代码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
value	二维码内容 (start为true时必填)	String	-	-
size	二维码尺寸	String \| Number	-	-
options	二维码配置选项（见下表）	Object	-	详见 https://uqrcode.cn/doc/document/native.html
fileType	导出的文件类型	String	png	-
start	是否初始化组件后就开始生成	Boolean	true	false
auto	是否数据发生改变自动重绘	Boolean	false	true
hide	隐藏组件。如果只需要导出二维码作为图片使用，可设置为true，不能在组件或组件父级元素设置v-if="false"、v-show="false"、style="display:none;"等实现隐藏效果，这样会导致导出二维码空白	Boolean	false	true
queue	队列绘制	Boolean	false	true
isQueueLoadImage	是否队列加载图片，选择true将通过队列缓存所需要加载的图片。优点是加载重复资源可减少资源请求次数，节省网络资源，缺点是会转化为同步请求，资源不重复且多的情况下，等待时间会更久。总之，请求重复资源较多则选择true，请求不重复资源较多则选择false	Boolean	false	true
loading	loading态	Boolean	false	true
status 3.5.36	二维码状态，expired: 已过期，scanned: 已扫码	string	''	expired \| scanned
expiredText 3.5.36	过期提示文字	String	二维码已过期	-
scannedText 3.5.36	已扫码提示文字	String	已扫描	-
refreshText 3.5.36	刷新按钮提示文字	String	点击刷新	-
h5SaveIsDownload	H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载	Boolean	false	-
h5DownloadName	H5下载名称	String	-	-
h5SaveTip	H5保存二维码时候是否显示提示	Boolean	-	-

# options 参数说明

参数名	说明	类型	默认值	必填
data	二维码对应内容	string	''	是
size	二维码大小	number	200	否
useDynamicSize	是否使用动态尺寸，可去掉方块小数点，提升美观度。实际尺寸会变化，需通过实例获取动态尺寸数值及时重设画布	boolean	false	否
dynamicSize	动态尺寸数值，useDynamicSize为true时自动计算	number	undefined	否
typeNumber	二维码版本，-1为自动计算	number	-1	否
errorCorrectLevel	二维码纠错等级	number	UQRCode.errorCorrectLevel.H	否
margin	二维码边距	number	0	否
areaColor	二维码绘制区域颜色、底部背景色	string	#FFFFFF	否
backgroundColor	二维码背景色	string	rgba(255,255,255,0)	否
backgroundImageSrc	二维码背景图片地址	string	undefined	否
backgroundImageWidth	二维码背景图片宽度	number	size	否
backgroundImageHeight	二维码背景图片高度	number	size	否
backgroundImageX	二维码背景图片X坐标	number	0	否
backgroundImageY	二维码背景图片Y坐标	number	0	否
backgroundImageAlpha	二维码背景图片透明度	number	1	否
backgroundImageBorderRadius	二维码背景图片圆角值	number	0	否
backgroundPadding	二维码背景码点内边距(0.0-1.0)	number	0.0	否
foregroundColor	二维码前景色	string	#000000	否
foregroundImageSrc	二维码前景图片地址	string	undefined	否
foregroundImageWidth	二维码前景图片宽度	number	size / 4	否
foregroundImageHeight	二维码前景图片高度	number	size / 4	否
foregroundImageX	二维码前景图片X坐标	number	居中	否
foregroundImageY	二维码前景图片Y坐标	number	居中	否
foregroundImagePadding	二维码前景图边距填充	number	0	否
foregroundImageBackgroundColor	二维码前景图背景颜色	string	#FFFFFF	否
foregroundImageBorderRadius	二维码前景图边框圆角值	number	0	否
foregroundImageShadowOffsetX	二维码前景图阴影水平偏移值	number	0	否
foregroundImageShadowOffsetY	二维码前景图阴影垂直偏移值	number	0	否
foregroundImageShadowBlur	二维码前景图阴影模糊度	number	0	否
foregroundImageShadowColor	二维码前景图阴影颜色	string	#808080	否
foregroundPadding	二维码前景码点内边距(0.0-1.0)	number	0.0	否
positionProbeBackgroundColor	二维码定位角图案背景色	string	同backgroundColor	否
positionProbeForegroundColor	二维码定位角图案前景色	string	同foregroundColor	否
separatorColor	二维码分割图案颜色	string	同foregroundColor	否
positionAdjustBackgroundColor	二维码对齐图案背景色	string	同backgroundColor	否
positionAdjustForegroundColor	二维码对齐图案前景色	string	同foregroundColor	否
timingBackgroundColor	二维码时序图案背景色	string	同backgroundColor	否
timingForegroundColor	二维码时序图案前景色	string	同foregroundColor	否
typeNumberBackgroundColor	二维码版本图案背景色	string	同backgroundColor	否
typeNumberForegroundColor	二维码版本图案前景色	string	同foregroundColor	否
darkBlockColor	二维码暗块颜色	string	同foregroundColor	否

# Event

事件名	说明	回调参数	版本
click	点击二维码	-	-
complete	生成完成	-	-
change	重新生成	-	-
refresh 3.5.36	过期点击刷新	-	-

← Qrcode 二维码 Cropper 图片剪裁 →