《Hybrid App开发基础》由会员分享，可在线阅读，更多相关《Hybrid App开发基础（53页珍藏版）》请在金锄头文库上搜索。
1、第第1717章章 Hybrid AppHybrid App开开 发基础发基础目目 录录17.1 Hybrid App开发介绍17.2 HTML517.3 Sencha Touch17.1 Hybrid App17.1 Hybrid App开发介绍开发介绍17.1.1 移动开发类型 App，通过浏览器访问； Native App，安装到移动设备； Hybrid App，它虽然看上去是一个Native App, 安装到移动设备上，但只有一个WebView，里面访问的是一个Web App。17.1.2 Native AppNative App是一种基于智能手机本地操作系统如IOS、Android、W
2、P并使用原生程式编写运行的第三方应用程序。Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，App store培养了一种比较好的用户付费模式，所以在Apple的生态圈里，开发者的盈利模式是一种明朗状态，其他market也在往这条路上靠拢。（1 1）Native AppNative App优势优势提供最佳的用户体验，最优质的用户界面，最华丽的交互针对不同平台提供不同体验可节省带宽成本可访问本
3、地资源盈利模式明朗（2 2）Native AppNative App劣势劣势移植到不同平台上比较麻烦维持多个版本的成本比较高需要通过store或market的确认盈利需要与第三方分成原生开发模式应用商店安装包格式开发工具开发包语言平台Android Market.sdkEclipseAndroid SDKJavaAndroidApp Store.ipaxCodeios SDKObjective-CiosWP Market.xapVisual StudioSilverlight/Metro.Net FrameworkWindows Phone原生模式原生开发模式的优劣APP17.1.2 Web
4、AppWeb App是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。移动Web在桌面Web的基础上添加了新的MIME类型、标记语言、文档格式和最佳实践，为小尺寸屏幕提供优化的Web内容，并可解决移动设备上的资源限制、Web浏览器可用性差 等问题。移动端移动端Web AppWeb App和和WAPWAP有什么不同？有什么不同？最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示，包括文字、媒体文件等。而Web App更侧重“功能”，是使用网页技术实现的App。总的来说，Web App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。Web
5、 AppWeb App的优点：的优点：使用W3C标准的HTML语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML来开发的Web App在投入上会大大的低于传统的Native App。基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，比如基于位置服务的LBS( location based service) 、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。移动应用的迭代周期较短，传统的Native App需要频繁的重新下载与升级。而Web App则
6、无需用户下载，并且和传统网站一样可以动态升级。Web App有App的特性，更有Web的特性。每一个Native App在当前的用户使用场景下是相对孤立的，而Web App则可以像传统互联网网页那样相互链接，从一个Web App直接跳转到另外一个Web App。这无论是从用户的使用体验层面还是从应用之间的数据传输来看都是非常不错的选择。传统桌面传统桌面WebWeb应用程序应用程序在传统桌面Web应用程序中,大多数用户行为都会触发一个HTTP请求。然后，由服务器进行一些处理并且把结果返回到用户。在服务器处理过程中，用户只能等待！从技术的角度来看，Web应用程序的这种“开始-停止-开始“特征并没有
7、什么不好的地方，但是这并没有从用户交互的角度来解决问题（因为几乎所有的用户交互都要导致到服务器的处理，而在服务器进行这一处理时，用户只能等待！）。交互式移动交互式移动WebWeb应用程序的基础应用程序的基础Android、iPhone、Nokia Series 60、Windows Mobile和BlackBerry设备中的智能移动浏览器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可选择添加的大量客户端缓存和CSS扩展功能构成了交互式移动Web应用程序的基础。AJAXAJAX引擎引擎移动Web通过使用AJAX引擎，解决了传统桌面Web应用数据流量大、速度慢等问题。在
8、会话的开始,AJAX应用程序加载AJAX引擎。AJAX引擎以JavaScript开发（作为一个JavaScript库）并处于一个隐藏帧中。用户与AJAX引擎进行交互而代替原来的与web服务器交互。如果用户交互并要求到服务器的处理，那么，该AJAX引擎自己来处理当前交互。当用户交互需要一些来自服务器的数据时,AJAX引擎将进行异步地调用(经由XML/XMLHttpRequest API)而不会打断用户的“思路“。AJAX AJAX是是“ “异步的异步的“ “AJAX是“异步的“，其含义是指，AJAX引擎与服务器的通讯以及与用户交互是异步的。因此,用户能够得到一种“无缝的“体验(也就是说，用户不必
9、等待)。当前，AJAX背后存在一种“动力“-开发人员已经熟悉对于这种技术支持的背景，并且所有组成AJAX的技术都已经成熟并稳定起来。AJAX成为Web上许多新型应用程序的基础，例如Google suggest,Google Maps,还有Flickr和Amazon的A的部分实现。移动Web开发模式 Web Application App：应用程序 完成某项或者几项任务 满足某些需求 Web：构建于Web技术之上 HTML/CSS/JS 服务端移动 AP移动Web开发 模式优势移动Web开发模式的优势学习成本低、易于上手轻量级应用突破渠道限制(AppStore)跨平台，比原生更易于适配和浏览器轻
10、耦合，应用快速发布移动Web开发模式的劣势 性能低 功能不能完全满 足，用户体验不 好力 缺乏设备访问 能17.1.4 Hybrid AppHybird(混合应用)模式Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操 作系统分发，用户需要安装使用的移动应用。NativeAPPWebAPPHybirdAPP就是所谓的原生应用.指的是 用平台特定的开发语言所开 发的应用主要是采用统一的标准的 HTML,JavaScript.CSS等web 技术开发.通过不同平台的浏 览器访问来实现跨平台.为了弥补如上两者开发模式的 缺陷的产物. 可以安装，使用web开发 两种模式(Nat
11、ive主体型/web主 体型)移动应用分类为什么使用Hybird-用户体验和开发成本分析开发成本和时间Mobile WebsiteWebAppHybirdAppNative App用 户 体 验特性NativeAppWebAppHybirdApp开发语言原生语言 Objective-C、 Java、.net网页语言 HTML5+JS+CS S3网页或原生 语言跨平台性低高高设备访问 能 力高低高开发难度高低低高级图形高中中应用体验好差较好安装体验高 从应用商店 安装中 通过移动浏 览器安装高 从应用商店 安装升级灵活性低 总通过应用 商店升级高中 常通过应用 商店升级向后兼容差好好为什么使用H
12、ybird-总结未来趋势未来趋势当Web的体验和Native的体验逐渐趋近的时候，人们更愿意把精力花在内容获取上，而不是软件交互上，但是现阶段的交互体验，恰恰是影响人们获取内容的主要短板。所以，趋势摆在那里，却无法预测这个时间差。就跟电脑端的应用一样，虽然现在Web化的趋势已经非常明显了，但是还是无法取代本机安装的一些工具类的、游戏类的应用，在Web技术没有达到本地应用的效率和体验之前，Web是无法颠覆Native的。小结小结总体上，Web只是作为设计者和开发者所期待的一种理想化结果，开发成本低、轻松跨平 台、迭代更新快，但是显然，现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Nat
13、ive。Web之于，只是一种趋势。在这个也许会非常久 的过渡阶段，对复杂产品来说，Native App + Web App也许是个不错的解决方案。Web App（网页应用）Hybrid App（混合应用）Native App（原生应用）开发成本低中高维护更新简单简单复杂体验差优优Store或market认可不认可认可认可安装不需要需要需要跨平台优优差17.1.6 常见移动Web开发框架1. Sencha TouchSencha Touch 是世界上第一个基于 HTML5 的移动 Web 开发框架，支持最新的 HTML5 和 CSS3 标准，全面兼容 Android 和 Apple iOS 设备
14、，提供了丰富的 WEB UI 组件，可以快速的开发出运行于移动终端的应用程序。2. jQuery Mobile 2. jQuery MobilejQuery Mobile 框架把“write less, do more”精神提升到更高的层次。jQuery 移动框架可以帮助设计一个可运行于所有流行智能手机和平板平台的应用程序，而不需要为每种移动终端都开发一个特别的版本。 3. jQTouch3. jQTouchjQTouch 是一款 jQuery 的插件，用于手机上实现动画、列表导航、默认应用样式等各种常见UI效果。支持 iPhone、Android 等手机。其他其他4. The M Proje
15、ct5. DHTMLX Touch HTML5 JavaScript Framework for Mobile6. Web App.Net7. Wijmo jQuery UI Widgets8. 960 Grid on jQuery-Mobile9. SproutCore HTML5 Application Framework10. NimbleKit17.1.7 常见Hybrid App平台Hybrid App开发，现阶段主流的平台包括PhoneGap，AppCan，appMobi，Titanium等，它们基于webkit开源内核，使用HTML5 标准开发，适配机型简单，支持开发者自定义插件
16、，并能很好的应用于商业，教育，娱乐等行业，成为移动开发者的首选开发平台。17.2 HTML517.2 HTML5HTML5HTML5的新特性的新特性 定时媒体播放HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。 实时二维绘图Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。 对对本地离线线存储储的更好的支持17.2.1 HTML517.2.1 HTML5介绍介绍HTML5HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。 HTML 5有两大特点： 首先，强化了 Web 网页的表现性能； 其次，追加了本地
