APP的webview碰到的一些坑

前言

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

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

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

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

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

开发过程中碰到的坑

VasSonic

但是实际的测试效果并不是特别明显，所以我们直接放弃了这个方法。

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

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

在安卓中，调用的方式为：

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

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

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

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

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

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

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

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

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

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

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

懒加载失效

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

总结

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

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