APP的webview碰到的一些坑
前言
公司APP的文章详情,之前是将所有的HTML内容全部从接口中返回,然后APP的webview将其载入到内中,然后渲染并展示出来。
但是这个速度太慢了。所以我们对其进行优化。修改后的加载流程如下:
- 将HTML模板和CSS,JS资源全部缓存到本地。
- Webview首先加载模板,然后JS调用原生接口请求动态内容。
- 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可以,安卓不行的情况。
对于这种情况,需要学会具体分析。学会使用远程调试。这样才能更好的排查其中的问题。