更新记录
1.0.16(2024-12-21)
- 修复组件引入设置扫码间隔无效
- 修复自定义模式部分设备不回调扫码信息
1.0.15(2024-09-02)
1.0.14(2024-08-05)
1、iOS扫码页面强制竖屏兼容iOS 16以上系统。
查看更多
平台兼容性
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>
复制代码photoBase64: "data:image/png;base64,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"
复制代码
selectScanMode(mode) {
var filePath = plus.io.convertLocalFileSystemURL('_doc');
var scanOption = {
scanMode: mode,
scanType: ["QR", "EAN-13"],
scanResultImage: false,
filePath:filePath,
pictureBase64: "",
scanTypeOptions: {
scanTitle: "华为扫描",
showPhotoAlbum: true,
showLight: true,
showScanFrame: true,
showLine:false,
scanLineColor:"#FF00FF",
lineAnimationDuration:3,
sleep:3,
showScanMessage: true,
scanMessage: "将码放入取景框,即可自动扫描",
scanFrameSize: 300,
scanFrameBackgroudColor: "#1f00BCD4",
scanFrameStrokeColor: "#e1ffff",
scanContinue: false,
showToast:true,
toastTitle:"",
scanFrameRoundedCorner: 6
},
multiOptions: {
oneCodeReturn: true,
multicodeReturn:true,
scanCancelBtnTitle: "取消",
scanResultTips: "已扫描到码请选择",
identificationNumber:3,
identificationNumberReturn:true,
identificationMoreMax:true
}
}
if (mode == "defaultMode") {
} else if (mode == "customizedMode") {
} else if (mode == "multiProcessorMode") {
} else if (mode == "BitmapMode") {
} else if (mode == "Base64") {
scanOption.pictureBase64 = this.photoBase64;
}
hwscan.hwScan({
scanOptions: scanOption
}, (res) => {
this.result = res.result
console.log("特殊码详细信息:"+JSON.stringify(res.codeTypeData));
if (res.photo) {
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 |
多码扫描相关设置 |
参数 |
对应扫描格式 |
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,非连续扫码模式,此时相同的码值只会返回一次
复制代码
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"
})
})
复制代码
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();
复制代码
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>
<view class="bg">
<text class="text_title">将码移入框内即可扫描</text>
<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'),
scanSize: {
width: 300,
height: 300
},
showScanLine: true,
scanLineColor: "#FF00FF",
lineAnimationDuration: "3",
showScanFrame: false,
scanResultImage: true,
scanType: ["Code128","QR"],
scanContinue: true,
sleep: 10,
code: "",
path: ''
}
},
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() {
plus.globalEvent.addEventListener('scanResultHandle', function(e) {
console.log(e)
uni.showToast({
title: e.detail.result,
icon:"none"
})
})
},
methods: {
scanResult(res) {
this.code = res.detail.result
this.path = res.detail.path
console.log(res.detail.data)
console.log(JSON.stringify(res.detail.data))
uni.showToast({
title:res.detail.result,
icon:'none'
})
},
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;
}
.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>