学习元 · 移动学习平台开发

一、跨平台移动应用开发工具

1、PhoneGap

简介：

PhoneGap是一个基于HTML，CSS和JavaScript创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，AndroidPalm， Symbian,WP7,Bada和Blackberry智能手机的核心功能—包括地理定位、加速器、联系人、声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。 PhoneGap将复杂的C/S开发转换成简单的B/S开发，大大降低了应用门槛，同时通过一次开发全平台适配的创新技术，大大提升了开发效率。

Phonegap build

功能： 1、兼容性：完全做到了Written Once，Run Everywhere；

2、标准化：PhoneGap采用W3C标准，Web App直接运行；

3、用JavaScript+HTM5，和iOS以及android的代码加XML没区别；

4、大众化移动互联网开发平台；

5、轻量级架构，功能卓越的手机应用快速开发平台；

6、精确兼容系统 Andriod iPhone&iPad Symbain WM；

7、无成本开发，20%的开发周期，20%的升级维护成本；

8、完全不需要手机编程基础，只要会HTML就能做应用。

支持平台：

phonegap框架对当前主流移动平台的支持细节

官网链接：http://phonegap.com/

2、Sencha Touch

简介：

Sencha Touch是一款基于HTML5、CSS3和JavaScript的移动Web应用开发框架，内置MVC系统，能够让开发者的HTML5应用看起来就像原生应用一样，全面兼容iOS、Android、BlackBerry、Windows Phone、Tizen等主流移动平台。除了常见的触摸手势之外，Sencha Touch还专为iOS、Android设备提供了单击、双击、滑动、滚动和双指缩放手势。HTML5应用开发的大热让众多跨平台开发框架逐渐风行，SenchaTouch就是其中之一。能够让开发者以非常友好的方式从HTML5/CSS3/JS提取最多内容，并为其提供丰富而又易于使用的特性。SenchaTouch对于iOS平台的兼容性非常好，画面切换效果亦是相当流畅

特性：1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。

2.支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。

3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。

4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

优点：1.兼容性很广，Android和IOS上都可以良好的运行。在布局上，手机、平板电脑都可以兼容。

2.它的使用原理全是封装好的方法，包括页面布局和版块,全是js方法生成，即HTML页面结构文档中之间是没有任何前端代码结构的。

缺点：Sencha Touch框架是一个重量级的框架，过于封闭，它上手较难代码复杂，调试起来过于复杂，并且需要较强的程序基础才能学习。 官网链接：http://www.sencha.com/products/touch/

3、Titanium

简介：

Titanium是Appcelerator公司旗下的一款开源的跨平台开发框架，一款免费开源的应用程序开发平台，和PhoneGap及Sencha Touch一样，都是让开发者使用HTML/CSS/JS来开发出原生的桌面及移动应用，还支持Python、Ruby和PHP。Titanium最大的特点就是，由于是基于硬件的开发，开发过程中所创建的应用可选择存储在设备或云端之上。

Titanium架构图

上图来自于Appcelerator官网，该图以iPhone和Android两个移动平台为例，描述了Titanium的总体框架结构。在Titanium框架中，Web应用城西可以很方便的访问设备UI组件。比如，可以在页面中使用Titanium提供的API控制导航条、工具栏、菜单，以及可以动态的向用户弹出对话框、警告框等。除此之外Titanium API还支持本地功能模块的访问，即用户可以使用Titanium提供的APIS接口访问数据库、定位功能、文件系统功能、网络功能、媒体功能等。

不过该框架图，并没有将Titanium中对多种脚本语言的相互访问机制很好的表现出来。但是，这一机制却又是Titanium框架的一个比较重要的功能特性。（更多详细的内容请看参考文献）

功能： 1、支持多平台（Linux、Mac、Windows、移动设备；

2、使用Web技术加快软件开发速度；

3、支持Web中内嵌多种编程语言；

4、支持对本地APIs的访问；

5、通过Appcelerator网络云服务，基于Tianium的应用可以更容易的打包、测试和部署；

6、本地功能的模块化，可动态加载制定的功能模块；

7、强大灵活地语言扩展，用户在Titanium框架中可以很方便的扩展多种动态语言。

资料链接：http://www.oschina.net/p/titanium

4、Xamarin

简介：Xamarin是一种跨平台开发框架，始创于2011年，旨在使移动开发变得迅捷和简单。Xamarin的主要目的是为了移动项目跨平台寻找

更优的开发方案.Xamarin官方号称在android\iphone\ipad\mac\windows phone\windows 8已实现跨平台,并且实现跨平台可以重用90%的代码。

跨平台开发框架Xamarin

特点：在Xamarin框架内，开发iOS、Android、Windows Phone和Mac App应用可以不用转到Eclipse 或者额外购买Mac并使用Xcode，而继续在Visual Studio之中使用C#与.NET Framework进行。

开发： Xamarin Studio（工作室）是一个用C#语言开发跨平台应用的集成开发环境，它和iOS以及Android SDK紧密整合。Xamarin Studio提供了很多现代开发所需功能，包括代码完成、调试器、打包和发布应用（支持通过TestFlight发布应用程序）。对于Android，Xamarin还包含了自己的UI生成器（对于iOS，则使用苹果Xcode的UI生成器），此外还集成了Git和Subversion。开发者可以使用Xamarin Studio在模拟器和真机上对移动应用进行测试和bug调试。Xamarin Studio能够完美支持Windows和Mac。Xamarin还提供了for vs2010 vs2012的插件,这个是比较吸引人的地方.缺点是插件里面只有android\ios类型的项目,更多其它平台上的项目都没有.ios的项目的编译和调试需要xcode支持,则说明还需要一台mac的系统以及xcode环境,以及一个装在mac上的辅助软件Xamarin.ios,Xamarin.ios是运行在mac上的软件,用来负责编译和调试软件,并且把结果通过socket通信反应到IDE上.但官方并没有提供这个软件的下载或试用，是购买授权用户的特权。

主要特性： 1、快速开发移动原生；

2 、应用程序代码共享；

3、与Visual Studio整合；

4 、确保第一时间更新；

5、原生的用户接口及效能。

, 不足： 1、官方只提供了在线文档,要在国内访问国外网站，效率太慢；

2、Xamarin是商业项目,并不开源,因此无法预测到那框架哪个部分会有bug,一旦框架出现问题,只能坐等官方更新；

3、 Xamarin的api更新总是要慢于智能手机系统提供商发布的api,说明你无法使用最新的api；

4、Xamarin是商业软件,要花钱,即便是调研它的可行性都很难,除非花钱买授权后再调研,可是没人这么有钱,没人愿意花这个时间

官网链接：http://xamarin.com/

5、Corona SDK

定义：Corona是一种游戏引擎，这款开发工具的最强大之处就在于可以快速开发出酷炫的游戏以及各种不同类型的APP，支持Android和iOS两个平台，是靠简单的Lua脚本语言(游戏魔兽世界就是Lua编写而成)进行编写的，并且提供近千个强大的API(应用编程接口)让开发者可以轻易的撰写出复杂的特效和功能，它并不是开源免费的，而是需要购买一个License工具。

游戏“失落之城”

特点：1、简单易学（使用轻量级的脚本语言Lua）；

2、完善的API支持（不仅可以让开发者轻易的使用手机硬件的本身功能，而且针对额外的功能如：广告、推播讯息等都做了完善

的支持，甚至是针对社群方面也有专门的API可以呼叫；

3、强大的游戏API（开发者下载安装完Corona SDK之后不需要再做额外的环境设定即可开始使用其内建的功能开发游戏）；

4、丰富的在线资源（官网提供了一个“Share Code”的讨论版，资深的开发人员可以把自己撰写好的Sample Code分享；

三类服务：1、基础版：能够在极短的时间内完成应用或游戏开发，通过内付费或广告盈利。

2、专业版：增加了先进的图形技术及所有Corona插件等。

3、企业版：开发者可以在线开发，并从Corona应用中调用任何原生库。

官网链接：http://coronalabs.com/

6、Unity

Unity（又称Unity 3D）是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

Unity官方网站界面

容易上手、多语言编程、专业级的效果、傻瓜式的调试和编译、强大的扩展性，在跨平台、光影特效及模型渲染等各方面都有着非常不错的表现，让Unity无论在3D还是2D游戏开发中都是当之无愧的“最好用的游戏引擎之一”。

开发游戏：

官网链接：http://unity3d.com/

二、移动应用开发技术介绍

（一）HTML5

在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。

JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。

纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

1、优点

网络标准

HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

多设备跨平台

用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台非常强大，也是大多数人对HTML5有兴趣的主要原因。

自适应网页设计

很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

2010年，Ethan Marcotte提出了”自适应网页设计“这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

这就解决了传统的一种局面——网站为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者 iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

即时更新

游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新。

总结概括HTML5有以下优点：

（1）提高可用性和改进用户的友好体验；

（2）有几个新的标签，这将有助于开发人员定义重要的内容；

（3）可以给站点带来更多的多媒体元素(视频和音频)；

（4）可以很好的替代FLASH和Silverlight；

（5）当涉及到网站的抓取和索引的时候，对于SEO很友好；

（6）将被大量应用于移动应用程序和游戏；

（7）可移植性好。

2、沿革

HTML5 提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。

（1）取消了一些过时的HTML4标记

其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。

HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

（2）将内容和展示分离

b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

（3）一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

（4）全新的，更合理的Tag

多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

（5）本地数据库

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。

（6）Canvas 对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

（7）浏览器中的真正程序

将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。

（8）Html5取代Flash在移动设备的地位。

（9）其突出的特点就是强化了web页的表现性,追加了本地数据库

3、规范

HTML5和Canvas 2D规范的制定已经完成，尽管还不能算是W3C标准，但是这些规范已经功能完整，企业和开发人员有了一个稳定的执行和规划目标。

W3C首席执行官Jeff Jaffe表示：“从今天起，企业用户可以清楚地知道，他们能够在未来依赖HTML5。”HTML5是开放Web标准的基石，它是一个完整的编程环境，适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。

为了减少浏览器碎片、实现于所有HTML工具的应用，W3C从今天开始着手W3C标准化的互操作性和测试。和之前宣布的规划一样，W3C计划在2014年完成HTML5标准。

HTML工作组还发布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案，让开发人员能提前预览下一轮标准

（二）Bootstrap

1、简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

2、特点

Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

3、组件

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

4、JavaScript插件

Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。

5、Bootstrap Less

Less 是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。

（三）jQuery Mobile

1、简介

jQuery是一个非常流行的Web程序开发时使用的JavaScript类库，但它只是为PC端的浏览器而设计的。在移动互联网中为了满足浏览器更好地运行Web程序的需求，在基于jQuery 与jQuery UI 的基础之上，推出了jQuery Mobile这套框架，其主旨就是在进行移动项目开发的过程中，为开发者提供统一的接口与特征，依靠强大的jQuery类库，节省JavaScript代码的开发时间，提高项目开发的效率。

2、功能特点

jQuery Mobile 为开发移动应用程序提供十分简单的应用接口，而这些接口的配置则是由标记驱动的，开发者在HTML页中无须使用任何JavaScript代码，就可以建立大量的程序接口。使用页面元素标记驱动是jQuery Mobile仅是它众多特点之一，概括而言，它具有如下特点：

特点1　强大的AJAX驱动导航（注：AJAX简言之就是实现不更新整个页面，而进行数据交换。）

无论页面数据的调用还是页面间的切换，都是采用AJAX进行驱动的，从而保持了动画转换页面的干净与优雅。

特点2　以jQuery与jQuery UI为框架核心

jQuery Mobile 的核心框架是建立在jQuery基础之上的，并且利用了jQuery UI的代码与运用模式，使熟悉jQuery 语法的开发者能通过最小的学习曲线迅速掌握。

特点3　强大的浏览器兼容性

jQuery Mobile 继承了jQuery 的兼容性优势，目前所开发的应用兼容于所有主要的移动终端浏览器，使用开发者集中精力做功能开发，而不需要考虑复杂的浏览兼容性问题。

特点4　框架轻量级

目前jQuery Mobile 最新的稳定版本为1.0.1，压缩后的体积大小为24KB，与之相配套的CSS文件压缩后的体积大小为6KB，框架的轻量级将大大加快程序执行时的速度。

特点5　支持触摸与其他鼠标事件

jQuery Mobile 提供了一些自定义的事件，用来侦测用户的移动触摸动作，如tap（单击）、tap-and-hold（单击并按住）、swipe（滑动）等事件，极大提高了代码开发的效率。

特点6　强大的主题化框架

借助于主题化的框架和ThemeRoller应用程序，jQuery Mobile 可以快速地改变应用程序的外观或自定义一套属于产品自身的主题，有助于树立应用产品的品牌形象。

3、支持平台

目前jQuery Mobile 1.0.1版本支持绝大多数的台式机、智能手机、平板和电子阅读器的平台，此外，对有些不支持的智能手机与旧版本的浏览器，通过渐进增强的方法，将逐步实现能够完全支持。下面通过一个分级的支持系统，详细说明各浏览器对jQuery Mobile 1.0.1的支持状况。

(注：七大主流移动操作系统：PalmOS、Symbian、WindowsCE、Linux和Android、iPhoneOS Meego)
说明：浏览支持系统为三个级别，分别为A、B、C。A级表示完全基于AJAX的动画页面转换增加的体验效果，代表最优；
B级表示仅是除了没有 AJAX的动画页面转换增加的体验效果，其他都可以很好地支持，代表良好；
C级表示能够支持实现基本的功能，没有体验效果，代表较差。

4、与jQTouch、Sencha Touch、SproutCore的比较

移动Web开发有易于上手、开发周期相对短以及可以自动更新等众多的优点，因此，除jQuery Mobile外，还有很多框架可支持开发Web应用，如jQTouch、Sencha Touch、SproutCore等。那它们与jQuery Mobile有什么区别呢？接下来我们进行详细说明。

(1) jQTouch

jQTouch 与jQuery Mobile 十分相似，也是一个jQuery插件，同样也支持HTML页面标签驱动，实现移动设备视图切换效果。但与jQuery Mobile不同在于，它是专为WebKit内核的浏览器打造的，可以借助该浏览器的专有功能对页面进行渲染；此外，开发时所需的代码量更少。如果所开发的项目中，目标用户群都使用WebKit内核的浏览器，可以考虑此框架。

官方下载地址：http://www.jqtouch.com/

(2) Sencha Touch

Sencha Touch 是一套基于ExtJS开发的插件库。它与jQTouch相同，也是只针对WebKit内核的浏览器开发移动应用，拥有众多效果不错的页面组件和丰富的数据管理，并且全部基于最新的HTML 5与CSS 3的Web标准。与jQuery Mobile不同之处在于，它的开发语言不是基于HTML标签，而是类似于客户端的MVC风格编写JavaScript代码，相对来说，学习周期较长。

官方下载地址：http://www.sencha.com/products/touch/

(3) SproutCore

SproutCore 同样也是一款开源的JavaScript框架，以少量的代码开发强大的Web应用。开始仅用于桌面浏览器的应用开发，后来，由于功能强大，许多知名的厂商也纷纷使用它来开发移动Web应用。但与jQuery Mobile相比，SproutCore对一些主流终端浏览的支持还有许多不足之处，如屏幕尺寸略大，开发代码相对复杂些。

（From：http://book.51cto.com/art/201209/355985.html)