第17章 Hybrid App开发基础

第17章HybridApp开发基础目录17.1HybridApp开发介绍17.2HTML517.3SenchaTouch17.1HybridApp开发介绍17.1.1移动开发类型

App，通过浏览器访问；NativeApp，安装到移动设备；HybridApp，它虽然看上去是一个NativeApp,安装到移动设备上，但只有一个WebView，里面访问的是一个WebApp。17.1.2NativeApp

NativeApp是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序。NativeApp因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，Appstore培养了一种比较好的用户付费模式，所以在Apple的生态圈里，开发者的盈利模式是一种明朗状态，其他market也在往这条路上靠拢。（1）NativeApp优势提供最佳的用户体验，最优质的用户界面，最华丽的交互针对不同平台提供不同体验可节省带宽成本可访问本地资源盈利模式明朗（2）NativeApp劣势移植到不同平台上比较麻烦维持多个版本的成本比较高需要通过store或market的确认盈利需要与第三方分成原生开发模式

应用商店安装包格式

开发工具

开发包

语言

平台Android

Market

.sdk

Eclipse

Android

SDK

Java

Android

App

Store

.ipa

xCode

ios

SDKObjective-C

ios

WP

Market

.xap

Visual

StudioSilverlight/Metro

.Net

FrameworkWindows

Phone原生模式原生开发模式的优劣APP17.1.2WebApp

WebApp是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。移动Web在桌面Web的基础上添加了新的MIME类型、标记语言、文档格式和最佳实践，为小尺寸屏幕提供优化的Web内容，并可解决移动设备上的资源限制、Web浏览器可用性差等问题。移动端WebApp和WAP有什么不同？最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示，包括文字、媒体文件等。而WebApp更侧重“功能”，是使用网页技术实现的App。总的来说，WebApp就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。WebApp的优点：使用W3C标准的HTML语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML来开发的WebApp在投入上会大大的低于传统的NativeApp。基于当下开始普及流行的HTML5，WebApp可以实现很多原本NativeApp才可以实现的功能，比如基于位置服务的LBS(locationbasedservice)、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。移动应用的迭代周期较短，传统的NativeApp需要频繁的重新下载与升级。而WebApp则无需用户下载，并且和传统网站一样可以动态升级。WebApp有App的特性，更有Web的特性。每一个NativeApp在当前的用户使用场景下是相对孤立的，而WebApp则可以像传统互联网网页那样相互链接，从一个WebApp直接跳转到另外一个WebApp。这无论是从用户的使用体验层面还是从应用之间的数据传输来看都是非常不错的选择。传统桌面Web应用程序在传统桌面Web应用程序中,大多数用户行为都会触发一个HTTP请求。然后，由服务器进行一些处理并且把结果返回到用户。在服务器处理过程中，用户只能等待！

从技术的角度来看，Web应用程序的这种"开始-停止-开始"特征并没有什么不好的地方，但是这并没有从用户交互的角度来解决问题（因为几乎所有的用户交互都要导致到服务器的处理，而在服务器进行这一处理时，用户只能等待！）。交互式移动Web应用程序的基础Android、iPhone、NokiaSeries60、WindowsMobile和BlackBerry设备中的智能移动浏览器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可选择添加的大量客户端缓存和CSS扩展功能构成了交互式移动Web应用程序的基础。AJAX引擎移动Web通过使用AJAX引擎，解决了传统桌面Web应用数据流量大、速度慢等问题。在会话的开始,AJAX应用程序加载AJAX引擎。AJAX引擎以JavaScript开发（作为一个JavaScript库）并处于一个隐藏帧中。

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

Web

Application

App：应用程序

完成某项或者几项任务

满足某些需求

Web：构建于Web技术之上

HTML/CSS/JS

服务端

移动

AP移动Web开发

模式优势移动Web开发模式的优势

学习成本低、易于上手

轻量级应用突破渠道限制(AppStore)

跨平台，比原生更易于适配和浏览器轻耦合，应用快速发布移动Web开发模式的劣势•

性能低•

功能不能完全满足，用户体验不好力•

缺乏设备访问能17.1.4HybridApp

Hybird(混合应用)模式Hybrid

App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。NativeAPPWebAPPHybirdAPP就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发.通过不同平台的浏览器访问来实现跨平台.为了弥补如上两者开发模式的缺陷的产物.可以安装，使用web开发两种模式(Native主体型/web主体型)移动应用分类为什么使用Hybird-用户体验和开发成本分析开发成本和时间MobileWebsiteWebAppHybirdAppNativeApp用户体验特性NativeAppWebAppHybirdApp开发语言原生语言Objective-C、Java、.net网页语言HTML5+JS+CSS3网页或原生语言跨平台性低高高设备访问能力高低高开发难度高低低高级图形高中中应用体验好差较好安装体验高从应用商店安装中通过移动浏览器安装高从应用商店安装升级灵活性低总通过应用商店升级高中常通过应用商店升级向后兼容差好好为什么使用Hybird-总结未来趋势当Web的体验和Native的体验逐渐趋近的时候，人们更愿意把精力花在内容获取上，而不是软件交互上，但是现阶段的交互体验，恰恰是影响人们获取内容的主要短板。所以，趋势摆在那里，却无法预测这个时间差。就跟电脑端的应用一样，虽然现在Web化的趋势已经非常明显了，但是还是无法取代本机安装的一些工具类的、游戏类的应用，在Web技术没有达到本地应用的效率和体验之前，Web是无法颠覆Native的。小结总体上，Web只是作为设计者和开发者所期待的一种理想化结果，开发成本低、轻松跨平台、迭代更新快，但是显然，现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Native。Web之于，只是一种趋势。在这个也许会非常久的过渡阶段，对复杂产品来说，NativeApp+WebApp也许是个不错的解决方案。WebApp（网页应用）HybridApp（混合应用）NativeApp（原生应用）开发成本低中高维护更新简单简单复杂体验差优优Store或market认可不认可认可认可安装不需要需要需要跨平台优优差17.1.6常见移动Web开发框架1.SenchaTouch

SenchaTouch是世界上第一个基于

HTML5的移动

Web开发框架，支持最新的

HTML5和

CSS3标准，全面兼容

Android和

AppleiOS设备，提供了丰富的

WEBUI组件，可以快速的开发出运行于移动终端的应用程序。2.jQueryMobile

jQueryMobile框架把“writeless,domore”精神提升到更高的层次。jQuery移动框架可以帮助设计一个可运行于所有流行智能手机和平板平台的应用程序，而不需要为每种移动终端都开发一个特别的版本。

3.jQTouch

jQTouch是一款

jQuery的插件，用于手机上实现动画、列表导航、默认应用样式等各种常见UI效果。支持

iPhone、Android等手机。其他4.TheMProject5.DHTMLXTouch–HTML5JavaScriptFrameworkforMobile6.WebApp.Net7.Wijmo–jQueryUIWidgets8.960GridonjQue