Hybrid APP混合开发的了解和其他两类app的对比

以前我都是用java做网站的，最近公司需要开发一个app，但是公司又没有Android工程师，所以这个任务就被我们伟大的技术总监分配给我做了，下面我就来解释下目前的app市场行情，由于我们的app只是做推广使用，要求不高，我就采用了hybrid混编即可满足要求，而且我们技术总监也把服务器的接口给我预留出来了，我要做的就是开发移动端即可。下面开始介绍我们的app。

1，概念详述

现有3类主流APP，分别为：Web App、Hybrid App（混合模式移动应用，Hybrid有“混合的”意思）、 Native App（原生app，后面都用“原生app”来描述）。Web App和原生app有很多大牛们都做过比较详细的比较以及优劣势分析，我主要对Hybrid App来简要分析下，谈谈Hybrid App里原生页面和H5页面的比较和分析。

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。Hybrid App的具体实现主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。

2，移动应用开发的三种方式比较。

移动应用开发的方式，目前主要有三种：

·        Native App： 本地应用程序（原生App）

·        Web App：网页应用程序（移动web）

·        Hybrid App：混合应用程序（混合App）



三种移动应用开发方式，如上图。
三种移动应用开发方式具体比较如下表所示：

3，选择原生的开发的原因。

1.使用定位功能

如果需要用到GPS定位功能，以前只能使用原生的API来查看用户的位置信息，但现在大多数的主流浏览器上都嵌入了W3C Geolocation API。安装了WebKit的设备或是配置了Opera或Mozilla浏览器的设备，均可以获取用户的位置信息。这在技术上已经没有太大的困难，然而却受到隐私保护条例的限制。加入定位功能，意味着给网站引入了一些敏感信息，可能会导致严重的后果。而原生app的位置信息必须经过用户授权，排除了隐患。

2.使用摄像头

如果需要用到摄像头功能，原生开发者能够简化拍照的过程，直接在客户端对照片做一些处理，只有需要的时候才上传服务器。W3C正在开发一个访问摄像头的API，但现在还没有将这部分工作正式整合到浏览器中。

3.使用感应器（方向传感器、重力传感器等）

4.访问文件系统

访问文件系统常会涉及到安全和用户隐私保护的问题。恶意应用程序可能会修改或删除你的数据。移动设备越来越私人化，在移动设备上保存了大量用户的个人信息、朋友信息及商业信息，保存在本地的数据更加安全且可以为用户提供更加有针对性的服务，这要求开发者须获得用户的授权后才能访问用户的私人数据。则原生app更容易做到这点

访问文件系统时至关重要的一点就是在没有获得用户授权的情况下，不要访问任何用户的私人数据。而这一点，往往被大多数应用忽略了。W3C正在为移动开发商开发相关的标准API，但目前该工作尚未完成。

5.提供离线服务

使用原生页面可以将数据保存在本地并进行读取，可以实现离线服务，在无网或弱网情况下，更深得用户喜爱。

4，选择hybrid的开发的原因。

1.折中考虑

如果企业使用 Hybrid 开发方法，就能集Native 和web两者之所长。一方面，Native 让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面，使用 Web 语言编写的所有代码都可以在不同的移动平台之间共享，使得开发和日常维护过程变得集中式、更简短、更经济高效。

1.内部技能

 

许多企业都拥有Web 开发技能。如果选择 Hybrid 开发方法，在合适解决方案的支持下，Web 开发者只要仅仅运用 HTML、CSS 和 JavaScript 等 Web 技能，就能构建 App，同时提供 Native 用户体验。

3.考虑未来

HTML5的可用性和功能都在迅速改进。许多分析师预测，它可能会成为开发前端 App 的默认技术。如果用 HTML 来编写 App 的大部分代码，并且只有在需要时才使用 Native 代码，公司就能确保他们今天的投入在明天不会变得过时，因为 HTML 功能变得更丰富，可以满足现代企业一系列更广泛的移动要求。

5，混合开发框架和层次结构图

框架如下图：



1）页面加载，移动终端web壳。

壳是使用操作系统的 API 来创建嵌入式 HTML的渲染引擎。壳主要功能是定义Android应用程序与网页之间的接口，允许网页中的JavaScript调用Android应用程序，提供基于web的应用程序的Android API，将Web嵌入到Android应用程序中。

2）前段交互Js。

包括基础功能js和业务功能js。

3）前端适配器。

适配不同的终端：Pad、android、ios、wap。

层次结构图：



1）页面加载

页面容器（XdjaWebView）类，是整个框架的核心和基础，主要用来实现页面的加载，以及对页面加载完成后的后续操作提供支持，例如：文件下载、js支持、文件上传，数据缓存、进度条等；

页面加载接口：对页面的加载过程进行跟踪；例如：页面加载进度百分比，页面开始加载、页面加载出错、页面加载完成等
2）JS调用Android功能

网页：页面调用js接口中的具体方法；
JS接口：调用android接口中一一对应的具体方法；
android接口：直接调用框架中集成的功能，或者通过框架接口在应用系统中自定义功能（例如，退出、返回键响应等)；其中升级功能的返回结果或者过程信息，可以在客户端中通过升级接口获取。

XdjaClientHelper：如果需要将框架中的方法返回值通知给js方法，你们可以通过XdjaClientHelper类来实现；
3）应用系统调用js功能

应用系统通过XdjaClientHelper来实现对js功能的调用；

4）应用系统调用HDF功能

应用系统可以调用框架集成的工具类、消息提示框、升级模块以及手机上常见的打电话发短信等功能。

6，性能优化

1.单个页面

  登录、首页以及共用代码（样式文件、JS文件、页面加载loading代码）等放在index页面里。页面展示前显示fake页面（过场页面），首屏加载完后，fake页面消失。

页面虽然按照业务模块分为不同的页面，但是展示的时候会在同一个页面即index页面展示。具体的说，需要某个功能页面的时候将页面以AJAX的形式请求到index页面，使用完毕删除。使用一个页面，公共的CSS和JS只会加载一次。

2.css，js

在本次混合开发框架开发中，CSS全部写在一个文件里。CSS和Jquery Mobile的相关文件写在index页面头部，其余公用JS等写在index页面底部。防止JS阻塞页面加载。各业务逻辑JS写在各业务页面的底部。开发完成后，CSS和JS需要进行压缩，减少用户使用时初次请求时间

3. @font-face

混合开发中使用@font-face来实现图标字体化，统一控制图标的颜色和大小。

使用@font-face优点：减少页面因使用图片而带来的流量，大大缩短页面响应时间；图标可以随意改变大小和颜色，而不会导致失真。

使用时注意：所有的图标需要是矢量的SVG格式。

使用限制：只适用于纯色扁平化的图标。背景图等比较复杂的图片仍然使用图片。

4. 本地存储LocalStorage

   HTML5本地存储LocalStorage，在混合开发中主要用来存储最近查询记录等。

拿首页最近查询来说，用户每次在综合查询中点击一个模块，通过LocalStorage将图标和对应的功能名字存储起来，如果用户不清除，LocalStorage中的数据是一直存在本地的。下次打开应用的时候从LocalStorage中读取最近查询记录等。

使用LocalStorage的好处是，不进行后台交互，速度快。

5. 异步ajax

本次开发中多处实现都是通过使用AJAX。首先，显示页面时，先显示框架，然后异步加载内容；其次，分页功能中，先显示部分简项列表，上拉获取更多内容。再次，每打开一个新功能，页面以AJAX的形式获取新页面的内容并展示出来。

异步AJAX，交互体验更好。从性能的角度考虑，速度也更快。

 

7，个人总结

我觉得混搭使用这两种开发模式是最符合当下web技术发展以及app的发展背景的，像淘宝就把原生页面和H5页面融合的天衣无缝，也尽可能的用技术解决了H5页面的劣势问题。当然，各企业需要根据自身的条件以及战略来选择适合自己的开发模式，合理配置资源。而且在h5的性能上面也是层出不穷的出来框架来优化页面，所以我觉得hybrid混编在未来的市场将很具有占据性。