Hybrid APP 解决方案
2016-07-29 本文已影响967人
我是午饭
APP开发的三种模式
- Native APP
即原生应用，相对于Web APP和Hybrid APP来说，应用的全部功能和界面都是用各平台操作系统（如Android，IOS，Windows Phone）提供的SDK开发，不使用Web相关技术来展示页面和实现功能。
优点：体验最优，性能最好。
缺点：开发成本高，无法跨平台，对应用商店依赖较高。 - Web APP
所有功能和界面都由web实现，然后以各平台SDK中的浏览器组件（如Android中的webView，IOS中的UIWebView，Windows Phone中的WebBrowser）为载体，加载页面，展示界面，提供功能（类似浏览器）。
优点：开发成本低，维护更新简单，可跨平台
缺点：体验和性能差，功能限制，对网络环境要求较高。 - Hybrid APP
混合应用，结合了上面两种模式，综合了综合了Web App的开发速度和Native App的高性能体验。复杂和易变的信息展示页面可由Web实现，追求性能和体验的功能模块可由原生实现。
优点：开发成本较低，可跨平台，维护更新较容易。
缺点：体验一般。
Hybrid APP所需的技术
- Native技术
各平台的相关开发技能。（借助第三方框架可不用掌握Native技术） - Web技术
大部分为前端的开发技能，H5标签，CSS样式，JS脚本等等，以及其他一些性能优化和模块化编程的技术。 - 交互实现
natvie和web交互的方法比较常用的有两种，一是约定URL Schema然后通过监控浏览器组件的请求。二是通过JavaScriptCore将native方法注入给window对象。
流行的第三方框架
许多大公司以及组织，像Facebook和Apache都在极力的发展和推广这种跨平台框架，这些跨平台框架主要是将原生的功能封装好后通过规范的JS接口提供给前端，从而使团队或者前端开发人员无需具备各平台的开发技能就能开发出跨平台的混合应用。其中比较流行的框架有：
- Cordova/PhoneGap
Cordova是Apache的一个开源项目，基于PhoneGap。
Cordova的体系架构从上往下分为，前端（html，js），html 渲染引擎（各平台的浏览器组件），cordova plugin。
cordova plugin为cordova重最核心的部分，扩展了js访问手机硬件和原生API的接口。
开发者可自定义cordova plugin扩展自己的原生接口，添加到cordova。
总体来说cordova即可以简单的部署到多平台，也支持单平台的深层定制。 - ReactNative
Facebook推出的跨平台框架。 使用js和React就可以开发app，React是Facebook自己的js库。用reactnative开发的界面会完全转化为native界面。部署的时候不用重新编译，可以热加载。而且可以植入原生代码。
reactnative是通过JavaScriptcore将native中的方法映射到js中，没有使用浏览器组件（除低版本IOS），严格意义上来说开发出来的并不是Hybrid app。所以，开发时比较依赖reactnative暴露出来的接口，除此之外，初次学习成本比较高，需要学习react的使用（一套前端不能复用到pc）。 - WeX5
国内开源免费的开发工具。
WeX5的IDE基于Eclipse，提供可视化，组件化，拖拽式开发环境。
前端采用H5+CSS3+JS标准，并且提供了大量面向APP开发的，可定制的前端组件。组件样式基于支持移动设备优先，响应式设计的Bootstrap。
页面代码部分，使用RequireJS管理页面模块，模块间遵守AMD规范。
APP开发部分，使用原生浏览器组件展示页面，使用Cordova插件访问手机硬件和访问原生API。 - ionic
ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。（待补充..）
这些框架在带来便利的同时也带来一些问题和缺点：
- 扩展、维护、定制成本，框架提供的界面和功能存在一定的局限性，有时候不能满足产品的定制和需求，导致设计围绕框架转，不符合产品的需求。
- 引入一个大而全的框架意味着带来许多的累赘，增加APP体积以及工程复杂度。
- 框架本身的缺陷以及潜在的bug。
交互设计
前端与native之间的交互大致可以分为以下几类
- 通用接口（数据传递，手机硬件访问，原生API访问）
- 账号信息
- 开发调试
（此模块待完善...）
