Hybrid app开发历程分享

关于这个话题,本文并不准备详述移动开发相关的一些通用技术,例如:viewport、rem、flexbox、媒体查询等。这里主要讲述我们的hybrid产品策略、开发流程与规范、性能优化以及我们踩过的坑。而往往就是这些，网上相关的资料相对比较匮乏的，又缺少类似经验文章，所以希望通过此篇文章，跟大家分享一些魅族团队关于hybrid产品开发的经验。

产品背景

1. 我们希望这一类产品具备比较强大的运营能力；
2. 接口数据来自于cp数据整合，可能会有一定的差异性，甚至需要一定的容错能力；
3. 要求能够实现快速更新和迭代。

Android与H5集成方案

在以上背景下面，我们最终选择了Hybrid App这个方案。那么，接踵而来的问题就是，客户端该如何访问网页前端资源？能不能就采用以前浏览器访问服务器网页的方式呢？答案不是绝对的，当然也可以采用上述的方式。根据不同的业务需求，方式总是会有不一样的。我们采用最多的是以下两个方案：

静态资源本地化

该方案，会先在app里面内嵌一份静态资源，然后在用户启动app或者访问html页面并且符合一定条件的情况下，会发送请求去后台，询问资源的情况。如果发现有更新，那么就把最新的资源下载到本地，然后接下来用户访问的都是本地的静态资源了。如果更新失败，那么他访问的就是内嵌的或者已经下载好的静态资源。

HTML 5 应用程序缓存

这个方案，其实就是采用HTML5的应用程序缓存（HTML5 Cache Manifest ）。在这里就不详述了，网上关于这个的资料很多。值得注意的点，就是manifest的配置文件，需要配置正确的MIME-type，即 "text/cache-manifest" 。

一般是在开发一些活动或者专题页面（上线时间短，ui变化多端）的时候，采用第二个方案。

而大多数的app页面都是相对稳定，或者说是迭代开发，定期更新的，具备规律性，这种情况下，我们采用的是第一个方案。采用这个方案的时候，我们需要严格控制资源文件的大小，除了必要的压缩之外，还可以把长期固定的资源提取出来，提前内置到app里面。那么，用户每次更新资源时，只需要去服务器获取变化的部分，大大减小了流量使用。

以上两个方案，相对于每次都访问服务器静态资源来说，具有明显的优点：

1. 离线访问
2. 资源加载快
3. 服务器负载低

页面加载

首先，客户端加载某页面，加载完成后（pagefinish）,客户端会调用前端提供的初始化方法（initParams）。通过该方法实现参数的传递和页面的初始化。

资源构建

我们目前使用fis3进行资源的压缩、合并、添加 md5 戳等构建功能，对于使用了es6的项目，还需要用到Babel。在此基础上，我们还开发了一些内部使用的基于fis3的插件。最终的目的，就是为了实现一条命令行，完成全部构建工作。

开发环境搭建

搭建本地web服务，使用的是nodejs+express。

开发流程

从上图我们可以看出，视觉设计、前端开发、客户端开发、后台开发都在很大程度上实现了并行开发。

接下来，简单描述一下前端开