记录前端开发把vue系统放到扫码枪中去使用

记录前端开发把vue系统放到扫码枪中去使用

• 前提

• 项目由vue3、vant开发而成，是个h5项目

• h5会打包成app，在扫码枪中通过浏览器搜索该app，即可下载安装app

• 参考这篇文章的前提是，扫码枪设置了【广播】模式

• 以下是我在网络上搜索到的一些关于扫码枪接入app的代码

1. 在我们要实现扫码功能的页面，写入下列代码，【对我而言，就是哪个页面有输入框需要录入扫码数据，我就把这段代码写到了哪个页面】

通过下列代码，我们就在系统中与扫码枪做了关联了，意思就是，当我们使用扫码枪扫码的时候，扫码枪能够识别这个“扫码”的操作了。

请留意代码里的第二行的打印信息，它提示我们，所有与扫码枪相关的代码，都要在documen.addEventListener方法之后去执行；

document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。
				plus.key.addEventListener("keydown",  function (e)  {                    
					console.log("监听keyCode"  +  e.keyCode);                
				},  false);
				plusReady(); //点我我司设备扫描按钮之后,会触发这个Function
			});

			function plusReady() {
				var main = plus.android.runtimeMainActivity(); //获取activity
				var context = plus.android.importClass('android.content.Context'); //上下文
				var receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
					onReceive: doReceive
				});
				var IntentFilter = plus.android.importClass('android.content.IntentFilter');
				var Intent = plus.android.importClass('android.content.Intent');
				var filter = new IntentFilter();
				filter.addAction("com.seuci.scan"); //监听扫描,扫描字符串要和扫描工具中的字符串一致
				main.registerReceiver(receiver, filter); //注册监听
			}

			//将获取的条码传到文本框,
			function doReceive(context, intent) {
				plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
				var Number = intent.getStringExtra("scannerdata"); //
				document.getElementById("txtCode").value = Number;
				console.log("接收的条码数据：" + Number)
				main.unregisterReceiver(receiver); //取消监听
			}

			function setBROADCAST() {
				var main = plus.android.runtimeMainActivity(); //获取acitivity
				var Intent = plus.android.importClass("android.content.Intent");
				var intent = new Intent("com.android.scanner.service_settings");
				intent.putExtra("barcode_send_mode", "BROADCAST");
				main.sendBroadcast(intent);
			}
			
			function setBROADCASTACTION() {
				var main = plus.android.runtimeMainActivity(); //获取acitivity
				var Intent = plus.android.importClass("android.content.Intent");
				var intent = new Intent("com.android.scanner.service_settings");
				intent.putExtra("action_barcode_broadcast", "com.seuci.scan");
				main.sendBroadcast(intent);
			}
			
			function ScanCode() {
				var main = plus.android.runtimeMainActivity(); //获取acitivity
				var Intent = plus.android.importClass("android.content.Intent");
				var intent = new Intent("com.scan.onStartScan");
				main.sendBroadcast(intent);
			}

请留意以下提示，红框中的数据全都要和扫码枪上所展示的配置一模一样才行：

2. 在vue的页面上（或者html页面）上写一个输入框，输入框要写 【id属性】

3.在onMounted阶段，调用第一步所写的plusReady()方法

4.把扫描到的数据，录入输入框里

至此，使用扫码枪的功能就能完成