code小生,一个专注 Android 领域的技术平台
公众号回复 Android 加入我的安卓技术群
作者：zhuguohui链接：https://www.jianshu.com/p/d29d7d942a53声明：本文已获
zhuguohui授权发表，转发等请联系原作者授权
序言
最近的项目中，客户需要在WebView中实现长按识别二维码的功能。但是原有的图片已经有点击查看图片功能。要不破坏原有的功能，还能添加长按事件。这是第一次遇到这种需求。最后我还是完成了这个功能。但是在完成的过程中也遇到一些坑。在此记录一下，先看一下我实现的效果。
1.原有的点击查看图片功能
2.长按识别二维码
3识别失败给出提示
实现
1.长按事件的监测
背景知识要实现对长按事件的检测主要通过HTML5 中的touchstart ,touchmove,touchend 事件。来实现。一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
具体的思路1.在touchstart 事件中通过setTimeout 方法延迟500毫秒触发长按事件，并保存返回的事件id2.在touchmove时将事件id重置为0，并取消长按事件。（防止在手机滑动图片的时候误触发事件）3.在touchend的时候判断是事件id是否为0，（在长按事件触发时和手机滑动时 事件id会置为0），如果不为0.则表示长按事件还没有发生，也不是误差。表示500毫秒内手指抬起了，触发单击事件。
具体的代码如下
var objs = document.getElementsByTagName("img");var timeOutEvent=0;var imageUrl="";for(var i=0; i<objs.length; i++) { var img=objs[i]; mobile.addImageUrl(img.src);//收集网页中图片的url //清除之前设置的，防止重复设置 img.removeEventListener('touchstart',touchstart) img.removeEventListener('touchmove',touchmove) img.removeEventListener('touchend',touchend) //注册事件 img.addEventListener('touchstart',touchstart) img.addEventListener('touchmove',touchmove) img.addEventListener('touchend',touchend)}function touchstart(e){ timeOutEvent = setTimeout("longPress()",500); imageUrl=this.src;}function touchmove(e){ clearTimeout(timeOutEvent); timeOutEvent = 0;}function touchend(e){ clearTimeout(timeOutEvent); if(timeOutEvent!=0){ //展示图片 mobile.showImage(imageUrl); } return false;}function longPress(){ timeOutEvent = 0; if(typeof mobile!="undefined"){ mobile.scanCode(imageUrl); }}二维码识别
思路如下1.向webview注入js对象mobile。再通过js在长按时，向mobile的scanCode方法传入图片的url2.拿到url以后使用Glide 下载相应的图片，获得bitmap3.通过zxing实现解码，回调ScanListener的onScanSuccess（）方法，返回结果。
问题总结1.Glide的into方法必须在主线程中启动。而JavaScript调用本地代码的线程不是主线程。在其他线程调用into方法时会出现既加载不出图片，也不会报错的现象。
2.二维码扫描使用的是android-zxingLibrary库。比较方便地址是android-zxingLibrary
3.关于调试。由于涉及到JavaScript和本地代码的联调。而最困难的是JavaScript的调试。建议大家在每次修改完JavaScript代码以后使用chrome的开发者模式，将JavaScript代码输入通过console输入进去检查有没有语法错误。
如果出现语法错误可以快速定位
当我们在Android中调试WebView中的JavaScript代码时，也可以通过chrome来远程调试。首先设置webview
webView.setWebContentsDebuggingEnabled(true);然后再chrome浏览器的地址栏中输入
chrome://inspect/#devices然后点击inspect
理论效果是这样的
但是实际上，部分手机加载不出来这个界面。我的手机就加载不出来。所以最好的方式还是使用
console.log("this is a log");在Android Studio 的LogCat中过滤chromium 就可以看到log。可以在console.log中打印变量值。如果没有输出的话。回到第一步，将代码拷贝到chrom浏览器中检查是否有语法错误。
4.WebView不执行JavaScript代码。最开始我在onPageFinished中。通过下面的代码执行js。
webview.loadUrl("javascript:"+initJS);但是效果是。js始终未执行。后来查阅资料发现这种方式执行js。有最大长度的限制。后面使用
view.evaluateJavascript("javascript:" + initJs, null);该方法是Android4.4以后添加，是异步执行。
源码下载
ScanDemohttps://github.com/zhuguohui/ScanCodeDemo
分享技术我是认真的
