更新记录

1.0.1（2026-08-20） 下载此版本

• 更改文档使用说明

1.0.0（2026-08-20） 下载此版本

• 支持文本生成二维码。
• 支持 canvas2d 和 view 两种渲染模式。
• 支持自定义颜色、中心图片、图片导出及保存。
• 支持微信小程序、H5 和 App-Vue。

平台兼容性

uni-app(5.01)

uni-app x(5.01)

其他

yl-qrcode

不依赖第三方运行时的 uni-app 二维码组件，支持 Vue 3、微信小程序、H5 和 App-Vue。组件提供 canvas2d 与 view 两种展示模式，两种模式均可导出图片和保存。 在弹窗中推荐使用 view 模式，以避免二维码显示有问题。如要使用 canvas2d 模式，需要在弹窗打开后且在nextTick中调用 remake 方法，否则二维码显示有问题。 ...... popup.value.open(); nextTick(() => { qrcodeRef.value?.remake() }) ......

基础用法

<template>
    <yl-qrcode
        ref="qrcodeRef"
        value="https://example.com"
        size="400rpx"
        margin="2"
        mode="canvas2d"
        color="#1677ff"
        image="/static/logo.png"
        image-size="80rpx"
        @complete="handleComplete"
        @error="handleError"
    />
</template>

<script setup>
import { ref, nextTick } from 'vue'

const qrcodeRef = ref(null)

const saveQrcode = async () => {
    try{
        await qrcodeRef.value.save()
        uni.showToast({
            title: '保存成功',
            icon: 'success'
        })
    }catch(error){
        uni.showToast({
            title: '保存失败',
            icon: 'error'
        })
    }
}

const handleComplete = result => {
    console.log(result)
}

const handleError = error => {
    console.error(error.message)
}

/**
 * 注意事项：在弹窗中使用时(或将二维码组件放在新创建的dom中)，需要在弹窗打开后调用 `remake` 方法，否则二维码显示有问题。
 * 打开二维码窗体并重新生成二维码
 */
const openPopup = () => {
    popup.value.open();
    nextTick(() => {
        qrcodeRef.value?.remake()
    })
}

</script>

easycom 开启时无需手动导入组件；组件名为 yl-qrcode。

Props

为了确保跨端 canvas 能正确识别颜色，color 和 background-color 不接受 CSS 变量或命名颜色。

实例方法

所有异步方法均返回 Promise，并兼容 success、fail、complete 回调。

await qrcodeRef.value.make()

qrcodeRef.value.save({
    success: result => console.log(result),
    fail: error => console.error(error),
    complete: result => console.log(result),
})

未成功生成二维码时，toTempFilePath() 和 save() 会返回 rejected Promise。

事件

平台说明

• 微信小程序使用新版 Canvas 2D 节点；网络中心图需要在小程序后台配置合法 download 域名。
• H5 的 save() 会触发浏览器下载，并可展示二维码图片供移动端长按保存。Web 平台无法保证图片直接进入系统相册。
• App 支持 App-Vue 页面，通过 uni-app canvas API 绘制和导出；当前组件不支持 nvue 页面。
• 小程序和 App 的相册权限由系统管理。组件不会自动打开权限设置页，拒绝权限时会原样返回失败。
• view 模式只负责页面展示，导出和保存会由组件内部离屏 canvas 合成相同内容。

许可

组件内置的 QR 编码核心基于 Kazuhiko Arase 的 QR Code Generator（MIT License），源码及许可声明位于 components/yl-qrcode/vendor/qrcode-generator.js。