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

# Qrcode 二维码 3.6.0

二维码生成组件，支持自定义颜色、图标、大小等配置，还支持二维码状态显示和长按保存功能。

# 平台差异说明

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

# 基本使用

直接引入即可使用，通过value配置二维码内容：

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

# 自定义大小

通过size属性设置二维码尺寸：

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

# 自定义颜色

通过background、foreground、pdground属性自定义二维码颜色：

<u-qrcode 
    value="https://uview.d3u.cn/" 
    background="#f0f0f0"
    foreground="#3eaf7c"
    pdground="#ff6b6b">
</u-qrcode>
✅ Copy success!

# 设置中心图标

通过icon和iconSize属性设置二维码中心的图标：

<u-qrcode 
    value="https://uview.d3u.cn/" 
    icon="https://uview.d3u.cn/common/logo.png"
    :iconSize="40">
</u-qrcode>
✅ Copy success!

# 设置容错级别

通过level属性设置二维码的容错级别：

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

容错级别说明：

L：低容错级别，可恢复约7%的数据
M：中等容错级别，可恢复约15%的数据
Q：较高容错级别，可恢复约25%的数据
H：高容错级别，可恢复约30%的数据

# 二维码状态

通过status属性设置二维码状态，支持显示过期、已扫描等状态：

<template>
    <u-qrcode 
        value="https://uview.d3u.cn/" 
        :status="qrStatus"
        :expiredText="'二维码已过期，请重新获取'"
        :scannedText="'二维码已被扫描'"
        :refreshText="'点击重新生成'"
        @refresh="handleRefresh">
    </u-qrcode>
</template>

<script>
export default {
    data() {
        return {
            qrStatus: '' // 可选值：'expired' | 'scanned' | 'loading'
        }
    },
    methods: {
        handleRefresh() {
            // 处理刷新逻辑
            this.qrStatus = '';
        }
    }
}
</script>
✅ Copy success!

# 长按保存

组件支持长按保存二维码图片，可通过fileType和quality属性控制导出质量：

<u-qrcode 
    value="https://uview.d3u.cn/" 
    fileType="png"
    :quality="0.8"
    @onLongpress="handleSave">
</u-qrcode>
✅ Copy success!

# 自定义插槽

组件提供了多个插槽用于自定义状态显示：

<u-qrcode value="https://uview.d3u.cn/" status="loading">
    <template #loading>
        <view class="custom-loading">正在生成二维码...</view>
    </template>
</u-qrcode>

<u-qrcode value="https://uview.d3u.cn/" status="expired">
    <template #expired>
        <view class="custom-expired">
            <text>二维码已过期</text>
            <button @click="refreshQR">重新生成</button>
        </view>
    </template>
</u-qrcode>

<u-qrcode value="https://uview.d3u.cn/" status="scanned">
    <template #scanned>
        <view class="custom-scanned">
            <u-icon name="checkmark-circle-fill" size="24" color="success"></u-icon>
            <text>已成功扫描</text>
        </view>
    </template>
</u-qrcode>
✅ Copy success!

# 此页面源代码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
value	二维码内容	String \| Number	''	-
size	二维码尺寸	String \| Number	140	-
background	背景色	String	'#fff'	-
foreground	前景色	String	'#000'	-
pdground	定位角点颜色	String	'#000'	-
level	容错级别	String	'H'	L \| M \| Q \| H
icon	二维码中心图标	String	''	-
iconSize	图标大小	Number	30	-
status	二维码状态	String	''	expired \| scanned \| loading
expiredText	过期提示文字	String	'二维码已过期'	-
scannedText	已扫码提示文字	String	'已扫描'	-
refreshText	刷新按钮提示文字	String	'点击刷新'	-
mode 3.6.1	生成模式，图片模式不存在层级问题	String	image	canvas

# Event

事件名	说明	回调参数	版本
change	重新生成二维码时触发	-	-
refresh	点击刷新按钮时触发	-	-
onLongpress	长按保存二维码时触发	tempFilePath: 临时文件路径	-
error	生成或保存出错时触发	error: 错误信息	-

# 插槽

插槽名	说明	版本
loading	自定义加载状态显示	-
expired	自定义过期状态显示	-
scanned	自定义已扫描状态显示	-

# 注意事项

图标要求：icon属性需要传入图片的完整URL地址，建议使用正方形图片以获得最佳效果。
容错级别：容错级别越高，二维码越不容易被破坏，但二维码密度也会相应增加。建议根据实际使用场景选择合适的容错级别。
长按保存：长按保存功能在不同平台上的表现可能略有差异，建议在目标平台上进行充分测试。
状态管理：status属性用于控制二维码的显示状态，当设置为expired或scanned时，会显示相应的遮罩层。
文件导出：fileType支持png和jpg格式，quality参数仅在导出jpg格式时有效。

← Markdown 文档解析 Cropper 图片剪裁 →