HybridApp开发基础和全面介绍

1、Hybrid App开发基础和全面介绍目 录17.1 Hybrid App开发介绍17.2 HTML517.3 Sencha Touch17.1 Hybrid App开发介绍17.1.1 移动开发类型 App，通过浏览器访问；Native App，安装到移动设备；Hybrid App，它虽然看上去是一个Native App, 安装到移动设备上，但只有一个WebView，里面访问的是一个Web App。17.1.2 Native App Native App是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序。 Native App因为位于平台层上方

2、，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，App store培养了一种比较好的用户付费模式，所以在Apple的生态圈里，开发者的盈利模式是一种明朗状态，其他market也在往这条路上靠拢。（1）Native App优势提供最佳的用户体验，最优质的用户界面，最华丽的交互针对不同平台提供不同体验可节省带宽成本可访问本地资源盈利模式明朗（2）Native App劣势移植到不同平台上比较麻烦维持多个版本的成本比较高需要通过st

3、ore或market的确认盈利需要与第三方分成原生开发模式应用商店安装包格式开发工具开发包语言平台Android Market.sdkEclipseAndroid SDKJavaAndroidApp Store.ipaxCodeios SDKObjective-CiosWP Market.xapVisual StudioSilverlight/Metro.Net FrameworkWindows Phone原生模式原生开发模式的优劣APP17.1.2 Web App Web App是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。 移动Web在桌面Web的基础上添加

4、了新的MIME类型、标记语言、文档格式和最佳实践，为小尺寸屏幕提供优化的Web内容，并可解决移动设备上的资源限制、Web浏览器可用性差 等问题。 移动端Web App和WAP有什么不同？ 最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示，包括文字、媒体文件等。而Web App更侧重“功能”，是使用网页技术实现的App。总的来说，Web App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。Web App的优点： 使用W3C标准的HTML语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML来开发的W

5、eb App在投入上会大大的低于传统的Native App。 基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，比如基于位置服务的LBS( location based service) 、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。 移动应用的迭代周期较短，传统的Native App需要频繁的重新下载与升级。而Web App则无需用户下载，并且和传统网站一样可以动态升级。 Web App有App的特性，更有Web的特性。每一个Native App在当前的用户使用场景下是相对孤立的，而Web App则可以像传

6、统互联网网页那样相互链接，从一个Web App直接跳转到另外一个Web App。这无论是从用户的使用体验层面还是从应用之间的数据传输来看都是非常不错的选择。传统桌面Web应用程序 在传统桌面Web应用程序中,大多数用户行为都会触发一个HTTP请求。然后，由服务器进行一些处理并且把结果返回到用户。在服务器处理过程中，用户只能等待！ 从技术的角度来看，Web应用程序的这种开始-停止-开始特征并没有什么不好的地方，但是这并没有从用户交互的角度来解决问题（因为几乎所有的用户交互都要导致到服务器的处理，而在服务器进行这一处理时，用户只能等待！）。交互式移动Web应用程序的基础 Android、iPhon

7、e、Nokia Series 60、Windows Mobile和BlackBerry设备中的智能移动浏览器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可选择添加的大量客户端缓存和CSS扩展功能构成了交互式移动Web应用程序的基础。AJAX引擎 移动Web通过使用AJAX引擎，解决了传统桌面Web应用数据流量大、速度慢等问题。在会话的开始,AJAX应用程序加载AJAX引擎。AJAX引擎以JavaScript开发（作为一个JavaScript库）并处于一个隐藏帧中。 用户与AJAX引擎进行交互而代替原来的与web服务器交互。如果用户交互并要求到服务器的处理，那么，该A

8、JAX引擎自己来处理当前交互。当用户交互需要一些来自服务器的数据时,AJAX引擎将进行异步地调用(经由XML/XMLHttpRequest API)而不会打断用户的思路。 AJAX是异步的 AJAX是异步的，其含义是指，AJAX引擎与服务器的通讯以及与用户交互是异步的。因此,用户能够得到一种无缝的体验(也就是说，用户不必等待)。 当前，AJAX背后存在一种动力-开发人员已经熟悉对于这种技术支持的背景，并且所有组成AJAX的技术都已经成熟并稳定起来。AJAX成为Web上许多新型应用程序的基础，例如Google suggest,Google Maps,还有Flickr和Amazon的的部分实现。移

9、动Web开发模式 Web Application App：应用程序 完成某项或者几项任务 满足某些需求 Web：构建于Web技术之上 HTML/CSS/JS 服务端移动AP移动Web开发模式优势移动Web开发模式的优势学习成本低、易于上手轻量级应用突破渠道限制(AppStore)跨平台，比原生更易于适配和浏览器轻耦合，应用快速发布移动Web开发模式的劣势 性能低 功能不能完全满足，用户体验不好力 缺乏设备访问能17.1.4 Hybrid App Hybird(混合应用)模式Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。Nati

10、veAPPWebAPPHybirdAPP就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发.通过不同平台的浏览器访问来实现跨平台.为了弥补如上两者开发模式的缺陷的产物.可以安装，使用web开发两种模式(Native主体型/web主体型)移动应用分类为什么使用Hybird-用户体验和开发成本分析开发成本和时间MobileWebsiteWebAppHybirdAppNativeApp用户体验特性NativeAppWebAppHybirdApp开发语言原生语言Objective-C、Java、.net网页语言HTML

11、5+JS+CSS3网页或原生语言跨平台性低高高设备访问能力高低高开发难度高低低高级图形高中中应用体验好差较好安装体验高从应用商店安装中通过移动浏览器安装高从应用商店安装升级灵活性低总通过应用商店升级高中常通过应用商店升级向后兼容差好好为什么使用Hybird-总结未来趋势 当Web的体验和Native的体验逐渐趋近的时候，人们更愿意把精力花在内容获取上，而不是软件交互上，但是现阶段的交互体验，恰恰是影响人们获取内容的主要短板。所以，趋势摆在那里，却无法预测这个时间差。 就跟电脑端的应用一样，虽然现在Web化的趋势已经非常明显了，但是还是无法取代本机安装的一些工具类的、游戏类的应用，在Web技术没

12、有达到本地应用的效率和体验之前，Web是无法颠覆Native的。小结 总体上，Web只是作为设计者和开发者所期待的一种理想化结果，开发成本低、轻松跨平 台、迭代更新快，但是显然，现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Native。Web之于，只是一种趋势。在这个也许会非常久 的过渡阶段，对复杂产品来说，Native App + Web App也许是个不错的解决方案。Web App（网页应用）Hybrid App（混合应用）Native App（原生应用）开发成本低中高维护更新简单简单复杂体验差优优Store或market认可不认可认可认可安装不需要需要需要跨平台优优差17.1

13、.6 常见移动Web开发框架1. Sencha TouchSencha Touch 是世界上第一个基于 HTML5 的移动 Web 开发框架，支持最新的 HTML5 和 CSS3 标准，全面兼容 Android 和 Apple iOS 设备，提供了丰富的 WEB UI 组件，可以快速的开发出运行于移动终端的应用程序。 2. jQuery Mobile jQuery Mobile 框架把“write less, do more”精神提升到更高的层次。jQuery 移动框架可以帮助设计一个可运行于所有流行智能手机和平板平台的应用程序，而不需要为每种移动终端都开发一个特别的版本。 3. jQTouc

14、h jQTouch 是一款 jQuery 的插件，用于手机上实现动画、列表导航、默认应用样式等各种常见UI效果。支持 iPhone、Android 等手机。其他4. The M Project5. DHTMLX Touch HTML5 JavaScript Framework for Mobile7. Wijmo jQuery UI Widgets8. 960 Grid on jQuery-Mobile9. SproutCore HTML5 Application Framework10. NimbleKit17.1.7 常见Hybrid App平台 Hybrid App开发，现阶段主流的平台

15、包括PhoneGap，AppCan，appMobi，Titanium等，它们基于webkit开源内核，使用HTML5 标准开发，适配机型简单，支持开发者自定义插件，并能很好的应用于商业，教育，娱乐等行业，成为移动开发者的首选开发平台。17.2 HTML5HTML5的新特性定时媒体播放HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。实时二维绘图Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。对本地离线存储的更好的支持17.2.1 HTML5介绍 HTML5是用于取代1999年所制定的

16、 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。 HTML 5有两大特点：首先，强化了 Web 网页的表现性能；其次，追加了本地数据库等Web应用的功能。1. 语义特性 HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。 新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search。2. 本地

17、存储特性 基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。 3. 设备兼容特性 从地理位置（Geolocation）功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。 4. 连接特性 更有效的连接工作效率，使得基于页面的实时聊天，更快

18、速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助实现服务器将数据“推送”到客户端的功能。5. 网页多媒体特性 支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。 三维、图形及特效特性（Class: 3D, Graphics & Effects） 基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。 6. 性能与集成特性 没有用户会永远等待的LoadingHTML5会通

19、过XMLHttpRequest2等技术，帮助的Web应用和网站在多样化的环境中更快速的工作。XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接

20、收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。7. CSS3特性 在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。其他17.2.2 语义特性17.2.3 本地存储17.2.4 WebSockets17.3 Sencha Touch17.3.1 Sencha Touch概要 1. Sencha Touch简介 Sencha Touch是专门为移动设备开发应用的Javascript框架。通过Sencha Touch可以

21、创建非常像native app的Web app，用户界面组件和数据管理全部基于HTML5和CSS3的Web标准，全面兼容Android和Apple iOSSencha Touch Sencha是目前为止所发现的最强大的应用于移动平台的框架。它将自己定位为框架(Framework)而不是类库(Library)，也可以充分印证这一点。相信随着Sencha的出现，移动平台的Web App用户体验设计会得到提升，同时也会对HTML 5和CSS3在移动平台上的普及推广产生很大的促进作用。可以预见，随着HTML 5愈加强大的功能，未来的移动应用将会逐渐步入Web App时代。2. Sencha特性 Sencha Touch可以让的Web