(此段可以略过)
随着H5的发展,在安卓开发中逐渐影响了我们原来的一些开发模式。
例如现在在原生中有很多活动页和一些需要经常变化的页都是用嵌在webview里的模式。
而这个时候更必不可少的会遇到的问题就是,安卓与js相互调用的问题。
今天就给大家讲一下,通过调试webview来解决js相互调用出现的问题。
(—-正题开始—)
本来有一个项目A,现在要在项目B里面把A的一部分功能分离出来作为一个单独的APP。
于是乎就开启了我们最喜欢的,复制粘贴模式!
可是正当我沉浸在复制粘贴模式的时候,突然发了一个问题。
在webview基类里有一个调用相册的方法怎么弄都不会被js调起,一行一行的对照了A项目的代码(正常,且同一个界面同一个类同一个url),都是一样的,可是在B项目里就不行。
然后我就想了下是不是传递出去的链接不同,后台对链接加了判断。
于是我把A项目的链接直接copy到B项目里,结果还是不行,但是同样的webview基类和同样的url,在A项目就可以,然后我就想啊想,想啊想就是想不到原因- -WT安福?
实在是没有解决的思路,想的我都开始怀疑人生了,我从哪里来,要往哪里去······
算了,去找找写js的人吧- -可是心里又在想,怎么说呢,跟人家说同一个url,俩个项目一个可以一个不可以,给看看?- -但是自己这边实在没思路还是硬着头皮去了。
结果:不出所料被嘲讽了一波后说:这块是之前别人写的,我这忙你先自己看看………
不知道大家有没有遇到过这种情况- -当时就想的,哎要是自己也会前端(H5云云~)就好了可以自己调试了。
!!!等等,什么?调试?对了,能不能自己调试webviwe 啊(以前都是js相互调用就ok了,还真没遇到过调试webviwe这种需求- -)
随手打开了我的大Google,随便一搜,不负众望,果然大Google已经为我们想到了会有这个需求。
dong!dong!dong!dong!接下来我们的主角要登场了:
接下来我们要讲讲怎么使用它了,Remote Debugging 大哥骑着Chrome看起来很吊的样子,可是使用起来却很简单。
使用步骤:
O:调试WebView需要满足安卓系统版本为Android 4.4+已上。并且需要再你的APP内配置相应的代码,在WebView类中调用,如下:
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
一:USB调试打开
二:在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备(Chromemenu > More tools > Inspect Devices),或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect
三:找到需要调试的目标页面(在手机打开对应的webview页面后即可看到如下:)打开后DevTools后,确保打钩选中Discover USB devices
四:点击inspect即可打开DevTools如下图(示例):
如图:
1.先找到需要调试的功能区域。
2.找到对应的前端代码模块,此处是图2位置的div。
3.点击图2后会出现,图2处的div对应的最右侧相关信息,其中有个click点击信息。
4。打开lick后面,再锁定div模块,然后会出现div模块对应的js代码,此时,用鼠标点击即可调到该处。
然后进入到下图此模块的核心js代码:
此时我们可以看到最上面的是init初始化方法,init方法下面才是拍照方法。
通过点击左侧数字加入断点调试我们会发现,程序执行到init方法里面的initShare方法报错了。
这是因为这个方法是A项目中的分享组件里面的方法。可是B是精简版项目没有这个方法。
所以走到init方法里面的initShare方法的时候抛出了错误程序没有往下执行,导致我们点击拍照按钮无法调起APP里面的拍照方法。
这真是前端写的一个大坑,各个方法直接不是并列的而是耦合在一起,没有就报错…非空等判断都没有加入。
无力吐槽这代码逻辑…(Remote Debugging的使用比较强大就不在这里太具体说了,写不下…具体大家可以搜索一下。)
然后顺利的给了一个空的share()后它,init()方法不报错了,然后下面的拍照方法也能在拍照点击时正常响应了,一切调用都正常了。。。不说了,别拦我!那个前端你过来一下!!!
不得不感谢Remote Debugging哥,有了他,妈妈再也不怕我写的webview有问题了,只要有问题就让他调戏(试)一下webvie妹子就能知道到底是我惹webview妹子生气了,具体哪里惹的,或者是那个小三(前端- -)惹的。
注意事项:
1.此工具第一次使用需要翻墙(不然会导致打开工具白屏)
2.主机尽量和移动设备处在同一网段的局域网内
·在这里友情感谢妈蛋表情网和有心课堂的大力支持。