更新记录

1.2.0（2026-09-14） 下载此版本

• 适配 QQ、百度、快手、京东、飞书、小红书小程序与快应用：JS 写出 PNG 后用 image 展示。

1.1.0（2026-09-14） 下载此版本

• 修复鸿蒙APP二维码保存相册失败。

1.0.0（2026-09-14） 下载此版本

• 首发：二维码 / 条形码绘制，支持保存到相册和浏览器下载。
• 支持多种格式的条形码。

平台兼容性

uni-app(4.83)

umi-barcode

uni-app 二维码 / 条形码组件。easycom 引入 <umi-barcode>，也可调用 generateCode 直接写出 PNG。

本插件只用于 uni-app 工程（.vue / .nvue），不是 uni-app-x。属性与 umi-barcode-x 对齐，便于同一套业务在两套工程里复用。

平台

Vue 2、Vue 3 均可。nvue 仅 App-Android / App-iOS，鸿蒙 App 用 vue 页。

微信 / 支付宝 / 抖音走 Canvas 2D：离屏画完再 canvasToTempFilePath，页面用 <image> 显示。支付宝必须等原生 canvas ready 后再 draw，查询节点用 .node()。

QQ、百度等小程序的 canvas type="2d" 官方未与微信对齐，原生 canvas 又高于普通节点、不能进 scroll-view。这些端与快应用改用和鸿蒙相同的 JS 栅格化 PNG，避免各端 canvas 差异。二维码 logo 预览为浮层；保存相册为码图文件（与鸿蒙元服务相同，logo 不一定烧进 PNG）。

码制

format 取值（大小写不敏感；ean-13、code_39 等写法会归一化）：

使用

easycom 自动引入。vue 页面用 .vue 组件，nvue 页面用 .nvue 组件：

<umi-barcode
    ref="qrBar"
    type="qrcode"
    value="https://uniapp.dcloud.net.cn/"
    :size="200"
    :logo="qrLogo"
    @success="onOk"
    @fail="onFail"
></umi-barcode>
<umi-barcode type="qrcode" size="200px" value="hello"></umi-barcode>
<umi-barcode type="barcode" format="code128" value="ABC-12345678" width="280rpx" height="88rpx"></umi-barcode>
<umi-barcode type="barcode" format="ean13" value="6922868288601" width="280rpx" height="88rpx"></umi-barcode>
<umi-barcode type="barcode" format="ean8" value="96385074" width="280rpx" height="88rpx"></umi-barcode>
<umi-barcode type="barcode" format="code39" value="ABC-1234" width="280rpx" height="88rpx"></umi-barcode>
<umi-barcode type="barcode" format="code93" value="CODE93" width="280rpx" height="88rpx"></umi-barcode>

import qrLogo from './logo.png'

export default {
    data() {
        return { qrLogo }
    },
    methods: {
        onOk(e) {
            // e.path 为码图临时路径（部分端 canvas 直出时可能为空字符串）
            console.log(e.width, e.height, e.path)
        },
        onFail(e) {
            uni.showToast({ title: e.errMsg, icon: 'none' })
        },
        save() {
            this.$refs.qrBar.download().then((path) => {
                uni.showToast({ title: '已保存', icon: 'none' })
            }).catch((err) => {
                uni.showToast({ title: err.message || '保存失败', icon: 'none' })
            })
        }
    }
}

数字尺寸默认 rpx（按 750 设计稿换算成 px），也可写 "200px" / "200rpx"。

属性

value、尺寸、颜色、logo 等变化会自动重绘。

logo 路径

• vue 页（含微信 / 支付宝 / 抖音小程序）：按 uni-app 静态资源，把图放在页面旁（不要只丢进 static 再把 /static/logo.png 传进组件内部 <image>，会被解析成组件目录）。推荐 import qrLogo from './logo.png' 再 :logo="qrLogo"。小程序小于 40kb 会编成 base64，组件内才能显示。
• nvue / App-Harmony / 鸿蒙元服务 / QQ、百度、快手、京东、飞书、小红书 / 快应用：可用 logo="/static/logo.png"。

保存到相册时，带 logo 的二维码会尽量合成进 PNG；预览层可能先浮一层 <image>，合成失败时仍保存无 logo 底图。

事件

组件方法

须等 success 之后再调。内容为空会 reject「内容不能为空」；尚未出图会 reject「码图尚未生成」。

JS API

import { generateCode, generateCodeAlbumPreview, saveCodeToAlbum } from '@/uni_modules/umi-barcode'

generateCode(options)

编码并写出 PNG，返回本地路径 Promise。不经过组件，也不会把 logo 图画进文件（logo 非空时只把二维码纠错升到 H）。需要带 logo 的相册文件请用组件 download()。

generateCode({
    content: 'hello',
    type: 'qrcode',
    width: 200,
    height: 200
}).then((path) => {
    return saveCodeToAlbum(path)
}).then(() => {
    uni.showToast({ title: '已保存到相册', icon: 'none' })
})

generateCode({
    content: '96385074',
    type: 'barcode',
    format: 'ean8',
    width: 280,
    height: 88
})

saveCodeToAlbum(filePath)

H5 通过浏览器下载已有码图，文件名自动生成为 umi_barcode_*.png；其它支持端把本地码图写入系统相册。filePath 为空会失败。

鸿蒙保存前组件内部会把图垫成约 16:9，减轻授权预览窗裁切码图；调用 generateCode + saveCodeToAlbum 时如需同样效果，可用导出的 generateCodeAlbumPreview(options)（参数同 generateCode）。

保存相册权限

调用 download() / saveCodeToAlbum 前，各端需具备相册写入能力：

H5：不需要相册权限。浏览器会按自身下载设置保存 PNG；应从用户点击事件中调用，避免被浏览器拦截。

iOS（manifest.json → app-ios.distribute.privacyDescription）：

"NSPhotoLibraryAddUsageDescription": "用于将生成的二维码和条形码保存到相册"

Android（app-android.distribute.permissions）。不要给 WRITE_EXTERNAL_STORAGE 加 android:maxSdkVersion="28"，否则运行期会直接抛错。改权限后必须重新运行（自定义基座要重打）。

"app-android": {
  "distribute": {
    "permissions": [
      "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
      "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>"
    ]
  }
}

微信小程序：在公众平台开通「保存到相册」；用户首次保存会授权 scope.writePhotosAlbum。

支付宝小程序：在开放平台配置相册写入能力；首次 saveImageToPhotosAlbum 会拉授权。

抖音 / 头条小程序：在开放平台开通相册权限；首次保存会授权。

QQ / 百度 / 快手 / 京东 / 飞书 / 小红书：在对应开放平台开通相册写入；首次保存走 uni.saveImageToPhotosAlbum。各端权限字段名可能不同，以平台文档为准。

快应用：按厂商相册能力配置。无相册 API 时 download() 会失败，页面仍可展示码图。

鸿蒙（App-Harmony 与 mp-harmony）：按工程相册权限配置；授权弹窗预览可能裁切非 16:9 图，组件 download() 已做垫图。