一：混合开发模式的背景
APP的三种开发模式：Native App、 Web App、Hybrid App。
1. Native App
Native App，原生APP，使用原生（即Android或iOS）开发的APP。使用原生开发有其优势：应用的性能好，适配起来相对容易。但原生APP最头疼的有三个问题：
（1）无法跨平台：Android和iOS都需要开发各自平台的版本——开发成本高；
（2）升级麻烦：每次升级都要下载安装包，Android还好，反正不需要审核，下载就下载吧，但iOS就麻烦了，发布每个版本还得经过App
Store的审核，这导致第三个问题；
（3）Android和iOS很难同步发布。
2.Web App
所谓的Web App，就是把手机当做一个浏览器（Android使用WebView，iOS使用UIWebView），做几个页面挂在服务器端，类似于一个小网站。这样说虽然不太贴切，但实际上给人的感觉就是这样的。虽然开发成本大大降低，但页面访问速度慢、操作体验差。于是第三种模式诞生了。
3. Hybrid App
乍一看和Web App没啥差别，但涉及到的技术成本、开发成本、学习成本比Web App高，它综合了Web App的开发速度和Native App的高性能体验。之所以说学习成本高，是因为开发高性能的Hybrid App有难度，网络资料少。我是两年半前开始接触混合模式开发的，当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容，网络几乎没有资料。网上能搜索到的都是很粗略的东西，或者就是Hello World级别的东西，涉及到稍微细节一点的东西几乎没有。由于本系列文章都只讲Hybrid，故在此不再啰嗦了。
三种开发模式各自的特点如下面的表格所示：
Hybrid
App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。
Hybrid
App按网页语言与程序语言的混合，通常分为三种类型：多View混合型，单View混合型，Web主体型。
（1）多View混合型
即Native View和Web View独立展示，交替出现。2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App，Web技术只是起到补充作用。开发难度和Native App基本相当。
（2）单View混合型
即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。
（3）Web主体型
即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。
从分析可见，Hybrid App中的Web主体型只要能够解决用户体验差的问题，就可以变成最佳Hybrid App解决方案类型，而这也是目前最难解决的问题。
二：线下主流混合模式
HybridApp开发，现阶段主流的平台包括PhoneGap，AppCan，appMobi，Titanium等，它们基于webkit开源内核，使用HTML5 标准开发，适配机型简单，支持开发者自定义插件，并能很好的应用于商业，教育，娱乐等行业，成为移动开发者的首选开发平台。
1. PhoneGap（cordova）
PhoneGap是一款Apache的开源移动开发平台。目前已经将核心代码贡献给Apache cordova，最新版本是5.4.0，它是基于HTML，CSS和JavaScript的，可以使用一些开源的框架比如jQuery Mobile，Dojo Mobile，Sencha Touch等等来提高用户体验，也提供了比较丰富的原生插件调用。
特性：
1.可以使用DreamWeaver 5.5编码，现在使用appMobi提供的xdk 进行模拟器开发。
2.代码开源，开发者可以放心使用。
3.兼容性，一次开发，多处运行。
4.使用JS+HTML5，成本低。
优点：
1. Native接口比较丰富，通过封装的API可以直接访问硬件，比如说加速，相机，指南针，GPS，文件访问等。
2.接口文档描述非常详细。
3.支持平台多，包括iOS，Android，Blackberry，Symbian，bada，Windows Phone 7，Windows Phone 8 等。
缺点：
1.需要针对相应的平台环境配置，进行编译，打包测试，发布等等。由于使用Hybrid开发的用户群，需要对各个平台的开发都要需要了解，对硬件等等都要配置，加大开发成本。
2.使用效果启动慢，页面切换响应慢，数据请求慢。
3.因为是国外的框架，技术支持不够到位，出现问题，无法排解，成为技术攻关的难点。
资料：
· https://www.w3cschool.cn/cordova/
· https://tieba.baidu.com/f?kw=cordova
· http://wiki.jikexueyuan.com/project/apache-cordova-tutorial/creating-cordova-project.html
2. AppCan
AppCan是本土移动开发中使用最广的移动平台，网络舆论而言，AppCan是PhoneGap的中国化，但是从对AppCan实际使用，以及转向移动开发的朋友们互相交流反馈，他们是截然不同的两个移动平台，AppCan不仅封装了类似于PhoneGap的本地调用功能，而且封装了uexWindow多窗口机制，实现了移动端的iframe效果，虽然不是开源项目，但一直都有面向开发者的免费版，并且也有定位于企业用户的企业版套装。
特性：
1.提供的集成开发环境的IDE进行模拟器开发。
2.兼容性，一次开发，多处运行。
3.使用JS+HTML5，成本低。
4.在线打包。
5.代码加密保护机制。
优点：
1.支持在线上传证书打包，对于不了解苹果，以及Android 环境开发的人是福音。
2.支持更多的原生调用，比如UI控件的封装，通讯类（socket），地图，支付宝等更多的原生控件支持。
3.拥有统一数据统计平台，便于运营管理开发的应用。
4.完善的技术支持，官方论坛以及Q群建设较为完善，使开发者更好的进行交流沟通。
缺点：
1.虽然有中文的开发文档，但描述比较简单，希望他们丰富他们的API文档。
2.免费版本不支持自定义插件（据说企业版可以自定义插件）。
3.暂时只支持iOS，Android两大平台。
4.许多功能需要企业版才能实现，不过是收费的。
资料：
· http://2014appcan.csdn.net
3.APICloud
APICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
特性：
APICloud提供的原生模块，涵盖UI、系统、交互、影音、支付等类型。另外，APICloud还为开发者提供了APICloud ID集成开发环境，其一键真机调试、代码同步、编译本地测试包等功能也提高了开发效率。官方号称7天做出一个App。
优点：
1、方案完整，简化，上手快。
2、IDE整合做的不错，直接连接云端，SVN代码同步，直接连接手机App Loader真机调试，Log可以通过IDE输出，比模拟器真实，直观。
3、云编译很方便，跨平台打包，直接生成二维码。
4、手机底层硬件/组件调用API很实用，比如语音识别，都不错。
5、文档完备，相比开源项目往往缺乏文档，信息需要东拼西凑来说，APICloud的文档比较集中和全面。
缺点：
1、缺乏常见模式App的完整框架Demo，比如：一个带头部信息，底部导航和侧边菜单的应用框架用APICloud的UI组件怎么写，页面间跳转和参数传递怎么写，这些都是动手开发之前最先要解决的问题。Demo
App里的组件示例有用，但是框架和基本流程要先跑起来。
2、UI组件不够丰富。
3、IDE联机调试的Log输出不稳定，经常断线。
4、文档层次和细致程度还不够。文档现在的层次有点混乱，不好定位信息，最好分一下类别，比如媒体类，通讯类，等等。另外还有一些API没有说明文字。
资料：
· https://docs.apicloud.com
· https://jingyan.baidu.com/article/9f7e7ec0ad3da06f2915544e.html
4. React Native
React Native 是一个 JavaScript 的框架，用来撰写实时的、可原生呈现 iOS 和 Android 的应用。其是基于React的，而 React 是 Facebook 的用于构建用户界面的 JavaScript 库。由 Facebook 开发并在2013年将其开源，React 已经得到了颇为广泛的使用。但是其使用的范围比较狭窄，它仅是用于渲染用户的应用程序的界面，而不是更大的 MVC 框架。
React Native 也只是 React，但是是针对移动设备的。也有一些少许的不一样的地方，比如开发者需要使用组件而不是
优点：
1.把cocoa里面的controller和view统一成了component，其实RN里只有component这个组件概念，既可以扮演页面级别的组件（controller），也可以扮演一个模块级别的组件（UIView)。入门门槛降低了很多。
2.动态绑定，这个React的基本功能，被带到了客户端开发中来，数据和视图是动态绑定的，数据发生变化，视图会跟着变化，很多操作视图的代码都可以省略了。
3.引入了类似于CSS（一个子集）的样式管理，可以内嵌到模块，也可以全局使用，定义样式变得非常简单通用。
4.引入了Flexbox布局，把ios本身复杂的AutoLayout简化，使用很方便，学习起来也更简单。
5.引入了方便的npm管理，有大量现成的nodejs包可以用（例如moment，underscore等常用模块），还可以把自己项目模块搞到内部npm上做通用组件，另外，npm上还有不少别人写的react native的插件。例如下面这个。
6.第三方组件里有一个可以把icon font引入项目的组件，可以在任何显示图标的地方直接用icon font显示，灰常方便。
7.调试很方便，一次编译后，每次改了js代码，只需要在模拟器里command+R即可重新加载代码。有问题会直接报错，里面有代码行数等详细信息。
8.完整封装了各种js内置的方法，例如：setTimeout，setInterval，XMLHttpRequest，localstorage，console.log等，都是用oc原生方法封装的。
9.引入ES6的支持，可以使用各种新特性，例如最常用的箭头函数，解决this作用域乱套的问题。
缺点：
1.组件不全，第三方组件也不全，遇到某些特殊功能，需要捣鼓很久，例如摄像相关的，文件读写，文件上传之类的组件。
2.性能并非媲美原生，还是有一些损耗的，特别是交换大数据的时候，例如读取相册。
3.ios和android代码并非通用，有可能会需要维护两套，或者在代码内做一些判断。
4.并非网上大家说的，写一次代码，多端通用，网页版和客户端版完全不是一个概念，只有部分代码可重用。
5.把代码都打包到bundle里面，不知道苹果对这种开发方式是否会不太喜欢，甚至拒绝上线。
6.实际开发的时候，还是需要了解底层原理，自己开发跟原生桥接的组件，这个对普通前端来说是一个很大的挑战。
资料：
· http://facebook.github.io/react-native
· github搜索 react native 了解第三方开源组件
· http://wiki.ecmascript.org/doku.php?id=harmony:proposals
5. Titanium
Titanium移动平台是所有移动开发平台中比较另类的，它将JavaScript和本地库链接在一起，编译成字节码，针对iOS以及Android两个平台分别构建一个软件包。应用程序使用HTML，JavaScript和CSS进行开发，并支持PHP，Ruby和Python。应用程序可以使用 Appcelerator API访问本地特性。并提供Appcelerator
Studio开发环境，由于编译成本地代码，所以用户体验是最好的。
特性：
1.针对不同平台生成对应的原生包。
2.供Appcelerator Studio开发。
优点：
1.针对JS解析生成原生控件，基本达到纯原生的用户体验。
2.支持自定义插件。
缺点：
1. API文档为英文，并且比较简单，对国内用户使用有一定挑战。
2.跟PhoneGap同样，国外框架，技术支持困难。
3.支持Android，iOS，黑莓平台。
4.环境需要用户自己搭建比较复杂。
资料：
· https://www.cnblogs.com/sipher/articles/2697368.html
· http://tidev.in/forums/kai-fa-zhi-shi
· http://www.titaniumstudios.com
6.AppMobi
appMobi推出了全新开发工具XDK，这个工具使得开发者可以使用HTML5构建网络和移动平台的应用程序，可以进行屏幕仿真调试、设备实际调试和遥控调试等。
特性：
1.使用XDK 进行开发。
2. HTML5+CSS+JS。
3.一次开发，多处运行。
优点：
1.本地接口较为丰富，并且推出有游戏加速引擎,主要包括物理引擎、离线和动态缓存、媒体播放器、验证和加密、增强现实、二维码和QR扫描、更好的显示支持。
缺点：
1.国外框架，技术支持差。
资料：
· https://appmobi.com/?q=node%2F153
7.WeX5
WeX5遵循Apache开源协议，完全开源免费，上百个组件框架，全部开放，可视化的组件框架，开发者可自定义组件，集成第三方组件，采用MVC设计模式，数据和视图分离，页面描述和代码逻辑分离，支持浏览器调试、真机调试、原生调试，等多种调试模式，开发者可掌握每一行代码。
WeX5一直坚持采用H5+CSS3+JS标准技术，一次开发，多端任意部署，确保开发者成果始终通用、不受限制。WeX5的混合应用开发模式能轻松调用手机设备，如相机、地图、通讯录等，让开发者轻松应对各类复杂数据应用，代码量减少80%。
优点：
1.由于遵循Apache开源协议，所以可以使用Apache的插件
缺点：
1.教程不敢恭维，不详细，没针对性，做教程应该针对某功能详细介绍。
2.使用操作式布局，不是代码的，其实这点好处没有弊端大，因为开发者或多或少对HTML5，代码还是会的，反而搞个布局工具，让我们相当于重新学习开发工具了。老手变新手。
3.部署方式在线更新，不是很理想。
4.是从cordova工具基础上开发的，使用的也是它的插件，个人感觉插件首先不太会用，教程不详细，并且插件反馈不也友好，比如我试过下载插件，下载xx。ZIP，如果ZIP的url找不到，也不提示错误，没提示要我下部怎么做了，下载进度没不知道是有还是没有。所以WEx5,就开发功能而言有很大的局限性。
资料：
· http://docs.wex5.com/wex5-introduction/
· https://www.w3cschool.cn/wex5/k8u91tes.html
· https://www.cnblogs.com/mehjb/p/6127018.html
另还有Ionic框架、Moblile Angular UI框架、Intel XDK框架、Sencha Touch框架、Kendo UI框架、AppsGeyser框架、AppsBuilder框架、AppMachine、Kinvey框架等混合框架。
网友评论