欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android WebView与H5联调技巧

程序员文章站 2022-05-27 14:16:06
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/78 背景: 突然想写一篇关于Android WebView与H5联调技巧的文章,在这块内容也算是小有心得。平时在工作中,发现不少同事,对这块很迷糊,在联调过程 ......

版权声明:本文为xing_star原创文章,转载请注明出处!

本文同步自

背景:

突然想写一篇关于android webview与h5联调技巧的文章,在这块内容也算是小有心得。平时在工作中,发现不少同事,对这块很迷糊,在联调过程中出现了问题,不知道究竟是哪一端的问题,究竟是h5造成的,还是android造成的,分析不出原因,真是不好说啥,本着对自我有着较高的要求,那么就android,h5一起搞定吧。

在此之前可以看一篇文章,配置好调试所需要的基础环境。这篇文章写的不错,可以参考 利用 chrome 开发者工具远程调试 android 中的原生 webview

心得技巧:

开启webview的debug模式后,android设备连接usb,打开chrome浏览器,输入chrome:inspect,然后手机app打开对应的h5页面,在chrome里面就能看到这个网页了,下面就是调试的步骤。

在chrome:inspect页面,点击打开手机h5对应的url,会看到chrome里面开始加载相关资源,比如css文件,js文件等等。当然了我们可以点击chrome上的刷新按钮,这样会重新加载一次当前的h5页面。这个时候可以清晰的看到加载资源的过程。相关的css,js,html的页面都可以在chrome浏览器上看到,这些页面的源代码也能看到。这才是我们该关注的。

从这一步开始,我们可以从程序执行的先后顺序调试,一开始加载h5页面肯定是在android这边的代码,断点可以打在android里面相关调用的地方,比如webview.loadurl()这块代码附近,还有注入js的逻辑等等,android跟h5交互都是有桥接的,这款也可以加上断点,这个需要结合自己使用的是哪种jsbridge或者说是interface这样的方式等等。

常见出现问题的是注入js有问题,相关的js方法并没有注入成功。这一步可以在断点打在h5页面上查看,这里需要仔细梳理下h5的初始化逻辑,看看h5是如何对这些原生方法进行包装的,初始化的判断逻辑是啥,有时候真的需要仔细,header,useragent等等都可能导致问题,还有就是查看类似window.jsbridge对象的内部方法声明,有时候方法不生效,可能是参数不对,这都有可能。

通常我们看到某个js文件某行代码报红,就意味着这行出现问题,问题可能就在这,产生的原因,需要看上面相关的代码。出现js错误后,下面的js代码就不会在执行了。当然了我们也可以手动修改js文件的代码,这是可以的,扯远一点,这种就可以做最简单的作弊,黑产等等。

碰到这种联调问题,需要仔细分析上下文条件,从程序执行顺序的第一步开始打断点,分析,同时观察对应变量的值,有时候需要h5断点,android代码都打开着,会来回切换,总之顺着程序执行顺序流的角度来分析,最终肯定可以定位出问题所在。实力打脸甩锅的同事。。

当然了有时候也需要h5同事的配合,比如有js代码压缩,用的是vue.js之类的,可以让对应的同事配合下,关掉代码压缩,方便联调。

参考资料: