1、移动端架构分析目录移动端架构分析 .11 移动端常见开发模式 .51.1 纯 NATIVE APP.51.1.1 主流框架 .51.1.2 优势 .61.1.3 劣势 .61.1.4 主流应用 .61.2 HYBRID APP .61.2.1 多 View混合型 .71.2.1.1 主流框架 .71.2.1.2 优势 .71.2.1.3 劣势 .71.2.1.4 主流应用 .71.2.1.5 发展趋势 .71.2.2 Web主体型 .81.2.2.1 主流框架平台 .81.2.2.2 优势 .91.2.2.3 劣势 .91.2.2.4 主流应用 .101.2.2.5 发展趋势 .101.2.3
2、 单 View混合型 .101.2.3.1 主流框架 .101.2.3.2 优势 .101.2.3.3 劣势 .101.2.3.4 主流应用 .101.3 WEB APP .101.3.1 主流框架 .111.3.2 优势 .111.3.3 劣势 .111.3.4 主流应用 .111.4 四种主要开发模式对比 .112 移动前端主流框架分析 .122.1 WEB和 NATIVE混合 .122.1.1 WindVane+Hybrid+Native .122.1.1.1 简介 .122.1.1.2 框架实现 .122.1.1.3 架构图 .132.1.2 AppCan.132.1.2.1 简介 .
3、132.1.2.2 框架实现 .132.1.2.3 架构图 .142.2 跨平台原生应用 .152.2.1 BeeFramework.152.2.1.1 简介 .152.2.1.2 框架实现 .152.2.1.3 架构图 .162.2.2 Native Script.172.2.2.1 简介 .172.2.2.2 框架实现 .172.2.2.3 结构图 .182.2.3 React Native.182.2.3.1 简介 .182.2.3.2 框架实现 .182.2.3.3 架构图 .203 数梦移动端开发框架选择 .203.1 开发模式选择 .203.1.1 为什么不选择 Native .2
4、03.1.2 玩什么不选择 WebApp或 Web主体型 Hybird .213.1.3 选择多页面混合型 Hybird .213.2 选择类 WINDVANE框架 .213.2.1 玩什么不选择 React Native .213.2.2 玩什么选择类 WindVane框架 .211 移动端常见开发模式目前主流应用程序大体分为三类：Native App 、Hybrid App、Web App。1.1 纯 Native AppNative APP 指的是使用原生程式编写运行的第三方应用程序，一般依托于操作系统如 iOS、Android、WP，有很强的交互，是一个完整的 App，可拓展性强。需要
5、用户下载安装使用。也叫本地 app。Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，AppStore 培养了一种比较好的用户付费模式，所以在 Apple的生态圈里，开发者的盈利模式是一种明朗状态，其他 market也在往这条路上靠拢。1.1.1 主流框架iOS：（1） 、 Cocoa 环境+Foundation 和 UIKit 框架（2） 、使用 Objective-C 和 Swift
6、做为主要开发语言（兼容 C/C+）Android：（1） 、 Java虚拟机环境（2） 、使用 Java 作为主要开发语言（支持 C/C+）WindowsPhone：（1） 、 Windows RunTime 框架（WP10）（2） 、使用原生 C+、C# 和 Silverlight 做为主要开发语言1.1.2 优势（1） 、打造完美的用户体验（2） 、性能稳定（3） 、操作速度快，上手流畅（4） 、访问本地资源（通讯录，相册）（5） 、设计出色的动效，转场（6） 、拥有系统级别的贴心通知或提醒（7） 、用户留存率高1.1.3 劣势（1） 、 开发成本高，可移植性差，需要维护 iOS、Andr
7、oid 、WP 等多个平台（不同平台有不同的开发语言和界面适配）（2） 、维护成 本高（例如一款 App已更新至 V5版本，但仍有用户在使用 V2， V3， V4版本，需要更多的开发人员维护之前的版本）（3） 、更新缓慢，根据不同平台，提交审核上线 等等不同的流程，需要经过的流程较复杂1.1.4 主流应用够快云库、微信电话本、美图秀秀等中量级应用。1.2 Hybrid AppHybrid APP指的是半原生半 Web的混合类 App。需要下载安装，部分页面看上去类似 Native App，但只有很少的 UI Web View，访问的内容是 Web 。Hybrid App主要以 JS+Nativ
8、e两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。总体特性更接近 Native App但是和 Web App区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比 Native App要小很多。因此说，Hybrid App兼具了 Native App的所有优势，也兼具了 Web App使用 HTML5跨平台开发低成本的优势。Hybrid App按网页语言与程序语言的混合，通常分为三种类型：多 View混合型，单 View混合型， We
9、b主体型。1.2.1 多 View 混合型即 Native View 和 Web View 独立展示，Native View 与 WebView 交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候，将 WebView 当成一个独立的View(Activity) 运行起来，在 WebView 内完成相关的展示操作。这种移动应用主体通常是 Native App，Web 技术只是起到补充作用。开发难度和 Native App 基本相当。1.2.1.1 主流框架Native部分使用操作系统原生框架+JSBridge。Web融合部分国内阿里系使用最广的框架 WindVane+HybridAPI等（
10、后续章节详细介绍） 。1.2.1.2 优势（1） 、高效、扩展性强、支持多团队并行开发（2） 、 衔接 Android/iOS原生导航交互，完美的用户体验（3） 、业务实现更灵活，复杂业务可通过 Native 实现，频繁变化或简单业务通过Web实现，更好的满足移动端业务多样性、快速迭代要求（4） 、轻量级的框架，框架侵入性弱，各个业务高度独立，第三方业务快速接入（5） 、使用 JS Bridge 来实现 HTML5页面与原生框架的数据交互：JSNative，性能和安全性更佳 （6） 、扩展丰富，能实现超级 App1.2.1.3 劣势（1） 、技术要求高，需要开发人员同时懂 Native和 We
11、bApp开发（2） 、重量级架构，架构搭建需要较长时间（3） 、开源社区相关框架少，成熟框架如 WindVane等不开源1.2.1.4 主流应用目前使用最常用的开发模式，市场上能见到的超级 App 基本都是用这种开发模式，如微信、支付宝、淘宝等；其他如钉钉、新闻客户端等移动端 App1.2.1.5 发展趋势2014-2015最新发展趋势，同时在 Web和 Native融合的基础上加入 ReactNative或 NativeScript等跨平台构建原生应用框架（见后续介绍） 。1.2.2 Web 主体型即移动应用的主体是 Web View，主要以网页语言编写，穿插 Native功能的 Hybri
12、d App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web 主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。国外的 appMobi、PhoneGap 和国内的WeX5、 AppCan和 Rexsee都属于 Web主体型移动应用中间件。其中 Rexsee不支持跨平台开发。appMobi 和 PhoneGap除基础的底层能力更多是通过插件（ Plugins）扩展的机制实现 Hybrid。AppCan 除了插件机制，还提供了大量的单 View混合型的接口来完善和弥补 Web主体型 Hybrid App体验差的问题，
13、接近 Native App的体验。而 WeX5则在揉合 PhoneGap和 Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备 Native App对本地资源的调用能力，性能体验也不输原生；WeX5 所开发出来的 app具备完全的跨端运行能力，可以无需任何修改直接运行在各种前端环境上。1.2.2.1 主流框架平台1、AppceleratorAppcelerator的 Titanium开发平台使开发者可以通过HTML、 PHP、 JavaScript、 Ruby、Python 等 Web编程语言开发手机、平板和桌面的原生 App。其优势在于它可以让用户轻松地访问超过 3
14、00个 API以及定位信息。此外，Appcelerator 提供针对特定行为或事件定制的统计。App 的数据既可储存在云端，也可储存在设备上。2、APICloudAPICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud 为开发者从“云”和“端”两个方向提供 API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到 7天。 APICloud由“云 API”和“端 API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。3、PhoneGapPhoneGap是一个免费且开源的开发环境，使开发者
15、可以开发出在Android、Palm 、黑莓、iPhone 、iTouch 及 iPad等设备上运行的 App。其使用的是HTML和 JavaScript等标准的 Web开发语言。开发者使用 PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。PhoneGap还提供 Adobe AIR App以及在线的培训课程，帮助开发者了解原生 API并在他们自己的平台上开发移动 App。4、KinveyKinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey 强调加速移动应用开发与销售的“即取即用”理念。Kinvey 的中间层与数据层均托管在多个云服务提供商处，包括
16、 Rackspace、Amazon 与 Microsoft。所有通过 Kinvey存储的数据都会有四种方式备份：Amazon EC2、Windows Azure、Rackspace 以及 Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。5、ExMobiExMobi通过全面的数据集成技术和丰富的跨平台客户端展现能力，将业务系统快速、安全、高效的移植于移动终端。ExMobi 从开发（IDE 环境） 、集成（IT 系统对接、云服务）、打包（各个操作系统的应用打包） 、发布（应用的运行） 、管理（日志管理，更新管理）上提供了一套完整的解决方案。并通过专业的培训和支撑渠道为开
17、发者提供可持续的学习和交流空间，扫除开发障碍。1.2.2.2 优势（1） 、可跨平台，兼容 iOS、Android、WP 等多个平台（2） 、易用性，会 Web开发即可转型 App开发（3） 、可利用成熟 javascript框架（4） 、程序升级简单（5） 、维护难度低1.2.2.3 劣势（1） 、 运行速度慢（2） 、不适合部分程序，如复杂的动画、3D 功能、音频视频以及复杂的界面逻辑等（3） 、调用平台资源差，功能受限平台实现（4） 、资源占用大，如内存、CPU、网络带宽等（5） 、调试难度大（6） 、不利于多人协作开发1.2.2.4 主流应用12306客户端、中国工商银行客户端等功能较
18、单一的轻量级应用。1.2.2.5 发展趋势虽然跨平台复用代码是一个火热的话题，但是基于 Html5 的 PhoneGap等 Hybrid框架没有被大多数人接受（运行速度慢、交互差是主要原因） ，目前更多的方案是 Web和Native多 View混合或用各种办法产生原生的 UI 界面（如BeeFramework、NativeScript 、ReactNative 等） 。1.2.3 单 View 混合型即在同一个 View内，同时包括 Native View和 Web View。互相之间是覆盖(层叠)的关系。这种 Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代表的
19、单 View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。1.2.3.1 主流框架基本没有特别成型的框架，主要为部分 App做 Web嵌套，完成广告、宣传等功能。Native部分同 NativeApp。Web部分同 WebApp。1.2.3.2 优势（1） 、能解决广告、宣传等模块变化过快问题，满足市场需求（2） 、有 NativeApp的大部分优点1.2.3.3 劣势（1） 、开发难度大，Native 和 Web 代码混合，技术难度基本等同 Native开发（2） 、维护难度大等 Native常见的缺点1.2.3.4 主流应用目前纯粹使用单 View混合型的 App较少（部分 App 的部分页面会用这种开发模式） ，主要应用场景如 App中添加广告、宣传等。1.3 Web AppWeb App 指采用 Html5语言写出的 App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。
