HyBrid App框架介绍

如果篮球架和人同高，则无法引起人们的兴趣；但如果篮球架有两层楼那么高，同样是人丧失兴趣。——篮球架效应

• RuiMan的博客 - [混合开发]HybridApp分析！！！
• kingplus - Hybrid APP混合开发的一些经验和总结
• chemdemo/chemdemo.github.io - Hybrid APP架构设计思路
• Hybrid APP架构设计思路

• 极致的 Hybrid 混合式开发（去啊App Hybrid 实战）

  　　之后，谨慎的我还去找了资料，综合了下。以下是找来的资料。
  　　博主在入坑了之后，深觉综合查询是重要的，学习一门技术需要看自己的能力水平和这门技术是否相对成熟（大牛勿笑）以及自己学习这项技术的目的。

简介

HybridApp概念

---

Hybrid App：Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.

总体来讲，Hybrid App是同时采用网页语言与程序语言进行开发，通过不同的应用商店进行打包与分发，应用的特性更接近原生应用而且又区别与Web应用。但是在开发过程中同时使用了网页语言，所以开发成本与难度大大降低。也就是说Hybrid App兼具了Native App与Web App两者的诸多优点。

HyBrid App三种开发方式

所谓的Hybrid App其实会有不同的分支。而且会和Native应用有重合的地方。下面就说三种不同的解决方案。

方案一

使用PhoneGap、AppCan之类的中间件，以WebView作为用户界面层，以JavaScript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。

方案二

使用Adobe Air、RubyMotion、Appcelerator或者是Xamarin这种非官方语言的工具，打包成原生应用的方式开发。为什么笔者会将它们定义为Hybrid App，主要是它们并没有很单纯地使用原生提供的语言进行开发，而是通过对开发者提供友好的开发工具，并折中地把这种开发语言转换成原生语言，最终打包出整个应用，所以也属于混合应用范畴。

方案三

在开发原生应用的基础上，嵌入WebView但是整体的架构使用原生应用提供，一般这样的开发由Native开发人员和Web前端开发人员组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计，以及开发都有一个比较折中的效果出来，优化得好也会有很棒的效果。（当年Facebook Three20就使用该方案）

• 叶小钗 - 浅谈Hybrid技术的设计与实现

因此，Hybrid App有以下的特性：

1. 开发时可能不采用或者大部分不采用原生语言，但是却有所有原生应用的特性；
2. 架构方案会和原生有出入，基本由工具而定；
3. 具有跨平台特性；
4. 一般开发相对原生开发的方式要简单。

浅析Hybrid App

---

Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。目前已经有众多Hybrid App开发成功应用，比如百度、网易、街旁等知名移动应用，都是采用Hybrid App开发模式。

经过众多开发者与成功案例证明Hybrid App兼具了Native App的良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。现在有更多的开发者在面临移动平台的选择，所以在这里根据开发中各个平台的使用情况，针对现在主流的平台进行分析。

主流移动平台分析

---

由于hybridapp工具市场竞争异常激烈，在此严正声明：以下排名不分先后，请勿对号入座，后果自负。

1.wex5

---

官网：http://www.wex5.com/wex5/?utm_source=Baidu

成立时间：2014年11月

融资情况：未知

产品：wex5（免费）、bex5（企业版 收费）

集成的原生sdk：大部分为cordova（phonegap）插件 极光、微信支付、支付宝

介绍：Wex5 App虽然打开速度是快，但是响应就很让人无语，在手机上运行效果很差。而且相关API文档就仿佛不是他们公司的一样，很多对不上，而且不详细。论坛也比较少教程。当然，他们的交流群很热情。

优点：

1. 高效精致的UI组件体系，基于jquery和bootstrap技术，采用增强的RequireJS模块化技术。

2. 基于phonegap(cordova)框架，如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。

3. 可视化拖拽式集成开发环境IDE，全能力的调试支持和智能代码提示

缺点：

1. 使用范围有限：适用：一般app、电商app、客服app、会员app、微店微商等

2. 用户量小，存在不稳定因素。

以下是网上的一些观点，自行考虑，博主不进行评价。请客观的对待，各个Hybrid App 框架有各自的优势。

---

• WeX5和Hbuilder开发出的App有什么区别？各有什么优点和缺点？
• 当今时报的博客 - H5 App开发用WeX5垃圾 试用一周,我果断放弃了wex5

2.apicloud

---

官网：http://www.apicoud.com/

成立时间：2014年10月

融资情况：550万美金

产品：apicloud studio(免费)

集成的原生sdk:
支付宝支付、ipaynow、ping++、coinport比特币支付、ipaynowScanner扫描支付、微信支付、银联支付、beecloud支付
qq登录－分享、微博登录－分享、微信分享－支付－登录、京东登录、superID
酷果广告、芒果联盟广告、多盟广告平台、游族网络、点开科技广告、H2广告交易平台、畅思广告、科大讯飞移动广告、有米广告
百度地图、百度定位、百度导航
融云、个推、极光、腾讯信鸽推送、Bmob后端云、美恰、udesk、领通移动应用远程协助、环信、kf5
云之讯、mob.com、极验验证
云知声语音识别、科大讯飞、图灵机器人、脉可寻名片、合合信息图片处理
百姓网、iBeacon智能硬件、云智慧、talkingdata、诸葛io、机智云、听云、logCrash、优酷播放器

优点：

1. 提供开发的IDE。

2. 提供数据云API、统计云API、推送云API

缺点：

1. 与Hbuilder存在版权问题，抄袭Hbuilder

3.appcan

---

官网：http://www.appcan.cn/

成立时间：2010年初

融资情况：1亿元人民币

产品：公众版（免费）与企业版（收费）

集成的原生sdk：
壹壹电话、云知声、科大讯飞、百度导航、魔窗、beecloud、极验验证、云智慧（透视宝）、天翼rtc、腾讯信鸽推送、个推、高德地图、极光推送、环信、ping++移动支付、汉仪字库、美恰、testin云测、微信（登录、分享、支付）、百度地图、支付宝快捷支付插件、信鸽、qq登录、银联支付、腾讯微博、新浪微博

产品功能：

AppCan是本土移动开发中使用最广的移动平台，网络舆论而言，AppCan是PhoneGap的中国化，但是从对AppCan实际使用，以及转向移动开发的朋友们互相交流反馈，他们是截然不同的两个移动平台，AppCan不仅封装了类似于PhoneGap的本地调用功能，而且封装了uexWindow多窗口机制，实现了移动端的iframe效果，虽然不是开源项目，但一直都有面向开发者的免费版，并且也有定位于企业用户的企业版套装，目前最新版本为2.2.X。

特性：

1. 提供的集成开发环境的IDE进行模拟器开发。

2. 兼容性，一次开发，多处运行。

3. 使用JS+HTML5 ，成本低。

4. 在线打包。

5. 代码加密保护机制。

优点：

1. 跨平台：同时支持iOS、Android、Symbian、Windows Phone

2. 原生体验：引入原生UI控件与交互支持（如Action Sheet等）

3. 开发工具：基于Eclipse的开发工具，集成UI控件与应用管理

4. UI框架：提供强大的UI框架，更加易于实现页面布局与交互

5. 设备API：支持各种手机设备调用，如电话、相机、传感器、定位等

6. 本地打包：无需配置环境，无需编译，本地一键打包

7. 插件机制：支持第三方原生插件，支持JS插件

8. 代码加密：基于密钥的加密方式，无法破解，像混编一样保护html代码

9. 统计分析：应用分平台安装数统计，应用启动和使用情况统计

10. 开放平台：更具本土优势，已经对接Sina、QQ、百度等开放平台

11. 技术支持：技术支持及时响应，重视开发者建议和反馈

12. 支持在线上传证书打包，对于不了解苹果，以及Android 环境开发的人是福音。

13. 支持更多的原生调用，比如UI控件的封装，通讯类（socket），地图，支付宝等更多的原生控件支持。

14. 拥有统一数据统计平台，便于运营管理开发的应用。

缺点：

1. 虽然有中文的开发文档，但描述比较简单，希望他们丰富他们的API文档。

2. 免费版本不支持自定义插件（据说企业版可以自定义插件）。

3. 暂时只支持iOS，Android两大平台，不知道什么时候推出Windows Phone 8？

4. 许多功能需要企业版才能实现，不过是收费的。

5. AppCan免费版因需要把源代码上传到厂商的服务器上打包，对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决，但企业版稳定尚待观察。

6. AppCan采用封装的组件，依赖性比较高。不是开源代码。

7. AppCan 不能很好的解决原生代码的功能。

   • 【开发者眼中的AppCan】移动开发选择AppCan准没错（上）
   • 掌握这两个技术点，你可以玩转AppCan前端开发

4.dcloud

---

官网：http://www.dcloud.io/

成立时间：2014年

融资情况：1200万人民币

产品：hbuilder、5+runtime、mui（免费）

集成的原生sdk：通过5＋sdk自行集成

5.phonegap(Cordova)

---

官网：http://www.phonegap.com

成立时间：2008年8月

融资情况：已被adobe收购

产品：phonegap(cordova)

集成的原生sdk：自行集成

产品功能：

PhoneGap是一款国外的开源移动开发平台。目前已经将核心代码贡献给Apache cordova，最新版本是2.6.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. 可跨平台。phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器，或者说中间件。

   2. 提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知(警告、声音和振动)、存储。

   3. 可利用成熟javascript框架。如：Ext js、jQuery。

缺点：

1. 需要针对相应的平台环境配置，进行编译，打包测试，发布等等。由于使用Hybrid开发的用户群，大部分是web开发者，对原生开发基本不了解，这无疑给每一个开发者增加了沉重的负担，需要对各个平台的开发都要需要了解，对硬件等等都要配置，加大开发成本。

2. 使用效果启动慢，页面切换响应慢，数据请求慢。调试难度大，内存消耗大。不能完全跨平台，不同平台代码需要微调。

3. 文档虽比较详细但是基本是英文，对于国内大部分用户英文水平较差的是比较大的挑战。

4. 因为是国外的框架，技术支持不够到位，出现问题，无法排解，成为技术攻关的难点。

侧重点：侧重于对硬件的访问控制

6.crossapp

---

官网：http://www.crossapp.com.cn

成立时间：2014年6月

融资情况：9秒社团旗下

产品：crossapp

集成的原生sdk：自行集成

7.APICloud

---

官网：http://www.apicloud.com/

成立时间：2014年01月03日

融资情况：未知

产品：APICloud，SuperWebView

集成的原生sdk：使用标准WEB技术开发iOS、Android原生应用，各类功能一站聚合、一键接入

• 探秘Hybrid APP开发利器–SuperWebView

8.ionic（ionicframework）

---

官网：http://www.ionic.wang/

成立时间：……

融资情况：未知

产品：ionic

集成的原生sdk：基于phonegap 以及angularjs

介绍： Ionic 是一个强大的 HTML5 应用程序开发框架，号称 Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。

优点：

1. 追求性能 运行速度快

2. 轻量级框架

3. 基于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护

4. 通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。

5. 接近原生。

6. 强大的命令行工具

7. 可利用成熟javascript框架。如：Ext js、jQuery。

缺点：

1. Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用

2. 需要结合插件使用。

侧重点：侧重于前端的交互

• 使用ionic+angular+phonegap开发APP入门
• 皓眸大前端 - ionic中文教程

9. Intel XDK

---

官网：https://software.intel.com/zh-cn/intel-xdk

成立时间：……

融资情况：未知

产品：Intel XDK

集成的原生sdk：支持基地和第三方 Cordova 插件

介绍：Intel XDK是一款HTML5跨平台集成开发工具，利用HTML5的技术可以快速开发应用或者游戏，并快速打包成诸如安卓，IOS，WindowsPhone等平台上的应用并发布到应用商店，可谓是一条路服务了，并有crosswalk做支持，在设备上运行起来也更流畅。

10.MUI

---

官网：http://dev.dcloud.net.cn/mui/

成立时间：……

融资情况：未知

产品：MUI

简介：这是最接近原生体验、体积最小、载入最快的前端框架。

11.叮当

---

官网：http://www.dingdone.com/index#home

github地址：https://github.com/dcloudio/mui/releases

成立时间：2015-09-14

产品：叮当

简介：使用模板快速生成App

比较

---

phonegap与appcan什么区别？

• phonegap与appcan什么区别？
  
  • 大概浏览了一下appcan的文档，api设计只能用莫名其妙来形容，各种缩写，各种看不懂。
    作者：张帅
    链接：http://www.zhihu.com/question/20636653/answer/87146800
    来源：知乎
    著作权归作者所有，转载请联系作者获得授权。
  • appcan我都快用哭了，文档表述不清不说，还各种错别字，看不懂的时候，我都在怀疑是不是我的文字理解能力有问题；社区回答不是很给力，提出的webapp／微信多入口开发基本无用，封装过于厉害，出现问题自己基本是解决不了的，css写的太牛，导致我需要什么效果都是自己再写。但是也有很多不错的地方，提供的模板很多，做简单应用的话拿来就用了，不是太复杂的应用／不需要很好的效果的话，是个挺不错的选择，以上是免费版评价。准备换弃了，都说ionic不错，准备试试。
    作者：高雷
    链接：http://www.zhihu.com/question/20636653/answer/87146800
    来源：知乎
    著作权归作者所有，转载请联系作者获得授权。
  • phonegap现在apache开源为cordova 。apache的东西就是什么你都能自己整。全部基于html5。走的是webkit ，所以速度有webkit限制。但是html5标准都是支持。推送聊天，等等都需要自己开发。走的都是websocket 。 （网上也有现成开发好的）。当然你也可以开发基于webView开发插件。这里，你想开发好一点的软件，最好学习ionic和angleJS
    appcan是一种 native的变种。大部分操作都是基于原生的。uexXXX各种插件，进行原生调用，其实就是封装了的操作变成同一的javascript操作。（这里比如推送，android和ios 就要分别开发。api不同。）ui这一块提供了一个弹性和模型。 他们的官网总崩溃。api特别难懂。demo错了一堆。
    下面吐槽一下：
    中国开发都是开源部分，你先用，用用就离不开我了，收费。（开发小软件。还可以，使用好了速度快。bug也不少）
    外国开发都是全开源。你开发我开发，大家一起开发。资源插件，相对少一点，主要是google不能用。在不都是英文的。学习成本高。
    作者：liudonghe1234
    链接：http://www.zhihu.com/question/20636653/answer/93251051
    来源：知乎
    著作权归作者所有，转载请联系作者获得授权。
  • appcan和phonegap - 详细比较和分析

表格来源于：Phonegap VS AppCan ，有兴趣的朋友可以看看，这篇博文详细的介绍了两者之间的区别。

比较表格	Phonegap	AppCan
框架功能	简单	丰富
支持平台	大部分平台	仅4种平台
开发环境	不同平台需要不同开发环境	只需一个IDE包
调试	可直接调试	本地发布的IOS包，必须部署在越狱的机器上
发布	在本地可以直接发布	必须将代码上传至服务器，才能发布
IOS 签名管理	本地管理	需要上传至服务器
代码泄露风险	低：仅在本地、svn保存代码	高：需将代码上传至appcan服务器

crosswalk

---

• 有没有团队用过 crosswalk ？cordova 的 webview 用 crosswalk 代替的方案。说说使用感受。

附录

• Striker的编程笔记 - 国内主流Hybrid app工具平台推荐
• 混合开发模式下主流移动开发平台分析
• 看看国外的phonegap和ionic移动app开发框架有多火
• 基于Html5的移动端（APP）开发框架的优缺点-转自【B5教程网】
• html5 + 相对于appcan，titanium，PhoneGap等优势和有待改进的地方是什么？
• 皓眸大前端 - Hybrid_APP说一说