移动端混合开发框架分析

1、移动端架构分析目录 TOC o 1-5 h z 移动端架构撕1 HYPERLINK l bookmark58 o Current Document 1 移动端常见开发模式5 HYPERLINK l bookmark61 o Current Document 纯 Native app 5 HYPERLINK l bookmark65 o Current Document 主流框架5 HYPERLINK l bookmark69 o Current Document 优势6 HYPERLINK l bookmark72 o Current Document 劣势6 HYPERLINK l book

2、mark75 o Current Document 主流应用6 HYPERLINK l bookmark78 o Current Document L2Hybrid app 6 HYPERLINK l bookmark82 o Current Document 多View混合型7 HYPERLINK l bookmark85 o Current Document 主流框架7 HYPERLINK l bookmark89 o Current Document 优势7 HYPERLINK l bookmark93 o Current Document 劣势7 HYPERLINK l bookmar

3、k97 o Current Document 主流应用7 HYPERLINK l bookmark100 o Current Document 发展趋势7 HYPERLINK l bookmark103 o Current Document Web 主体型8 HYPERLINK l bookmark129 o Current Document 主流框架平台8 HYPERLINK l bookmark133 o Current Document 优势9 HYPERLINK l bookmark137 o Current Document 劣势9 HYPERLINK l bookmark120 o

4、 Current Document 主流应用10 HYPERLINK l bookmark123 o Current Document 发展趋势10 HYPERLINK l bookmark126 o Current Document 1.2.3单View混合型 10 HYPERLINK l bookmark148 o Current Document 主流框架10 HYPERLINK l bookmark151 o Current Document 优势10 HYPERLINK l bookmark158 o Current Document 劣势10 HYPERLINK l bookmar

5、k166 o Current Document 主流应用10 HYPERLINK l bookmark144 o Current Document Web App 10主流框架11 HYPERLINK l bookmark112 o Current Document 优势11 HYPERLINK l bookmark116 o Current Document 劣势11 HYPERLINK l bookmark141 o Current Document 主流应用11四种主要开发模式对比112移动前端主流框架分析12 HYPERLINK l bookmark169 o Current Docu

6、ment Web 和 Native 混合 12 HYPERLINK l bookmark172 o Current Document WindVane+Hybrid + Native 12 HYPERLINK l bookmark181 o Current Document 简介12 HYPERLINK l bookmark185 o Current Document 框架实现12 HYPERLINK l bookmark188 o Current Document 架构图13AppCan 13简介13 HYPERLINK l bookmark197 o Current Document 框架

7、实现 13 HYPERLINK l bookmark200 o Current Document 架构图142.2 跨平台原生应用15BeeFramework 15简介15 HYPERLINK l bookmark209 o Current Document 框架实现15 HYPERLINK l bookmark212 o Current Document 架构图16Native Script 17简介17 HYPERLINK l bookmark221 o Current Document 框架实现17结构图18React Native 18简介18 HYPERLINK l bookmark

8、178 o Current Document 框架实现18架构图203数梦移动端开发框架选择 错误！未定义书签。开发模式选择20为什么不选择Native 20 HYPERLINK l bookmark227 o Current Document 玩什么不选择WebApp或Web主体型Hybird21 HYPERLINK l bookmark230 o Current Document 选择多页面混合型Hybird 21 HYPERLINK l bookmark233 o Current Document 选择类WindVane框架21 HYPERLINK l bookmark236 o Cur

9、rent Document 玩什么不选择 React Native 21 HYPERLINK l bookmark239 o Current Document 玩什么选择类WindVane框架21Native HybridWebweb诺言：Htm!受限制 TUlweoview页面放于服务器1移动端常见开发模式目前主流应用程序大体分为三类：Native App、Hybrid App、Web App。原生语言：Object C (IOJava( Android) 页面存放于本地湿舍请言:ObiectCffOS)+ Htm 受限制于U Iwe bvi如纯 Native AppNative APP指的

10、是使用原生程式编写运行的第三方应用程序，一般依托于操作系统如 iOS、Android、WP，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安 装使用。也叫本地app。Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在 线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App 的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是 比较乐观的是，AppStore培养了一种比较好的用户付费模式，所以在Apple的生态圈里， 开发者的盈利模式是一种明朗状态，其他market也在往这条路上靠拢。主流框架iO

11、S：(11 Cocoa 环境+Foundation 和 UIKit 框架(2 使用Objective-C和Swift做为主要开发语言(兼容C/C+)Android：(1 Java虚拟机环境(2 使用Java作为主要开发语言(支持C/C+)WindowsPhone :(1 WindowsRunTime 框架(WP10)(2使用原生C+、C#和 Silverlight做为主要开发语言1.1.2优势(1 打造完美的用户体验(2 性能稳定(3 操作速度快，上手流畅(4 访问本地资源(通讯录，相册)(5 设计出色的动效，转场(6 拥有系统级别的贴心通知或提醒(7用户留存率高1.1.3劣势(1 开发成本高

12、，可移植性差，需要维护iOS、Android、WP等多个平台(不同平 台有不同的开发语言和界面适配)(2 维护成本高(例如一款App已更新至V5版本，但仍有用户在使用V2，V3， V4版本，需要更多的开发人员维护之前的版本)(3 更新缓慢，根据不同平台，提交-审核-上线等等不同的流程，需要经过的流程 较复杂1.1.4主流应用够快云库、微信电话本、美图秀秀等中量级应用。HybridAppHybrid APP指的是半原生半Web的混合类App。需要下载安装，部分页面看上去类 似Native App，但只有很少的UI Web View，访问的内容是Web。Hybrid App主要以JS+Native

13、两者相互调用为主，从开发层面实现一次开发，多 处运行”的机制，成为真正适合跨平台的开发。Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发， 用户需要安装使用的移动应用。总体特性更接近Native App但是和Web App区别较大。 只是因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多。因此说， Hybrid App兼具了 Native App的所有优势，也兼具了 Web App使用HTML5跨平台开 发低成本的优势。Hybrid App按网页语言与程序语言的混合，通常分为三种类型：多View混合型，单View混合型，Web主体型

14、。1.2.1多View混合型即Native View和Web View独立展示,Native View与WebView交替的场景出现。 这种应用混合逻辑相对简单。即在需要的时候将WebView当成一个独立的View(Activity) 运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App， Web技术只是起到补充作用。开发难度和Native App基本相当。主流框架Native部分使用操作系统原生框架+JSBridge。Web融合部分国内阿里系使用最广的框架WindVane+HybridAPI等(后续章节详细 介绍优势(1 高效、扩展性强、支持多团队并行开

15、发(2 衔接Android/iOS原生导航交互，完美的用户体验(3 业务实现更灵活，复杂业务可通过Native实现，频繁变化或简单业务通过Web 实现，更好的满足移动端业务多样性、快速迭代要求(4 轻量级的框架，框架侵入性弱，各个业务高度独立，第三方业务快速接入(5 使用JS Bridge来实现HTML5页面与原生框架的数据交互：JSNative，性 能和安全性更佳(6 扩展丰富，能实现超级App劣势(1 技术要求高，需要开发人员同时懂Native和WebApp开发(2 重量级架构，架构搭建需要较长时间(3 开源社区相关框架少，成熟框架如WindVane等不开源主流应用目前使用最常用的开发模式

16、，市场上能见到的超级App基本都是用这种开发模式，如 微信、支付宝、淘宝等；其他如钉钉、新闻客户端等移动端App发展趋势2014-2015最新发展趋势，同时在Web和Native融合的基础上加入ReactNative或NativeScript等跨平台构建原生应用框架(见后续介绍。Web主体型即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降 低，并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏，主要取决于底层 中间件的交互与跨平台的能力。国外的appMobi、P

17、honeGap和国内的WeX5、AppCan 和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发appMobi 和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。 AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型 Hybrid App体验差的问题，接近Native App的体验。而WeX5则在揉合PhoneGap和 Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备Native App 对本地资源的调用能力，性能体验也不输原生；WeX5所开发出来的app具备

18、完全的跨端 运行能力，可以无需任何修改直接运行在各种前端环境上。主流框架平台1、AppceleratorAppcelerator 的 Titanium 开发平台使开发者可以通过 HTML、PHP、JavaScript、 Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让 用户轻松地访问超过300个API以及定位信息。此外，Appcelerator提供针对特定行为或事件定制的统计。App的数据既可储存在云 端，也可储存在设备上。2、APICloudAPICloud是一款云端一体的移动开发平台，信仰云端一体的理念，重新定义 了移动应用开发。APICloud为

19、开发者从云和端两个方向提供API，简化移动应用 开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由云API和端 API两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的 全生命周期管理。3、PhoneGapPhoneGap是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、 黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript 等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。PhoneGap还提供Adobe AIR Ap

20、p以及在线的培训课程，帮助开发者了解原生API 并在他们自己的平台上开发移动App。4、KinveyKinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动 应用开发与销售的即取即用理念。Kinvey的中间层与数据层均托管在多个云服务提供 商处，包括Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四 种方式备份：Amazon EC2、Windows Azure、Rackspace 以及 Kinvey 自己的服务器， 假如其中一两个出现了故障，用户的数据依然安然无恙。5、ExMobiExMobi通过全面的数据集成技术和丰富的

21、跨平台客户端展现能力，将业务系统快速、 安全、高效的移植于移动终端。ExMobi从开发(IDE环境 集成(IT系统对接、云服务 打包(各个操作系统的应用打包、发布(应用的运行)管理(日志管理，更新管理)上提 供了一套完整的解决方案。并通过专业的培训和支撑渠道为开发者提供可持续的学习和交流 空间，扫除开发障碍。优势(1可跨平台，兼容iOS、Android、WP等多个平台(2 易用性，会Web开发即可转型App开发(3可利用成熟javascript框架(4 程序升级简单(5 维护难度低劣势(1 运行速度慢(2 不适合部分程序，如复杂的动画、3D功能、音频视频以及复杂的界面逻辑等(3 调用平台资源差

22、，功能受限平台实现(4 资源占用大，如内存、CPU、网络带宽等(5 调试难度大(6 不利于多人协作开发主流应用12306客户端、中国工商银行客户端等功能较单一的轻量级应用。发展趋势虽然跨平台复用代码是一个火热的话题，但是基于Html5的PhoneGap等Hybrid 框架没有被大多数人接受(运行速度慢、交互差是主要原因)，目前更多的方案是Web和 Native多View混合或用各种办法产生原生的UI界面(如BeeFramework、NativeScript、 ReactNative 等)。1.2.3单View混合型即在同一个View内，同时包括Native View和Web View。互相之间

23、是覆盖(层叠)的 关系。这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代 表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。主流框架基本没有特别成型的框架，主要为部分App做Web嵌套，完成广告、宣传等功能。Native 部分同 NativeApp。Web 部分同 WebApp。优势(1 能解决广告、宣传等模块变化过快问题，满足市场需求(2 有NativeApp的大部分优点劣势(1 开发难度大，Native和Web代码混合，技术难度基本等同Native开发(2 维护难度大等Native常见的缺点主流应用目前纯粹使用单View混合型的

24、App较少(部分App的部分页面会用这种开发模式)， 主要应用场景如App中添加广告、宣传等。WebAppWeb App指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。1.3.1 主流框架jQueryMobile、AngularJS 等。1.3.2优势（1）开发成本低（2）更新快（3）更新无需通知用户，不需要手动升级（4）能够跨多个平台和终端1.3.3劣势（1）临时性的入口（2）无法获取系统级别的通知，提醒，动效等等（3）用户留存率低（4）设计受限制诸多（5）体验较差1.3.4主流应用微信公众号/订阅号应用、支付宝

25、服务窗应用等轻量级应用。1.4四种主要开发模式对比Web App 网页应用Hybrid AppWeb主体型Hybrid App 多View混合型Native App 原生应用开发成本低中Native部分成本宥Web部分成本低高维护更新简单简单Native部分复杂Web部分简单复杂傩佥差中优优性能慢慢较快快原生界面模拟模拟部分模拟原生官方市场认可不认可认可认可认可安装不需要需要需要需要跨平台优优Web部分跨平台优差App级别轻量级轻量级超级App，支持App 中嵌套 MicroApp重量级适应性一般中，对复杂应用 支持较差优一般2.1 Web 和 Native 混合WindVane+Hybrid

26、+Native简介WindVane是阿里内部一种移动端Web和Native混合框架，主要为解决多平台统一 交互体验、动态部署（插件化）等问题，降低开发成本，提升前端开发效率。WindVane 是对Native代码的一种扩展，基础服务仍然以Native代码为主。框架实现可定制化UI组件资源本地缓存，资源预置打包服务Web与本地功能模块通信交互Web调用本地功能的JSBridge通信服务Hybrid API jstmall jstaobao jsal i pay jsEwindvane bridgealipay bridge -windvane nativealipay nativetaobao

27、native天猫客户端淘宝客户端支付宝钱包2.1.2 AppCan简介AppCan移动应用快速开发平台是基于HTML5技术的跨平台快速开发解决方案开发 者使用HTML5+CSS3+JavaScript技术可以快速的开发与本地应用相媲美的移动应用，同时 支持 iOS、Android、Symbian、Windows Phone 四大智能操作系统.AppCan-SDK 是 AppCan平台专为开发者提供的IDE开发环境，集成了:1、移动UI框架2、手机设备API 3、 调试模拟器4、离线打包服务5、应用云端管理使移动开发更加方便快捷.与Phonegap支持单一 webview使用div为单位开发移动

28、应用不同。AppCan支持多 窗口机制，让开发者可以像最传统的网页开发一样，通过页面链接的方式灵活的开发移动应 用。基于这种机制，开发者可以开发出大型的移动应用，而不是只能开发简易类型的移动应 用。AppCan提供强大的设备调用能力，电话、短信、相机、LBS、传感器、数据库等常用 的手机功能，开发者可以通过JS接口调用，轻松构建移动应用。AppCan是Web占主体型Native为辅的开发框架。框架实现HTML5 :支持HTML5开发，CSS3实现布局优化及交互提升原生体验：引入部分原生UI控件与交互支持（如Action Sheet等）开发工具：基于Eclipse的开发工具，集成UI控件与应用管

29、理 模拟器：提供应用全功能模拟器，方便开发调试UI框架：提供强大的UI框架，更加易于实现页面布局与父互设备API :支持各种手机设备调用，如电话、相机、传感器、定位等 本地打包：无需配置环境，无需编译，本地一键打包云端打包：提供云端打包服务，提供更加个性化的选择多窗口机制：常见应用只支持单一窗口，多窗口可以有效提高交互体验 插件机制：支持第三方原生插件，支持JS插件支付支持：相比国外中间件更具本土优势，Not Paypal but ZhiFuBao 代码加密：基于密钥的加密方式，无法破解，像混编一样保P htm l代码 统计分析：应用分平台安装数统计，应用启动和使用情况统计开放平台：更具本土优

30、势，已经对接Sina、QQ、百度等开放平台 技术支持：技术支持及时响应，重视开发者建议和反馈架构图生态结构：移动端框架:2.2跨平台原生应用BeeFramework简介Bee Framework是一款iOS快速开发框架允许开发者使用Objective-C和XML/CSS 来进行iPhone和iPad开发，由Gavin Kwoe和QFish开发并维护。其早期原型曾经被 应用在QQ空间和QQ游戏大厅等多款精品APP中。Bee Framework包含丰富的组件和 工具。Bee Framework解决了 iOS开发者长期困扰的各种问题，诸如:分层架构如何设计， 层与层之间消息传递与处理，网络操作及缓存

31、，异步及多线程，以及适配产品多变的UI布 局需求。框架实现代码注入借助于OC语言特性，Bee将核心逻辑注入到NSObject基类中去，在使用Bee时， 大多数情况下可以不必修改现有类继承关系，这样设计是把双刃剑，也有可能与您现有方法 名冲突。基于MVC 模型典型的MVC架构，清楚的分为View、Controller. Model三个层次，业务数据、业务逻辑、界面展现、交互逻辑完全分离。事件驱动对于Controllers Model均与状态无关（Stateless），因此由三种Event驱动:Message、Request、Notification。对于View ,我们抛弃掉了老旧的Delega

32、te （语言级实现方式）, 引入新概念UISignal （框架级实现方式）用来驱动界面交互事件或状态改变。UlSignalUISignal 拥有极强的路由能力，可以在UIView UIView UIViewController UINavigationController UIViewController 之间完成复杂且高效的的 UI 信号路 由。架构图Business ModelBusiness ControllerSkeletonCocoaTouchVendor librariesUI BindingThemeUILayoutYour appStandardTemplatesUI Quer

33、yUI EventUI AnimationUl ElementUI ContainerUI TemplateResourceNetworkCacheLocalizationFoundationNativeScript简介一个开源的框架，可以使用JavaScript开发跨平台、真正原生的iOS, Android和 Windows移动App。开发人员使用NativeScript提供的库来构建应用UI，其抽象了各种 原生平台之间的不同。框架实现NativeScript 运行时NativeScript 使用 JavaScript 虚拟机，在 Android 上采用 Google V8 JavaScri

34、pt 引 擎，iOS上采用JavaScriptCore引擎。通过JS解析引擎，在JavaScript和原生语言之间 的转换，建立跨平台桥梁。JavaScript虚拟机管理V8知道Android是什么 同理JavaScriptCore也知道iOS是什么)，因为NativeScript 在运行时进行了注入，因为V8拥有一堆让你配置JavaScript环境的API。在JavaScript 中您可以使用自定义的C+代码来分析CPU使用率，管理的JavaScript垃圾收集，等等 一大堆API面对这些API的是几个Context”类，可以让你操纵全局变量，从而有可能为 NativeScript注入一个全

35、局的android对象。这实际上使用了与Node.js的相同运行机制， 使全局API可用-如require() - NativeScript使用它注入可以让你访问本地代码的API。 JavaScriptCore的也有类似的机制。Metadata (元数据)对于NativeScript，反射是让NativeScript可以调用每个平台上的API的基石。因为 从性能角度来看重构这些API是很困难的，NativeScript会提前做掉这些，并在 Android/iOS预编绎过程中嵌入预先生成的元数据。调用本地代码NativeScript如何调用本机代码的答案就在于JavaScript虚拟机的API。

36、我们上次使 用V8的API是注入全局变量。这一次我们将着眼于在JavaScript回调中调用给定的C+ + 代码。例如，JavaScript 函数调用的代码 new android.text.format.Time()，V8 会产生一个 回调。也就是说V8有一个回调，让NativeScript拦截函数调用，然后用自定义的C +代 码执行一些动作，并返回一个新的结果。在Android中的情况下，NativeScript运行的C+代码不能直接访问Java API，如 android.text.format.Time。然而，Android 的 JNI，或 Java 本地接口，提供了 C+ 和 Jav

37、a之间的桥接能力，所以NativeScript使用JNI完成转发。在iOS中这个桥梁是不必要 的，因为C+代码可以直接调用Objective-C的API。结构图NativeScript ModulesReact Native简介React Native使你能够使用基于JavaScript和React 一致的开发体验在本地平台 上构建世界一流的应用程序体验。React Native把重点放在所有开发人员关心的平台的开 发效率上开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为React Native投资。框架

38、实现原生的iOS组件可使用标准平台组件，比如iOS平台上的UITabBar和UINavigationController。 这可以让你的应用程序拥有和原生平台一致的外观和体验，并保持较高的品质。使用相应的 React组件，如iOS标签栏和iOS导航器，这些组件可以轻松并入你的应用程序中。异步执行JavaScript应用代码和原生平台之间所有的操作都是异步执行，并且原生模块也可以 使用额外线程。这意味着我们可以解码主线程图像，并将其在后台保存至磁盘，在不阻塞UI 的情况下进行文本和布局的估量计算，等等。因此，React Native应用程序的流畅度和响 应性都非常好。通信也是完全可序列化的，当运

39、行完整的应用程序时，这允许我们使用 Chrome Developer Tools来调试JavaScript，或者在模拟器中，或者在真机上。触摸处理iOS有一个非常强大的系统称为Responder Chain,可以用来响应复杂视图层级中的 事件，但是在Web中并没有类似功能的工具。React Native可实现类似的响应系统并提 供高水平的组件，比如TouchableHighlight,无需额外配置即可与滚动视图和其他元素适 度整合。弹性框和样式布局视图应该是简单的，所以我们将Web平台上的弹性框模块引入了 React Native。 弹性框可用来搭建最常用的UI布局比如代用边缘和填充的堆叠和嵌

40、入。React Native还 支持常见的Web样式，比如fontWeight和StyleSheet抽象，它们提供了一种优化机 制来宣称你所有的样式和布局在组件中的应用是正确的，且组件把它们应用到了内网中。PolyfillsReact Native的重点是改变视图代码编写的方式。接下来，我们注意网络中普遍的并 把那些API放在适当的地方。可以使用npm安装JavaScript库，这些库用于融入到 React Native 中的顶级功能比如 XMLHttpRequest，window.requestAnimationFrame 及navigator.geolocation。我们正在扩大可用的API，并致力于为开源社区做出贡献。可扩展性使用React Native无需编写一行原生代码即可创建出一款不错的应用程序，并且 React Native可通过自定义原生视图和模块来进行扩展-也就是说你可以重用你已经构建 的任何内容，并且可导入和使用你最喜欢的原生库。