专栏首页魔王卷子的专栏APP的webview碰到的一些坑

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可以,安卓不行的情况。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS解析字符串异常的处理

    有一个不可见的字符,在编辑器中识别不出来,执行之后也看不到,但是查看上一条执行的命令的时候就可以看到一个红点。

    魔王卷子
  • 查看本机IP

    魔王卷子
  • ubuntu安装lrzsz

    魔王卷子
  • 使用 Clockwork 来调试 Laravel App

    Chrome 插件 Clockwork 服务器端的 Composer Package Github 项目

    gaobinzhan
  • 快速对接payjs的微信个人支付接口(收银台模式)

    近期在了解个人支付接口,希望能解决我在微信上支付的问题。找了很多平台对比再三,感觉payjs比较专业,其它多是模仿payjs的东西。同时支持支付宝和微信,由于本...

    那里都有你
  • 机器学习(13)——adaboostAdaboost

    前言:下面介绍另外一种集成算法思想—boosting,提升学习(Boosting)是一种机器学习技术,可以用于回归和分类的问题,它 每一步产生弱预测模型(如决策...

    DC童生
  • PHP 获取 特定时间范围 类

    目录 前序   用途   功能及事项   使用方法   代码及注释 前序:   总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,...

    林冠宏-指尖下的幽灵
  • 单源最短路径之Bellman-Ford算法

    贝尔曼-福特算法(Bellman-Ford)是由理查德·贝尔曼(Richard Bellman) 和 莱斯特·福特 创立的,求解单源最短路径问题的一种算法。有时...

    每天学Java
  • lodash源码分析之List缓存

    昨日我沿着河岸/漫步到/芦苇弯腰喝水的地方 顺便请烟囱/在天空为我写一封长长的信 潦是潦草了些/而我的心意/则明亮亦如你窗前的烛光/稍有暧昧之处/势所难免...

    对角另一面
  • lodash源码分析之List缓存

    本文为读 lodash 源码的第七篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

    对角另一面

扫码关注云+社区

领取腾讯云代金券