需求场景
扫单据上的二维码，同时触发扫码器批量扫描实物二维码，用实物的二维码比对单据二维码，若条码相同、数量符合则PASS，否则NG
硬件
新大陆FR40自动感应扫码器：用于扫单据条码。（这种扫码器也可用于微信支付、支付宝付的超市收银）
基恩士SR5000: 用于实物批量扫码。这中间同时试用了广州艾韦迅研发的扫码器。各有所长，在此不作说明。
显示屏：普通工业平板，系统为安卓。注意安卓要7以上版本才可以。
程序开发
与批量扫码器的通信：因扫码器有自己的IP及端口，故可以在webAPI中用socket的方式向扫码器发送扫码指令。这样避免了使用官方低版本的SDK
开发方式：前后端webAPI + vue开发；安卓程序用Flutter制作主界面，用webView嵌入前端网页，然后发布为安卓程序。之所以用webview不直接用Flutter开发整个扫码应用，大家知道是为了方便发布更新。当然如果用Flutter直接开发完整应用，在用户体验上可能更佳。
遇到的问题点
输入框焦点的问题：扫单据条码时，要定位输入焦点。而且问题还不止于此，发布到安卓后如果输入框获得焦点会弹出软键盘遮住半个屏幕，导致下面扫码的结果根本看不到，是个大问题。没有输入焦点不行，有了输入焦点又有问题，真是左右为难。用了各种办法也不能完美的解决问题。“没有输入焦点就真的不能扫码吗？”，通过这逆向思维最后还真寻到了解决办法，就是使用Flutter的一个flutter_barcode_listener插件去包裹webview.
WebView的选择问题：Flutter_Webview_Plugin比较好用，但它不在Flutter组件树中（象Scaffold一样有自己的AppBar、body)，导致无法用flutter_barcode_listener包裹它, 如果不能包裹则实现无焦点扫码会存在问题。最后果断使用Flutter官方的WebView_Flutter插件，这个插件在Flutter组件树中，可以flutter_barcode_listener包裹，问题解决了。
WebView的其他问题：
flutter错误：net::ERR_CLEARTEXT_NOT_PERMITTED解决办法 (可以解决http不能访问的问题）
webview加载网页时提示NET::ERR_CACHE_MISS的错误 (安装到平板后出现这个提示不能显示网页的解决方法)
无焦点输入是在Flutter中实现的，页面是在vue项目中实现的，要将Flutter中捕获的条码信息发送到web页面，需要使用到webview_flutter中调用js的功能，以下贴出代码截图，详细的可以查看官方文档。
作者：易国轩
日期：2022-01-25
网友评论