APP的webview碰到的一些坑

前言

公司APP的文章详情,之前是将所有的HTML内容全部从接口中返回,然后APP的webview将其载入到内中,然后渲染并展示出来。

但是这个速度太慢了。所以我们对其进行优化。修改后的加载流程如下:

  1. 将HTML模板和CSS,JS资源全部缓存到本地。
  2. Webview首先加载模板,然后JS调用原生接口请求动态内容。
  3. APP获取到资讯后调用JS接口,然后进行页面渲染。

这是修改后的执行流程。目前加载的过程提升了好几倍不止。

如果有机会会发出对比视频。

开发过程中碰到的坑

VasSonic

领导给推荐了这个:VasSonic 。但是实际的测试效果并不是特别明显,所以我们直接放弃了这个方法。

对于字符串中存在单引号,安卓不能正确传值

原因在于安卓调用js方法的方式。

在安卓中,调用的方式为:

1
webview.loadUrl("javascript:returnData('"+content+"')")

比如content的值为aa'a,那么替换值之后实际调用的代码为:

1
webview.loadUrl("javascript:returnData('aa'a')");

其实仔细一看,就是需要对单引号进行转义。所以我的解决方案是在服务器端对单引号转义成HTML实体。这样传值和显示都会是正常的。

渲染的文章只显示图片不显示文字

原因是JS端获取宽度是使用的是clientWidth,对于像是我们这种设计的,有时候获取到的宽度为0,所以这个时候我们只能使用window.innerWidth获取宽度更加靠谱。

字符串中存在特殊字符,导致调用JS方法失败

其实最开始也不知道这个是什么字符。后来通过一点点排查,发现这个特殊的换行符。具体的解决方法我已经在这里进行记录:点击这里;

应用调用JS方法接收返回数据

因为安卓的原因,不知道为啥不不能接收数组,所以我将其转为json字符串。但是安卓说左右会多出两个双引号。

解决办法是安卓自己想办法将双引号给去掉了。

懒加载失效

在文章显示的时候,我增加了懒加载,使用的jquery_lazyload。但是实际在执行过程中,发现有几篇文章总是懒加载执行不成功。这个我没有找到原因,没办法,使用settimeout方法设置了延迟函数,延迟100毫秒再去执行懒加载。直接解决。

总结

其实我做这一套解决方案的时候,不仅仅是和安卓配合,还有跟IOS配合,有时候总是会出现安卓可以,IOS不行,或者反过来IOS可以,安卓不行的情况。

对于这种情况,需要学会具体分析。学会使用远程调试。这样才能更好的排查其中的问题。