更新记录
1.0.3(2024-10-15)
- android适配Android14
- 修复已知问题
1.0.2(2024-01-17)
1.0.1(2023-12-27)
新账号发布
查看更多
平台兼容性
Android |
Android CPU类型 |
iOS |
适用版本区间:5.0 - 14.0 |
armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 |
适用版本区间:11 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
特别提醒
- 购买本插件前,请先试用、请先试用、请先试用,并充分自测确认满足需求之后再行购买。虚拟物品一旦购买之后无法退款;
- 如有使用上的疑问、bug,可近交流群联想联系作者;
- vue3中使用component方式集成,需将“vite.config.js”(可从示例demo中复制过去)文件放入项目根目录下;
- 请在合法范围内使用,若使用本插件做非法开发,本方概不负责;
- 示例demo可能更新不及时各接口与参数以文档为主;
插件使用文档
引入插件
const hwscan = uni.requireNativePlugin('YT-hwScan');
扫描使用说明
<template>
<view class="content">
<view class="result_view">扫描结果:{{result}}</view>
<view class="item" @click="selectScanMode('defaultMode')">defaultMode</view>
<view class="item" @click="selectScanMode('customizedMode')">customizedMode</view>
<view class="item" @click="selectScanMode('multiProcessorMode')">multiProcessorMode</view>
<view class="item" @click="selectScanMode('BitmapMode')">BitmapMode</view>
<view class="item" @click="selectScanMode('Base64')">Base64</view>
<view class="item" @click="generatingCode()">creatCode</view>
<view class="item" @click.stop="commonScan()">common</view>
<image style="width: 400rpx;background-color: aquamarine;margin-top: 20rpx;" mode="aspectFill"
:src="resultPhoto"></image>
</view>
</template>
photoBase64: "data:image/png;base64,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"
// 选择扫描类型
selectScanMode(mode) {
// 用于Android端保存扫码成功图片文件夹路径
var filePath = plus.io.convertLocalFileSystemURL('_doc');
var scanOption = {
scanMode: mode, //扫描模式
scanType: ["QR", "EAN-13"],
scanResultImage: false, //是否返回扫描图片
filePath:filePath,//选填---默认是app沙盒路径
pictureBase64: "", //要识别的图片(转base64)
scanTypeOptions: {
scanTitle: "华为扫描", //导航栏标题
showPhotoAlbum: true, //显示扫描相册
showLight: true, //显示手电筒
showScanFrame: true, //是否显示扫描框
showLine:false,//是否显示扫描线条
scanLineColor:"#FF00FF",//扫描线条背景色
lineAnimationDuration:3,//扫码线条动画时间 默认 3秒
sleep:3,//连续扫描时间间隔,默认1秒
showScanMessage: true, //显示扫描框上方提示文字
scanMessage: "将码放入取景框,即可自动扫描", //扫描框上方提示文字
scanFrameSize: 300, //扫描框大小
scanFrameBackgroudColor: "#1f00BCD4", //扫描框背景
scanFrameStrokeColor: "#e1ffff", //扫描框外边框
scanContinue: false, //连续扫描
showToast:true,//连续扫描是否显示toast(仅Android有效,iOS可在uni识别成功回调中加)
toastTitle:"",//连续扫描toast内容(仅Android有效,iOS可在uni识别成功回调中加)
scanFrameRoundedCorner: 6 //扫描框圆角
},
multiOptions: { //多码配置
oneCodeReturn: true, //只扫描到一个码直接返回,默认不返回
multicodeReturn:true,//true:返回多码,为false选择多选1
scanCancelBtnTitle: "取消", //多码结果也左上角按钮文字
scanResultTips: "已扫描到码请选择", //扫描结果页选择码提示文字
identificationNumber:3,//识别到指定码数量
identificationNumberReturn:true,//识别到指定数量码才返回
identificationMoreMax:true//识别的码多余指定识别的码返回
}
}
if (mode == "defaultMode") {
} else if (mode == "customizedMode") {
//可设置 scanTypeOptions
} else if (mode == "multiProcessorMode") {
//设置 multiOptions
} else if (mode == "BitmapMode") {
} else if (mode == "Base64") {
//设置 pictureBase64(需要识别的图片转成Base64)
scanOption.pictureBase64 = this.photoBase64;
}
hwscan.hwScan({
scanOptions: scanOption
}, (res) => {
this.result = res.result
// 1.0.9新增 结构化数据:从使用特定内容格式编码的二维码、条码中提取的有效信息。Scan Kit当前已支持结构化提取Wi-Fi、EMAIL、PHONE、ISBN、PRODUCT、SMS、TEXT、URL、CONTACT INFO、GEO、CALENDAR EVENT、DRIVER LICENSE这12种码中的有效信息并返回给您,以便于您快速构建对应的服务。(iOS与Android返回的字段不同请参照华为扫描官方SDK文档,或通过JSON.stringify(res.codeTypeData)打印查看)
console.log("特殊码详细信息:"+JSON.stringify(res.codeTypeData));
// 返回扫码图片---仅Android有效
if (res.pothoPath) {
// 路径
this.resultPhoto = res.pothoPath
}
});
},
扫描参数说明
参数 |
值类型 |
说明 |
scanMode |
String |
扫码风格(defaultMode..)详细见下表 |
scanType |
Arr |
所能识别的码制式,13种 |
scanResultImage |
bool |
返回扫描结果图(Android&&customizedMode&&非连续扫描有效) |
pictureBase64 |
String |
scanMode为Base64有效,识别图片Base64 |
filePath |
String |
android端用于保存扫描图片(选填)默认是app沙盒路径 |
scanTypeOptions |
Object |
scanMode为customizedMode样式设置 |
multiOptions |
Object |
多码扫描相关设置 |
参数 |
对应扫描格式 |
defaultMode |
默认模式 |
customizedMode |
自定义模式 |
multiProcessorMode |
多码扫描 |
BitmapMode |
bitmap相册模式 |
Base64 |
Base64识别 |
说明:支持13种码制式,可自定义选择支持的码制,不传默认全部。
参数 |
对应码制格式 |
Code128 |
Code 128 |
Code39 |
Code 39 |
Code93 |
Code 93 |
Codabar |
Codabar |
EAN-13 |
EAN-13 |
EAN-8 |
EAN-8 |
ITF14 |
ITF14 |
UPC-A |
UPC-A |
UPC_E |
UPC_E |
QR |
QR code |
PDF417 |
PDF417 |
Aztec |
Aztec |
DataMatrix |
DataMatrix |
参数 |
值类型 |
说明 |
scanTitle |
String |
导航栏标题 |
showPhotoAlbum |
bool |
是否显示相册按钮 |
showLight |
bool |
是否显示手电筒 |
showScanFrame |
bool |
是否显示扫描框 |
showLine |
bool |
是否显示扫码线 |
scanLineColor |
string |
扫描线条色值(例如:"#e1ffff") |
lineAnimationDuration |
int |
扫描线条动画时间(默认3秒) |
sleep |
int |
连续扫描间隔(单位秒) |
showScanMessage |
bool |
是否显示扫描框上方文字(showScanFrame为true时有效) |
scanMessage |
String |
扫描框上方文字 |
scanFrameSize |
int |
扫描框大小 |
scanFrameBackgroudColor |
String |
扫描框背景色Android有效(例"#1f00BCD4") |
scanFrameStrokeColor |
String |
扫描框外边框色值(iOS四角、Android外边框 例:"#e1ffff") |
scanFrameRoundedCorner |
int |
扫描框圆角(仅Android有效) |
scanContinue |
bool |
连续扫描,默认false(scanMode为customizedMode有效) |
showToast |
bool |
连续扫描模式是否显示toast(仅Android有效,iOS可在uni端自行设置) |
参数 |
值类型 |
说明 |
oneCodeReturn |
bool |
只扫描到一个码直接返回 |
multicodeReturn |
bool |
true:返回多码数组 false:多选1 |
scanCancelBtnTitle |
String |
扫描多码右上角按钮文案 |
scanResultTips |
String |
扫描到多码提示文案 |
identificationNumber |
int |
设置识别到指定码个数返回(identificationNumberReturn == truey有效) |
identificationNumberReturn |
bool |
识别到指定数量码才返回(默认false) |
identificationMoreMax |
bool |
识别到的码多于设定的码数是否返回(默认false) |
构建码使用说明
creatCode() {
var options = {
width: 300, //生成码宽
height: 200, //生成码高
content: "6927562900354", //内容
codeType: "EAN-13" //码类型
}
hwscan.generatingCode(options, res => {
if (res.msg == "success") {
this.resultPhoto = res.photo
}
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
});
}
参数 |
值类型 |
说明 |
width |
int |
宽度 |
height |
int |
高度 |
content |
String |
内容 |
codeType |
String |
码制式(参照上方scanType表) |
content格式需要与codeType对应才能构建成功,不然会报参数错误。
component组件使用
component组件只能在nvue使用
参数 |
值类型 |
说明 |
scanType |
Arr |
码制式(值同上scantype表) |
continue |
bool |
是否连续扫描默认true |
sleepTime |
int |
连续扫描间隔(默认3秒) |
scanSize |
objc |
识别区域设置(详情请看下表) |
scanResultImage |
bool |
是否返回识别图片(仅Android有效) |
showScanFrame |
bool |
是否显示识别框(仅为了可视化调试识别区域大小默认隐藏) |
showScanLine |
bool |
是否显示扫码线 |
scanLineColor |
string |
扫码线颜色 16进制HEX(#FF00FF) |
lineAnimationDuration |
string |
扫码线动画时间 |
filePath |
String |
android端用于保存扫描图片(选填)默认是app沙盒路径 |
参数 |
值类型 |
说明 |
width |
int |
识别区域宽度 |
height |
int |
识别区域高度 |
说明:连续扫码模式,此时扫码结果会连续返回;设置为false,非连续扫码模式,此时相同的码值只会返回一次
//生命周期函数 -在onShow中调用
this.$refs.scanComponent.remoteResume();
例:
onShow() {
if (this.$refs.scanComponent) {
console.log('show')
this.$refs.scanComponent.remoteResume();
}
}
- 因vue3中不走scanResult回调,可在onLoad()中监听扫描成功的Event
plus.globalEvent.addEventListener('scanResultHandle', function(e) {
console.log(e)
uni.showToast({
title: e.detail.result,
icon:"none"
})
})
//生命周期函数 -在onHide中调用
this.$refs.scanComponent.remotePause();
例:
onHide() {
if (this.$refs.scanComponent) {
this.$refs.scanComponent.remotePause();
}
},
//暂停扫描
this.$refs.scanComponent.pauseScan();
//恢复扫描
this.$refs.scanComponent.resumeScan();
//跳相册
this.$refs.scanComponent.pictureScan();
//开关手电筒
this.$refs.scanComponent.switchLight();
//释放 在onUnload中调用
this.$refs.scanComponent.releaseAssets();
- 清除指定路径图片(scanResultImage==true时返回识别图片路径,用完在适当的地方清除图片,比如在上传成功后清除)
//引用 用于清除指定路径图片
const hwscan = uni.requireNativePlugin('YT-hwScan');
hwscan.clearCacheWithFilePath("识别返回的图片路径",res=>{
uni.showToast({
title: res.result?"删除成功":"删除失败",
icon: 'none',
duration: 1500
})
})
<template>
<view class="content">
<view style="width: 750rpx;flex: 1;position: relative;">
<yt-hwscan ref="scanComponent" style="width: 750rpx;position: absolute;left: 0;top: 0;bottom: 0;"
:scanSize="scanSize" :scanResultImage="scanResultImage" :showScanFrame="showScanFrame"
:scanType="scanType" :showScanLine="showScanLine" :scanLineColor="scanLineColor"
:lineAnimationDuration="lineAnimationDuration" :continue="scanContinue" @scanResult="scanResult"
:sleepTime="sleep" :filePath="filePath">
</yt-hwscan>
<!--不需要自定义样式可删掉bg-->
<view class="bg">
<text class="text_title">将码移入框内即可扫描</text>
<!-- 这个是在识别区域的位置后续自定义扫码框都在这里面 大小需要和scanSize相同单位是px-->
<view class="scan_frame">
<image class="left_top angle" src="../../static/left_top.png"></image>
<image class="right_top angle" src="../../static/right_top.png"></image>
<image class="left_bottom angle" src="../../static/left_bottom.png"></image>
<image class="right_bottom angle" src="../../static/right_bottom.png"></image>
</view>
<!-- 扫码框下方图片按钮 根据需求和扫码框大小微调-->
<view class="scan_frame_bottom_btn">
<image src="../../static/album.png" class="btn" @click="photoAlbum"></image>
<image src="../../static/flashlight.png" class="btn" @click="lightSwitch"></image>
</view>
</view>
</view>
</view>
</template>
<script>
const hwscan = uni.requireNativePlugin('YT-hwScan');//插件用于清除图片
export default {
data() {
return {
filePath:plus.io.convertLocalFileSystemURL('_doc/scanResult'),//Android保存扫码图片文件夹
// 识别区域size
scanSize: { //单位px
width: 300,
height: 300
},
showScanLine: true, //显示扫码线
scanLineColor: "#FF00FF", //扫描线背景色
lineAnimationDuration: "3", //扫描线动画时间
showScanFrame: false, //显示测试扫描框 用于调试扫描区域
scanResultImage: true, //是否返回扫描图片--默认不返回(仅Android有效)
scanType: [], //设置可扫描的码制式
scanContinue: true,//是否连续扫码
sleep: 10, //连续扫描间隔
code: "",
path: '' //扫描图片(仅Android)
}
},
onShow() {
if (this.$refs.scanComponent) {
console.log('show')
this.$refs.scanComponent.remoteResume();
}
},
onHide() {
if (this.$refs.scanComponent) {
this.$refs.scanComponent.remotePause();
}
},
onUnload() {
if(this.$refs.scanComponent){
this.$refs.scanComponent.releaseAssets()
}
},
onLoad() {
//vue3不走scanResult回调可在此处监听扫码成功的Event,vue2可不监听
plus.globalEvent.addEventListener('scanResultHandle', function(e) {
console.log(e)
uni.showToast({
title: e.detail.result,
icon:"none"
})
})
},
methods: {
// 识别完成回调 ------ res.detail.data是组装好的数据
scanResult(res) {
this.code = res.detail.result
this.path = res.detail.path
//1.0.9新增 结构化数据:从使用特定内容格式编码的二维码、条码中提取的有效信息。Scan Kit当前已支持结构化提取Wi-Fi、EMAIL、PHONE、ISBN、PRODUCT、SMS、TEXT、URL、CONTACT INFO、GEO、CALENDAR EVENT、DRIVER LICENSE这12种码中的有效信息并返回给您,以便于您快速构建对应的服务(iOS与Android返回的字段不同请参照华为扫描官方SDK文档,或通过JSON.stringify(res.detail.data)打印查看)
// console.log(this.path);
console.log(res.detail.data)
console.log(JSON.stringify(res.detail.data))
uni.showToast({
title:res.detail.result,
icon:'none'
})
// hwscan.clearCacheWithFilePath(this.path,res=>{
// uni.showToast({
// title: res.result?"删除成功":"删除失败",
// icon: 'none',
// duration: 1500
// })
// })
// uni.$emit("commonScanResult", {
// result: res.detail.result,
// path :this.path
// });
},
pauseScan() { //暂停扫描
this.$refs.scanComponent.pauseScan();
},
resumeScan() { //恢复扫描
this.$refs.scanComponent.resumeScan();
},
photoAlbum() { //跳相册
this.$refs.scanComponent.pictureScan();
},
lightSwitch() { //开关手电筒
this.$refs.scanComponent.switchLight();
},
releaseAssets() {
this.$refs.scanComponent.releaseAssets();
}
},
}
</script>
<style>
.content {
width: 750rpx;
flex: 1;
background-color: #ffffff;
align-items: center;
justify-content: center;
position: relative;
}
.bg {
width: 750rpx;
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 这里要和传入插件的大小相同单位px */
.scan_frame {
width: 300px;
height: 300px;
position: relative;
}
.scan_frame_bottom_btn {
position: absolute;
display: flex;
flex-direction: row;
width: 750rpx;
left: 0;
margin-top: 300px;
padding-left: 30px;
padding-right: 30px;
justify-content: space-between;
}
.text_title {
position: absolute;
color: #ff00ff;
margin-bottom: 350px;
font-size: 32rpx;
}
.btn {
width: 50rpx;
height: 50rpx;
margin-top: 120rpx;
}
.angle {
color: #ff00ff;
position: absolute;
width: 32rpx;
height: 32rpx;
}
.left_top {
left: 0;
top: 0;
}
.right_top {
right: 0;
top: 0;
}
.left_bottom {
left: 0;
bottom: 0;
}
.right_bottom {
right: 0;
bottom: 0;
}
</style>