更新记录
1.0.15(2024-09-02)
- 修复部分Android闪退问题
1.0.14(2024-08-05)
1、iOS扫码页面强制竖屏兼容iOS 16以上系统。
1.0.13(2024-07-29)
1、兼容Android 14; 2、iOS扫码页面强制竖屏
查看更多平台兼容性
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,可以在插件问答区(评论区下方)、官方交流群(作者头像旁)先查看历史问答再联系作者;
- 请在合法范围内使用,若使用本插件做非法开发,本方概不负责;
- 示例demo可能更新不及时各接口与参数以文档为主;
插件使用文档
引入插件
const hwscan = uni.requireNativePlugin('LY-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>
- 测试使用Base64
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.photo) {
// base64
this.resultPhoto = res.photo;
// 路径
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 | 多码扫描相关设置 |
- scanMode 扫码风格
参数 | 对应扫描格式 |
---|---|
defaultMode | 默认模式 |
customizedMode | 自定义模式 |
multiProcessorMode | 多码扫描 |
BitmapMode | bitmap相册模式 |
Base64 | Base64识别 |
- scanType支持13种码制式
说明:支持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 |
- scanTypeOptions说明
参数 | 值类型 | 说明 |
---|---|---|
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端自行设置) |
- multiOptions
参数 | 值类型 | 说明 |
---|---|---|
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沙盒路径 |
- scanSize说明
参数 | 值类型 | 说明 |
---|---|---|
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('LY-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;">
<ly-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">
</ly-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('LY-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: ["Code128","QR"], //设置可扫描的码制式
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>