更新记录
1.0.17(2025-05-29)
新增扫描后二维码图片获取。JSON返回数据(codeImgPath):
{
"statusCode": "success",
"scanResults": [
{
"codeType": 256,
"valueType": 8,
"codeImgPath": "file:///data/user/0/uni.xxx/files/imgs/JPEG_20250529_212128_8976639690231050378.bmp",
"codeValue": "http://tp.mmxchina.com/?extinfo=PF3RZH6H"
}
]
}
通过getBase64FromFilePath接口获取图片base64的数据
1.0.16(2025-05-27)
修复和ocr插件冲突问题
1.0.15(2025-05-23)
- 修复部分平板无法扫码问题
- 多码选择位置不准问题
平台兼容性
uni-app(4.34)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | 4.4 | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.41)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | 5.0 | - | - | - |
Demo使用及日志抓取
通过百度网盘分享的文件:app-debug.apk 链接:https://pan.baidu.com/s/1pR3stmVFVyok_gGsYfezmQ?pwd=6l1k 提取码:6l1k
示例使用
点击右边“使用HBuilderX导入示例项目”,导入后示例中有个PDF文件,按照文件运行项目。
平台兼容性
目前支持Android,CPU类型支持x86,arm64-v8a,armeabi-v7a android目前适配到API 34
插件功能
- 同时扫多个二维码和条形码
- 配置相册
- 闪光灯
- 相机可以调整焦距放大缩小
- 支持自定义扫描线颜色、提示文案等
- 支持扫描完成提示音、震动
- 支持码内容解析(WIFI信息,位置信息,联系人信息邮件信息,短信信息等等)
- 功能持续完善中...
插件使用及相关API说明
在线使用插件通用流程
- 购买此插件,选择该插件绑定的项目(使用者项目)。
- 购买页面导入到相应项目。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包。
此插件的使用
引入插件
import { myApi, MyApiOptions,ScanOptions,scanBarCode,getBase64FromFilePath } from "@/uni_modules/xt-barcode-scan"
使用插件
uniapp x 版本 :
let options = {
params: `{
'showVibrate': true,
'showBeep': true,
'showPhotoAlbum': true,
'showLightController': true,
'supportZoom': true,
'scanColor': '#ff0000',
'hintText': '扫二维码/条形码',
'hintTextColor': '#ffffff',
'hintTextSize': '14',
'useScanStarPoint':false,
'lightOnHintText':'请打开手电筒1',
'lightOffHintText':'请关闭手电筒1',
'starPointScanLineColumn':30,
'starPointScanLineHeight':300,
'fullScreenScan':true
}`,
complete: (res : any) => {
console.log(res)
let strR:string = res.toString();
//使用JSON进行解析参数
}
} as ScanOptions;
scanBarCode(options);
getimg() {
console.log("getimg");
const that = this;
let options = {
params: that.fptah,
complete: (res : any) => {
console.log("base64 callback");
that.basesrc = "data:image/jpeg;base64," + res;
}
} as ScanOptions;
getBase64FromFilePath(options);
},
uniapp 版本:
import {ScanOptions,scanBarCode } from "@/uni_modules/xt-barcode-scan"
scanBarCode({
params: '{"showVibrate": true,"showBeep": true,"showPhotoAlbum": true,"showLightController": true,"supportZoom": true,"scanColor": "#ff0000","fullScreenScan":true}',
complete: (res) => {
console.log(res);
}
});
getimg() {
const that = this;
getBase64FromFilePath({
params: that.fptah,
complete: (res) => {
console.log("base64 callback");
that.basesrc = "data:image/jpeg;base64," + res;
},
});
},
参数说明
参数名 | 参数类型 | 参数默认值 | 参数说明 |
---|---|---|---|
showVibrate | Boolean | False | 是否需要扫码完成时震动 |
showBeep | Boolean | True | 是否需要扫码完成时发出Beep音 |
showPhotoAlbum | Boolean | True | 是否支持相册选取扫码照片 |
photoAlbumPickEnable | Boolean | False | 相册选取扫码照片时是否支持多码手动选取 |
showLightController | Boolean | True | 是否显示手电筒按钮 |
supportedFormats | String | null | 设置支持的码类型,使用时如何设置见下方说明 |
supportZoom | Boolean | False | 是否支持相机可以调整焦距放大缩小 |
scanColor | String | "#FF0000" | 设置扫描线颜色 |
hintText | String | "请扫二维码/条形码" | 设置扫码文案 |
hintTextColor | String | "#FF0000" | 设置提示文案颜色 |
hintTextSize | Integer | 14 | 调整提示文案字体大小 |
useScanStarPoint | Boolean | True | 扫描界面,True:星点闪烁 False:扫描线 |
starPointScanLineColumn | Integer | 30 | 星点列数 |
starPointScanLineHeight | Integer | 300 | 星点高度 |
fullScreenScan | Boolean | False | 是否全屏扫描 |
lightOnHintText | String | "打开闪光灯" | 手电筒开状态文案 |
lightOffHintText | String | "关闭闪光灯" | 手电筒关状态文案 |
supportedFormats 使用:支持的类型间用"#"分隔,比如支持二维码和13位条形码:"256#32", 仅支持二维码:"256"
各种码的编号如下:
FORMAT_CODE_128 = 1;
FORMAT_CODE_39 = 2;
FORMAT_CODE_93 = 4;
FORMAT_CODABAR = 8;
FORMAT_DATA_MATRIX = 16;
FORMAT_EAN_13 = 32; 13位条形码
FORMAT_EAN_8 = 64; 8位条形码
FORMAT_ITF = 128;
FORMAT_QR_CODE = 256; 常用的二维码
FORMAT_UPC_A = 512;
FORMAT_UPC_E = 1024;
FORMAT_PDF417 = 2048;
FORMAT_AZTEC = 4096;
回调结果说明
回调结果是一个JSON格式数据,包含两个属性
属性名 | 属性类型 | 说明 | |
---|---|---|---|
statusCode | String | 成功为"success",其他为失败 | |
scanResults | String | 只有成功时才有值 |
scanResults说明(JSON数据,包含两个属性)
属性名 | 属性类型 | 说明 | |
---|---|---|---|
codeType | Integer | 码类型 | |
codeValue | String | 码内容 | |
valueType | Integer | 码的值类型,是WIFI,GPS,联系人,短信等等,可用于处理具体业务 UNKNOWN = 0; CONTACT_INFO = 1; EMAIL = 2; ISBN = 3; PHONE = 4; PRODUCT = 5; SMS = 6; TEXT = 7; URL = 8; WIFI = 9; GEO = 10; CALENDAR_EVENT = 11; DRIVER_LICENSE = 12; | |
codeImgPath | String | 二维码图片,通过方法getBase64FromFilePath获取base64的数据 |
codeType说明
FORMAT_UNKNOWN = -1; 未知
FORMAT_ALL_FORMATS = 0; 所有类型
FORMAT_CODE_128 = 1; Code 128
FORMAT_CODE_39 = 2; Code 39
FORMAT_CODE_93 = 4; Code 93
FORMAT_CODABAR = 8; Codabar
FORMAT_DATA_MATRIX = 16; Data Matrix
FORMAT_EAN_13 = 32; EAN-13
FORMAT_EAN_8 = 64; EAN-8
FORMAT_ITF = 128; ITF
FORMAT_QR_CODE = 256; QR Code(二维码)
FORMAT_UPC_A = 512; UPC-A
FORMAT_UPC_E = 1024; UPC-E
FORMAT_PDF417 = 2048; PDF417
FORMAT_AZTEC = 4096; Aztec
返回示例
{
"statusCode": "success",
"scanResults": [
{
"codeType": 256,
"valueType": 8,
"codeImgPath": "file:///data/user/0/uni.xxx/files/imgs/JPEG_20250529_212128_8976639690231050378.bmp",
"codeValue": "http://tp.mmxchina.com/?extinfo=PF3RZH6H"
}
]
}
完整的uniappX 的vue代码
<template>
<view class="content">
<img class="imgi" :src="basesrc" alt="Base64 JPG Image"></img>
<button @tap="take">拍照</button>
<div class="text-wrapper">{{title}}</div>
</view>
</template>
<script>
import {OCROptions,uTSOCRRecognize,getBase64FromFilePath} from "@/uni_modules/xt-ocr-recognize"
export default {
data() {
return {
title: 'scan result placehodle',
fptah : "",
basesrc: "/static/logo.png",
}
},
onLoad() {
},
methods: {
take() {
const that = this;
uTSOCRRecognize({
params: '{"recognizeType": 3,"showBeep": true,"imgLocation": 0,"pickTextFromImg": false,"pickTextAreaType": 3,"textAreaType": 1,"forceVertical": true,}',
complete: (res) => {
console.log(res);
that.title = res;
var resu = JSON.parse(res);
console.log(resu.result);
if (resu.result) {
console.log(resu.result.imagePath);
that.fptah = resu.result.imagePath;
that.getimg();
}
}
});
},
getimg() {
const that = this;
getBase64FromFilePath({
params: that.fptah,
complete: (res) => {
console.log("base64 callback");
that.basesrc = "data:image/jpeg;base64," + res;
},
});
},
},
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.imgi{
max-width: 100%; /* 响应式图片 */
height: auto; /* 保持图片比例 */
border-radius: 5px; /* 添加圆角 */
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.text-wrapper {
height: 500rpx;
width: 500rpx;
word-break: break-all;
word-wrap: break-word
}
</style>