更新记录

1.0.0(2025-03-02)

新上线离屏绘制二维码和条形码


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
Android:4.4,iOS:不支持,HarmonyNext:不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

wui-generateCode开发文档

介绍

wui-generateCode是UTS编写的 二维码和条形码生成的UTS插件 本插件采用的是离屏绘制 所以不需要需绑定canvas组件就能实现绘制操作返回 base64 图片。目前兼容安卓app和web。 如果需要扫码插件请使用wui-scanCode华为统一扫码服务

基本使用

1.引入插件

import { code } from '@/uni_modules/wui-generateCode';

2.调用插件的生成函数

    //生成 QR 二维码
    code.QRCODE({
        content:"1234567890",
        success: (res) => {
            let width = `${res.width}px`;
            let height = `${res.height}px`;
            let src = res.src;
            console.log(src);
        }
    })

    //生成 code128 条形码
    code.CODE128({
        content: `8978432`,
        success: (res) => {
            let width = `${res.width}px`;
            let height = `${res.height}px`;
            let src = res.src;
            console.log(src);
        }
    })
    //生成 QR 二维码
    code.CODEEAN13({
        content: `565789345876`,
        success: (res) => {
            let width = `${res.width}px`;
            let height = `${res.height}px`;
            let src = res.src;
            console.log(src);
        }
    })
    //生成 QR 二维码
    code.CODEEAN8({
        content: `1234567`,
        success: (res) => {
            let width = `${res.width}px`;
            let height = `${res.height}px`;
            let src = res.src;
            console.log(src);
        }
    })

生成码code下的方法和配置参数介绍

1.二维码 code.QRCODE(options: generateCodeOptions)说明:

options配置项 类型 是否必须 说名
content string (是) 二维码的内容
width number (否)默认300 二维码的宽
height number (否)默认300 二维码的高
logoSrc string (否)默认null 二维码中间的logo图片地址支持本地和网络图片
matrixSize number (否)默认1 矩阵点的大小设置可选1到2之间的数字1最大2最小
matrixShape string (否)默认"rect" 矩阵点的形状 可选 "rect" "arc" "star" "paper"
setTarg string (否)默认"founder" 定位图形状 可选"founder" "rounded" "rounder" "lozenge" "star" "bubble" "eye" "single"
margin number (否)默认10 二维码边距
bgColor string (否)默认"#ffffff" 二维码背景色
fgColor string (否)默认"#000000" 二维码前景色
QRErr string (否)默认"L" 二维码纠错等级可选"L" "Q" "M" "H"
success (res : successOptions) => void 成功回调res.width res.height res.src
fail (res : boolean) => void 失败回调 res = true 或 false
complete (res : boolean) => void 执行完成回调res = true 或 false

2.条形码 code.CODE128(options: generateCodeOptions)说明:

options配置项 类型 是否必须 说名
content string (是) code128条形码的内容不支持中文字符
sText string (否)默认是content内容 code128条形码的下方显示文字
issText boolean (否)默认false 是否下方显示文字
textMwidth number (否)默认0 下方显示文字间距
fontSize number (否)默认10 下方显示文字大小
width number (否)默认200 code128条形码的宽
height number (否)默认80 code128条形码的高
margin number (否)默认10 code128条形码边距
bgColor string (否)默认"#ffffff" code128条形码背景色
fgColor string (否)默认"#000000" code128条形码前景色
success (res : successOptions) => void 成功回调res.width res.height res.src
fail (res : boolean) => void 失败回调 res = true 或 false
complete (res : boolean) => void 执行完成回调res = true 或 false

2.条形码 code.CODEEAN13(options: generateCodeOptions)说明:

options配置项 类型 是否必须 说名
content string (是) EAN13条形码的内容必须12位首位不能是0
fontSize number (否)默认10 下方显示文字大小
width number (否)默认200 EAN13条形码的宽
height number (否)默认80 EAN13条形码的高
margin number (否)默认10 EAN13条形码边距
bgColor string (否)默认"#ffffff" EAN13条形码背景色
fgColor string (否)默认"#000000" EAN13条形码前景色
success (res : successOptions) => void 成功回调res.width res.height res.src
fail (res : boolean) => void 失败回调 res = true 或 false
complete (res : boolean) => void 执行完成回调res = true 或 false

2.条形码 code.CODEEAN8(options: generateCodeOptions)说明:

options配置项 类型 是否必须 说名
content string (是) EAN8条形码的内容必须7位首位不能是0
fontSize number (否)默认10 下方显示文字大小
width number (否)默认200 EAN8条形码的宽
height number (否)默认80 EAN8条形码的高
margin number (否)默认10 EAN8条形码边距
bgColor string (否)默认"#ffffff" EAN8条形码背景色
fgColor string (否)默认"#000000" EAN8条形码前景色
success (res : successOptions) => void 成功回调res.width res.height res.src
fail (res : boolean) => void 失败回调 res = true 或 false
complete (res : boolean) => void 执行完成回调res = true 或 false

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问