APP Tech · 2018年07月11号 0

关于在android webview上运行html5的开发经验

一、问题描述:

在项目开发中(软硬件结合项目),为了实现xp、android、linux三个平台的统一,选择html5作为终端开发语言。html5作为一种网页语言,其运行需要借助浏览器,那么不可避免的问题就是:
1、选择什么浏览器来承载跨平台的界面显示?
2、前端设计选择何种框架?(本人负责前端开发)
3、前后端的通信选择何种方式?
4、如何解决首次进入界面时的闪烁问题?

二、浏览器的选择:

起初总觉得可以找到一种免费开源的浏览器,但最后发现,能够支持xp android linux三大平台且具备无边框全屏效果的浏览器机会没有(至少我没找到,也许找源码编译chrome可以实现)。不得已改变了策略,
利用平台自身的特点为html5添加一个壳!比如:android 有webview,xp和linux都可以采用QT的webview,而且两者都是基于webkit的,这点很满意,这意味着两者的差别很小,一份代码三个平台都可以运行。

三、前端设计框架

在这之前主要从事androidk开发很少接触web开发,以至于连强大的angularjs和jquery都不知晓。通过向朋友请教,推荐使用angularjs作为单界面应用程序的开发,用jquery解决了国际化问题。当然开发过程中遇到N多的问题,
采取各种手段、途径总算解决了大部分,
当然看书是少不了的,这两本书《AngularJS权威教程(中文版)》、《JavaScript设计模式与开发实践》带我入了门。

四、通信

搞过html5的同事直接告诉我,通信直接调用 webSocket接口,琢磨一天后发现真的很好用。

五、闪烁的问题

这个问题应该是开发过程是遇到的最无解的问题。现象是:任何界面第一次访问时需要从服务端访问资源,这个过程会导致资源的加载有快慢之分,主要是图片和自定义的控件,给用户的感觉很不舒服,如同平时我们
网速慢的时候打开网页一样。解决的思路是:在应用开启时可将所有的图片预加载至angularjs缓存或者浏览器缓存。搜索一个星期后找到的方法大概可分为以下两种(图片的预加载):
1、通过new Img()并为其设置 src属性实现图片的预加载,实际是加载到浏览器缓存
2、使用$http.get();将图片预加载至angularjs的默认缓存

这两种方法都尝试过,在win10上用chrome作为浏览器,利用mongoose开启web服务,验证发现两种方法都能很好的起到图片预加载的效果。于是本人很高兴的将其放到android上测试,结果一点作用没有,怀疑是浏览器的问题,
于是在android上装chrome在跑html5,缓存是有效的。结论很明显:android webview没有去缓存图片。那怎么办呢?查webview的相关知识发现,android webview有一堆的设置,按照网上提供的设置,一个个试,
结果不管我怎么设置,缓存就是不起作用,此刻已经接近奔溃了!
在查找问题的时候一直有一个现象让我很迷惑:angularjs会将访问过的资源自动缓存在自带的缓存中,也就是访问过的界面再次访问时瞬间全部显示。受到这个启发:何不在启动时将全部图片都访问一次呢?

接着:我在程序初始化界面加了如下代码
<ul  style=”width: 50%; height: 100%;float: left;”>
<li ng-repeat=”item in array” style=”width: 10%; height: 10%;float: left;”>
<button  ng-class=”item.value”  style=”width:0%;height:0%;float: left;”></button>
</li>
</ul>
array是所有css样式的数组,item.value是对应的class名称,同时将button的width:0%;height:0%,如此一来即使加载了图片也不会显示出来,结果总算缓存了,当我第一次访问每个界面时,此时的图片已经准备好了,闪烁效果得到大大的改善。
虽然这个方法很笨但是,解决了实际问题。