4***@qq.com
4***@qq.com
  • 发布:2020-05-12 15:07
  • 更新:2024-02-27 15:25
  • 阅读:21398

pda的广播扫码uni-app

分类:uni-app

一直困惑在uni-app中实现pda的广播扫码功能,今天终于找到了一个解决方案。
方案就是做一个全局监听,只引入一次,来防止很多页面都引入了扫码的组件,造成多次扫描,数据出现多次
知识点:全局监听官网的全局监听地址
uni.$emit:触发全局的自定事件。附加参数都会传给监听器回调。
uni.$on:监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数
uni.$off:移除全局自定义事件监听器。

一定要记得移除全局事件,不燃就会出现多次扫描

一:在你的pda中要是设置广播输出:模式是键盘方式输出
方法:设置---扫描---Default:把里面的键盘方式输出取消掉,就会看到下面的广播动作广播数据标签(这两个很重要,在后面会用到)
上图:

二:在你的uni-app项目里 新建一个公共组件 就叫 scan-code 吧,放到公共组件components中,目录:components/scan-code/scan-code.vue
这里就用到了广播动作广播数据标签
filter.addAction("android.intent.ACTION_DECODE_DATA")
intent.getStringExtra("barcode_string")
代码里的filter.addAction里换成你的广播动作,intent.getStringExtra(里换成你的广播标签
代码如下:
```
<template>
<view class="content"></view>
</template>

<script> var main,receiver,filter; var _codeQueryTag = false; export default { data() { return { scanCode: '' } }, created: function (option) { this.initScan() this.startScan(); }, onHide:function(){ this.stopScan(); }, destroyed:function(){ /*页面退出时一定要卸载监听,否则下次进来时会重复,造成扫一次出2个以上的结果*/ this.stopScan(); }, methods: { initScan() { let _this = this; main = plus.android.runtimeMainActivity();//获取activity var IntentFilter = plus.android.importClass('android.content.IntentFilter'); filter = new IntentFilter(); filter.addAction("android.intent.ACTION_DECODE_DATA"); // 换你的广播动作 receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver',{ onReceive : function(context, intent) { plus.android.importClass(intent); let code = intent.getStringExtra("barcode_string");// 换你的广播标签 _this.queryCode(code); }}); }, startScan(){ main.registerReceiver(receiver,filter); }, stopScan(){ main.unregisterReceiver(receiver); }, queryCode: function(code){ //防重复 if(_codeQueryTag)return false; _codeQueryTag = true; setTimeout(function(){ _codeQueryTag = false; },150); var id = code console.log('id:', id) uni.$emit('scancodedate',{code:id}) } } } </script> <style> page { background-color: #efeff4; } .content { text-align: center; } </style>
  
三:页面引用,只引用一次就好,我是index.vue 引用的,我的app的其他功能都是在这个页面链接走的  
直接上代码:  
**切记:首页往各个子页面跳转的时候 移除监听事件uni.$off('scancodedate'),要不首页的监听会一直存在,就会出现首页这个扫码**  
uni.navigateTo({ 之前、之前、之前 uni.$off('scancodedate')
<template> <view> <view>你的页面内容</view> <scan-code></scan-code> </view> </template> <script> import scanCode from "@/components/scan-code/scan-code.vue"; export default { components: { scanCode }, data() { return {} } onShow: function() { var _this = this uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器 uni.$on('scancodedate',function(data){ console.log('你想要的code:', data.code) }) } } ``` 其他的页面引用方法:**不需要再次引入scanCode** 因为其他的页面都是从首页跳转过来的,所以其他的页面需要 onUnload() { // 移除监听事件 uni.$off('scancodedate') } 代码如下: ``` onLoad() { var _this = this uni.$on('scancodedate',function(data){ // _this 这里面的方法用这个 _this.code(data.code) console.log('你想要的code:', data.code) }) }, onUnload() { // 移除监听事件 uni.$off('scancodedate') } ``` 如果这个页面还有详细页面需要跳转,**切记** uni.navigateTo({ 之前、之前、之前 uni.$off('scancodedate') 到此所有的代码就完事了。 重点就是全局监听,真机测试的时候在控制台可以打印出你的code和routes,看下是否每次的扫描只是执行的本页面(路由)下的程序。
24 关注 分享
9***@qq.com 小时光 9***@qq.com MiCloud h***@mayirobotics.com 5***@qq.com 4***@qq.com 8***@qq.com webyann j***@sina.com swankytiger x***@vip.qq.com t***@163.com pure111 2***@qq.com l***@gmail.com 5***@qq.com 7***@qq.com 1***@qq.com 9***@qq.com 1***@163.com 喜欢技术的前端 x***@163.com 5***@qq.com

要回复文章请先登录注册

II优选

II优选

回复 EliaukI1 :
qq 770104707
2024-02-27 15:25
II优选

II优选

回复 EliaukI1 :
找我定制原生插件就可以了
2024-02-27 14:11
EliaukI1

EliaukI1

那怎么实现pda自带的打印功能呢 用的是A980 PDA 背后可以放热敏打印纸
2024-02-27 14:10
II优选

II优选

回复 EliaukI1 :
..............
2024-02-27 13:12
EliaukI1

EliaukI1

pda广播扫码占坑
2024-02-27 11:42
5***@qq.com

5***@qq.com

pda广播扫码 占坑
2023-09-22 13:21
2***@qq.com

2***@qq.com

回复 nn3 :
咋弄的最后 老哥
2023-09-16 09:50
1***@163.com

1***@163.com

厉害了
2023-08-04 13:47
小竹bamboo

小竹bamboo

想问一下如果是广播扫码,那一个页面需要扫两次码,那这个广播怎么监听第一次和第二次
2023-08-03 09:30
不会飞的黄老板

不会飞的黄老板

占个位置,以待之后好找
2023-07-28 23:32