更新记录
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 |