Hybrid App开发入门(一)
1、什么是Hybrid App?
介绍Hybrid App之前首先需要了解目前主流手机应用程序有哪些？
Native App
Web App
Hybrid App
Native App 是一个原生程序，一般运行在机器操作系统上，有很强的交互，一般静态资源都是在本地的。浏览使用方便，体验度高。在实现上要么使用Objecttive-c/swift和cocoaTouch Framework撰写IOS程序，要么选择java+Android Framework撰写android应用程序，具备设备访问能力。
Web App 是生存在浏览器里的应用，所以只能运行在浏览器里，宿主是浏览器，不再是操作系统。资源一般都在网络上。本质上是一个触屏版的网站。不具备设备访问能力。
Hybrid App 是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，但是还是运行在机器的操作系统上，交互较弱，资源一般在本地或者网络都可以。具备设备访问能力。
三者优缺点对比
| 应用类型 | 优点 | 缺点 |
|---|---|---|
| Native App | (1). 打造完美的用户体验 (2). 性能稳定 (3). 操作速度快，上手流畅 (4). 访问本地资源(通讯录，相册) (5). 设计出色的动效，转场 (6). 拥有系统级别的贴心通知或提醒 7.用户留存率高 | (1). 分发成本高(不同平台有不同的开发语言和界面适配) (2). 维护成本高(例如一款App已更新至V5版本, 但仍有用户在使用V2， V3， V4版本， 需要更多的开发人员维护之前的版本) (3). 更新缓慢，根据不同平台， 提交–审核–上线 等等不同的流程，需要经过的流程较复杂 |
| Web App | (1). 开发成本低 (2). 更新快 (3). 更新无需通知用户，不需要手动升级 (4). 能够跨多个平台和终端 | (1). 临时性的入口 (2). 无法获取系统级别的通知，提醒，动效等 (3). 用户留存率低 (4). 设计受限制诸多 (5). 体验较差 |
| Hybrid App | (1). 跨平台，一次开发，所有平台生效 (2). 快速发布，应用内更新不需要提交到AppStore (3). 开发高效成本低，通过HTML+CSS+Javascript开发应用 (4). 丰富的Device API, 通过桥接可以直接调用设备API | (1). 图形和动画渲染效果较差，CPU/GPU密集类应用目前看更适合Native (2). 静态资源从服务器端加载导致的UI展示延迟问题 |
三者属性对比
| 类型 | Web | Hybrid | Native |
|---|---|---|---|
| 开发成本 | 低 | 中 | 高 |
| 维护更新 | 简单 | 简单 | 复杂 |
| 体验 | 差 | 中 | 优 |
| 应用市场认可 | 不认可 | 认可 | 认可 |
| 安装 | 不需要 | 需要 | 需要 |
| 跨平台 | 优 | 中 | 差 |
| 图像渲染 | HTML，Canvas，CSS | 混合 | 本地API渲染 |
| 原生界面 | 模仿 | 部分原生，部分模仿 | 原生 |
| 原生API | 不可调用 | 可调用 | 可调用 |
| 网络要求 | 全部依赖 | 大部分依赖 | 支持离线 |
2.Hybrid App开发方案
方案一 重混合应用， 在开发原生应用的基础上，嵌入WebView但是整体的架构使用原生应用提供，一般这样的开发由Native开发人员和Web前端开发人员组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计，以及开发都有一个比较折中的效果出来，优化得好也会有很棒的效果。
Hybrid App技术发展的早期， Web的运行性能成为主要瓶颈！
为解决性能问题Hybrid App走向“ 重混”。
通过多WebView：实现流畅的多页加载和专场动画。
使用Navtive UI 组件：框架、菜单、日期等。
“重混”的优缺点
优点：
– 提升了运行性能
– 增强了交互体验
缺点：
– Web和Native技术交叉混杂
– 需要同时掌握Web和Native技术， 学习难度增加
– 一个页面有Web组件也有Native组件， 编程调试困难
方案二：轻混合应用， 使用PhoneGap、AppCan之类的中间件，以WebView作为用户界面层，以Javascript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。
随着时代的发展， 手机硬件、浏览器技术、无线网络技术都得到了大幅的提升，H5已经可以支持复杂应用， 并拥有良好的运行性能。使用轻混方案的App也越来越多。
目前我们要学习的Hybrid App开发就是方案二， 使用H5+Js+Native框架开发当前轻混合应用。
顺变提一下， 2012年8月， 微信公众平台的上线，重新定义了移动应用： 移动应用 = Iphone App + Android App + 微信App
3.Hybrid框架结构
HyBrid App = H5 App + Native框架
H5App 用来实现功能逻辑和页面渲染
Native框架 提供WebView和设备接口供H5调用
H5 App
简单理解就是以网页技术为主来实现的移动应用。H5 App由网页和外壳两部分组成。 网页主要负责界面的显示和交互； 而外壳会内置一个浏览器来提供网页的运行环境， 并且会通过插件为网页提供扩展的原生调用能力，如下图:
H5 App简单分为:
多页应用模式MPA（ Multi Page Application）
单页应用模式SPA（ Single Page Application）
综合上图对比, H5 App页面框架的最佳选择：SPA单页应用模式！！
单页应用的核心问题： 页面隔离! 解决方案如下图所示：
Native框架:
Cordova(PhoneGap)
业界最主流的开源移动跨端框架
HTML + CSS + JS + 原生插件
开放式的原生插件框架
干净的轻混合跨端框架
支持公司:
Hybrid App开发所需技能一览表
HTML5
CSS3
JavaScript
JavaScript基础：基本语法、面向对象等，能使用JavaScript编写程序。 Angular : 优秀前端JS框架 RequireJs : 模块隔离，资源按需加载 WebPack: 模块加载器兼打包工具 Avalon: MVVM数据绑定框架（选学） Node.js: 服务器端语言, 会这个就前后端统统可以搞定，瞬间成全栈工程师
Hybrid App开发框架推荐
Framework7
Ionic
下次分享如何开发一个简单的Hybrid App：
Cordova使用
如何使用Cordova插件访问设备接口
如何将H5App打包成App