更新记录

0.0.6（2025-08-31）

• chore: 更新文档

0.0.5（2025-05-24）

• feat: 兼容uniapp x 鸿蒙next

0.0.4（2024-04-01）

• chore: 兼容uniapp x ios(app-js)

平台兼容性

uni-app x(4.75)

lime-qrcodegen 二维码生成组件

一个功能强大的二维码生成组件，用于在应用中生成自定义二维码。支持设置二维码大小、颜色、纠错级别、边距等多种配置。

文档链接

📚 组件详细文档请访问以下站点：

• 二维码生成组件文档 - 站点1
• 二维码生成组件文档 - 站点2
• 二维码生成组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-qrcodegen
2. 导入后需要自定义基座才能运行
3. 配合 lime-qrcode uvue 组件使用

代码演示

基础用法

最简单的二维码生成组件用法，只需要设置值即可。

<view ref="qrcodeRef"></view>

import { QRCodeCanvas } from '@/uni_modules/lime-qrcodegen'

const el = this.$refs['qrcodeRef'] as UniElement 
const ctx = el.getDrawableContext()
const qrcode = new QRCodeCanvas(ctx)
qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    fgColor: '#000000',
    level: 'M',
    marginSize: 10,
    imageSettings: null,
    includeMargin: true
})

自定义颜色的二维码

可以设置二维码的前景色，使二维码更加个性化。

qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    fgColor: '#1989fa', // 设置蓝色
    level: 'M',
    marginSize: 10,
    includeMargin: true
})

带Logo的二维码

在二维码中间添加Logo图片，可以设置Logo的大小和边框。

qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    fgColor: '#000000',
    level: 'H', // 使用高纠错级别
    marginSize: 10,
    imageSettings: {
        src: 'https://example.com/logo.png',
        height: 40,
        width: 40,
        excavate: true, // 是否挖空Logo位置
        borderSize: 2,
        borderColor: '#ffffff'
    },
    includeMargin: true
})

不同纠错级别的二维码

可以设置不同的纠错级别，影响二维码的容错能力。

// 低级别纠错
qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    level: 'L', // L级别：约7%的码字可被恢复
    marginSize: 10,
    includeMargin: true
})

// 中级别纠错
qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    level: 'M', // M级别：约15%的码字可被恢复
    marginSize: 10,
    includeMargin: true
})

// 高级别纠错
qrcode.render({
    value: '这是一个二维码内容',
    size: 200,
    level: 'H', // H级别：约30%的码字可被恢复
    marginSize: 10,
    includeMargin: true
})

API文档

QRCodeCanvas 类

构造函数

new QRCodeCanvas(context)

render 方法参数

level 可选值

ImageSettings 接口

interface ImageSettings {
  src: string;           // Logo图片地址
  height: number;        // Logo高度
  width: number;         // Logo宽度
  excavate: boolean;     // 是否挖空Logo位置
  borderSize?: number;   // Logo边框大小
  borderColor?: string;  // Logo边框颜色
}

注意事项

1. 使用高纠错级别(H)可以提高二维码的容错能力，特别是在添加Logo时
2. 二维码内容越多，生成的二维码越复杂，建议使用较大的尺寸
3. 添加Logo时，Logo不宜过大，否则可能影响二维码的识别率
4. 导入插件后需要自定义基座才能运行

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助