1.扫码枪的工作流程
扫描枪作为光学、机械、电子、软件应用等技术紧密结合的高科技产品，是继键盘和鼠标之后的第三代主要的电脑输入设备。扫描枪自80年代诞生之后，得到了迅猛的发展和广泛的应用，从最直接的图片、照片、胶片到各类图纸图形以及文稿资料都可以用扫描枪输入到计算机中，进而实现对这些图像信息的处理、管理、使用、存储或输出。(摘自百度百科)
上面提到扫描枪是一个输入设备，我们可以把它当做是键盘或者鼠标。当扫描枪扫完一个二维码、条形码后，他讲信息输入至电脑。此时如果我们打开一个记事本，并且光标处于记事本中，二维码或者条形码的内容就会显示在记事本中。需要注意的是，这一串字符串并不是类似于复制粘贴的方式写进去的，而是类似于在键盘上依次敲击这些字符。
说完扫码枪的工作原理，那么我们就以我最近的一个项目来讲述一下我在本次工作是怎么实现的。
2.业务逻辑及出现问题
最近在做一个试验管理项目，用扫码枪扫描包装袋上的二维码，自动打开相对应的流程卡，进行试验数据的填写和完善。之前其他项目也用到过扫码枪，那时扫描一串固定长度的字符串(流程卡ID)，所以处理起来容易些。这次，我们主要面临两个问题，第一，为了增强和其他项目的兼容性，我们摒弃了之前固定长度的字符串，而是采用目前主流并且长度不固定的Json字符串，这里就涉及到一个问题，输入框的监听事件何时出发功能；第二，由于扫码枪目前还在其他人手中，如果我们扫成二维码再让他人扫描，基本工作流程如下:
针对上述复杂的工作流程，如何才能提高开发效率呢？当然，最坏的打算是本地开发人员可以在购买一个扫描枪。有没有其他的方式?这就需要我们更深了解扫码枪的工作流程。
3.目前已有的代码逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>扫码枪测试</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="jquery/jquery.min.js"></script>
<style rel="stylesheet">
.title {
display: flex;
justify-content: center;
align-items: center;
}
.linkCode{
margin: 0;
padding: 10px;
}
</style>
<script>
function scanView() {
//使用layui打开弹出框
layui.use('layer', function () {
//弹出框
layer.open({
title: '扫一扫'
, content: $('#scanViewDiv').html()
//设置按钮不显示
, btn: [],
area: ['270px', '270px']
});
//获取输入框的焦点
setTimeout(function () {
$('.layui-layer-content #inputStr').focus();
}, 0);
//输入框监听事件触发器
$('.layui-layer-content #inputStr').bind('input propertychange', function (e) {
var sysStrValue = $(this).val();
if(sysStrValue.length === 16){
//dosomething
}
});
});
}
</script>
</head>
<body >
<!-- 你的HTML代码 -->
<div style="padding: 20px;">
<a href="javascript:scanView('Result');">
<img src="images/scan.png" style="width:80px;height: 80px;display: block">
<div">二维码扫描</div">
</a>
</div>
<!-- 扫描二维码弹框内容 -->
<div id="scanViewDiv" style="display: none">
<div class="title">
<img src="images/scan0.png" style="width:180px;height:180px;">
<input id="inputStr" type="text" style="position: fixed;top:1000px;">
</div>
</div>
</body>
</html>效果图如下:
4.问题解决
4.1 如何判断扫码枪内容结束
其实问题也不能，因为我们约定的是二维码的内容是Json字符串，如果这一串内容属于Json字符串的格式，我们就认为内如输入完毕，否则没有属于完毕。我们知道，对于一个json字符，{}表示一个对象，[]表示一个数组，我们可以通过查找括号是否闭合来实现，我们可以利用数据结构的栈的特性搞定。当然，这样处理还是有些复杂，js库提供了一个JSON的函数，也就是将字符串转为JSON对象，如果能转成功说明输入完毕，否则会报错，此时，我们catch错误并且不做任何处理即可实现此功能。如下代码是我实现的代码片段(原理异常还有这个功能)，是不是很简单!!!
$('.layui-layer-content #inputStr').bind('input propertychange', function (e) {
var sysStrValue = $(this).val();
var sysStrJson;
try {
sysStrJson = JSON.parse(sysStrValue);
} catch (err) {
return;
}
alert(sysStrJson.url);
});4.2 如何在本地测试扫码枪
既然扫码枪扫描内容后会类似键盘输入的方式将字符输入到输入框，那么我们是不是在出现二维码界面就可以直接敲键盘？哈哈，答案是肯定的。这里我们去尝试一下。
我们依次在键盘输入字符串{"url":"http://mp.csdn.cn"}，当输入最后一个【}】会出现什么效果呢?
当然我们也可以把隐藏的输入框显示出来。不要在意这些很丑的细节，我们调试结束后会继续隐藏掉。这样，我们在属于字符的时候就心中有数了，姑且这样吧。
<div id="scanViewDiv" style="display: none">
<div class="title">
<img src="images/scan0.png" style="width:180px;height:180px;">
<input id="inputStr" type="text">
</div>
</div>
5.总结
在本次案例中，我们利用的异常的特性解决了有些负责的json字符串判断，是不是对异常不那么反感了，用好了可以让我们省不少事。
最后挂上我最终的代码。PS:不要嘲笑一个后端程序员写的前端代码，我尽力了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>扫码枪测试</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="jquery/jquery.min.js"></script>
<style rel="stylesheet">
.title {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script>
function scanView() {
//一般直接写在一个js文件中
layui.use('layer', function () {
layer.open({
title: '扫一扫'
, content: $('#scanViewDiv').html()
, btn: [],
area: ['270px', '270px']
});
setTimeout(function () {
$('.layui-layer-content #inputStr').focus();
}, 0);
$('.layui-layer-content #inputStr').bind('input propertychange', function (e) {
var sysStrValue = $(this).val();
var sysStrJson;
try {
sysStrJson = JSON.parse(sysStrValue);
} catch (err) {
return;
}
//dosomething
alert(sysStrJson.url);
});
});
}
</script>
</head>
<body>
<!-- 你的HTML代码 -->
<a class="fastentrytaga" href="javascript:scanView('Result');">
<img src="images/scan.png" style="width:80px;height: 80px;">
<div class="showpage fastentrydiv">二维码扫描</div>
</a>
<div id="scanViewDiv" style="display: none">
<div class="title">
<img src="images/scan0.png" style="width:180px;height:180px;">
<!--<input id="inputStr" type="text" style="position: fixed;top:1000px;">-->
<input id="inputStr" type="text" style="position: fixed;top:1000px;">
</div>
</div>
</body>
</html>