《phonegap应用介绍》由会员分享,可在线阅读,更多相关《phonegap应用介绍(36页珍藏版)》请在金锄头文库上搜索。
1、第13讲 PhoneGap应用介绍,请到 240FTP ./ HTML5移动Web开发 下载第13讲文件夹,主要内容,概述 搭建平台,1. PhoneGap是什么?,PhoneGap是一个基于HTML和JavaScript的应用开发平台,使用它可以构建本地应用。 可以把PhoneGap看作一个正方形的web view container,它使用JavaScript编程接口实现用户在不同操作系统下的访问。 可以利用传统的web开发技术(如HTML、CSS、JavaScript )开发用户接口,利用PhoneGap容器把它们部署到不同的应用环境和设备上。,1. PhoneGap是什么?,Phone
2、Gap可以被用来开发跨平台的应用,这些平台包括Apple iOS、 Google Android,、Windows Phone、BlackBerry、 HP WebOS,、Symbian 和 Bada。 可以通过链接 http:/ 获取更多关于PhoneGap支持的平台及其特色功能的信息。 PhoneGap是一个开源的框架,用户可以去http:/incubator.apache.org/projects/callback.html获取更多信息。,2.开发出的PhoneGap应用是什么样的形态?,由于UI绘制引擎就是移动设备的内置web浏览器,所以PhoneGap应用的形态可能多种多样。 可以使
3、用标准的HTML&CSS使它看起来就像一个简单的网页,也可以使用UI框架使它像jQuery UI, Kendo UI, Sencha, Twitter Bootstrap或Skeleton(或者其它任意基于HTML/CSS/JS的用户框架接口)。 另外也可以采用CSS模式/主题使它看起来就像一个本地应用,如模仿iOS 和 Android的iUI,模仿BlackBerry的bbUI。,2.开发出的PhoneGap应用是什么样的形态?,PhoneGap应用可以是基于HTML的静态UIs,也可以是利用JavaScript开发具有动态效果和交互体验动态UIs。这取决于特定的应用、用户体验设计、受众目标
4、以及指示PhoneGap应用如何出现的应用实例。 使用PhoneGap应用,可以通过缩小放大操作放大或者缩小查看的内容,或者利用利用viewport metadata tag锁定浏览内容的大小。 可以利用常规浏览器的操作方式滚动浏览网页也可以像iScroll一样采用基于接触的滑动方式浏览网页。,2.开发出的PhoneGap应用是什么样的形态?,基于HTML, CSS & JavaScript你有许多方式可以创建用户接口,所以并没有一个典型的外观。 如果你没有使用任何的CSS模式,那么用户接口各元素默认和使用的操作系统或者浏览器保持一致,包括按钮、链接、色彩以及亮度。这时PhoneGap应用和操
5、作系统默认的浏览器一样运行。,3. 如何利用PhoneGap开发应用?,利用PhoneGap开发应用非常简单,90%的PhoneGap应用只需要一个文本编辑器即可。PhoneGap也能很容易的与特定的设备整合形成开发环境。 在开发PhoneGap应用应用时 ,一定要谨记你是在web浏览器实例中运行代码。 是利用HTML和JavaScript开发应用而不是本地代码,因此不需要其它任何东西。 实际上大部分开发都是利用HTML编辑器和Chrome浏览器实现的。 当需要在设备上做测试的时候再切换到特定的设备环境。,具体可以参考以各应用平台上的开发指导链接, iOS: http:/ Android: h
6、ttp:/ BlackBerry: http:/ Windows Phone: http:/ WebOS: http:/ Symbian: http:/ 如何调试PhoneGap应用?,调试PhoneGap应用是PhoneGap开发过程中最棘手部分。只在物理设备上测试,并不能测试出所有的JavaScript异常。 下面是一些具体的调式策略:,(1)尽可能利用桌面浏览器调试,由于PhoneGap应用是利用HTML, CSS, and JavaScript进行开发的,你可以利用HTML编辑器开发大部分应用然后利用桌面web浏览器调试。 最新版本的web浏览器(包括Chrome、IE、Firefox
7、、 Opera 和Safari)都提供了丰富的调试功能。 利用web浏览器开发工具,你可以检查HTML DOM元素,检查CSS的模式、设置JavaScript断点、检查内存和JavaScript变量。,通过下面链接可以获得更多更多关于桌面浏览器开发工具的信息:, Chrome Developer Tools: http:/ Firefox via FireBug: http:/ Safari Developer Tools: https:/ IE Developer Tools: http:/ Opera Developer Tools: http:/ 通过连接http:/ 如何部署Phone
8、Gap应用?,部署PhoneGap应用和创建移动设备web是一样的,唯一不同的就是PhoneGap应用程在本地初始化HTML设置而不是远程服务器。 PhoneGap应用加载初始化的HTML,它可以用来申请服务器或者本地上的资源。 由于PhoneGap是基于浏览器的,可以像浏览器一样运行。 可以同时下载各种网页,但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据。PhoneGap也支持单页浏览模式,建议用户使用单页浏览模式。,单页浏览模式部署,单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新,你可以把它看做是客户/服务器模式,由一个客户应用和
9、一个服务器组成。客户应用可以请求数据或者进行更新而不用重新加载web页。 通过使用单页浏览模式你可以维护内存中的数据。通过如下链接可以了解更多关于单页模式的知识http:/en.wikipedia.org/wiki/Single-page_application。 可以利用任意常见的JS架构如Angular, Ember, Backbone, Mustache部署PhoneGap 应用。,6.如何使PhoneGap应用在移动设备和应用环境中运行?,对每一个给定的平台而言,PhoneGap应用采用和本地应用相同的规则部署,必须遵守每一个应用平台的部署规则。 可以利用每个平台的构建过程为这个平台编
10、译可执行文件也可以利用进行编译。 是可以为每个平台编译使用时具体平台的应用的服务。 构建过程的输出是适用于一个特定平台的二进制文件:适用于iOS的IPA,适用于Android的APK。,7.兼容性,有技术人员在知乎网抛出了“Titanium、PhoneGap、jQueryMobile、Sencha谁能谈谈实际使用经验?”的话题,感兴趣的可以看看。,1.PhoneGap是比较底层的库,对表现层没有支持,所以用phoneGap开发需要再加上jQuery或XUI,YUI这类UI层的东西; 2.phoneGap主要的好处是学习成本不算高,缺点是速度慢,内存容易溢出。 3.jQuery主要优势是微软支持
11、,学习资料多,热度高。缺点是学习成本高,默认模板很难看,想做个性化修改特别麻烦,而且速度也因为兼容太多浏览器(连IE也兼容,这对移动应用多累赘啊)比较慢。基本上如果你的技术方案是phoneGap+jQuery,最好不要做超过5页的产品设计,而且尽量不要做拍照,文字输入等互动功能。 4.sencha主要的优势其实是云端服务支持,但对国内的人来说就享受不到了。 5.Titanium是我们遇到的国外的HTML5工具效率最好的一个,因为他们把不少HTML和CSS代码预编译成了JavaScript,这点在开发Julia时我们也借鉴了。缺点是学习曲线比较高,当然如果你是JS熟手就容易很多。,另一种观点,1
12、.PhoneGap(with jQTouch):可用API比较少,但可选UI样式比较多。 2.Titanium Mobile:更多依靠JavaScript,因此开发意味比设计意味更重。相比来说,可用API更多一些。值得一提的是,需要使用它自己的桌面应用来编译和打包app。 3.Sencha Touch:是一个HTML5,CSS3和JavaScript结合的Web App开发框架,更多用来开发Web App而不是提交到Appstore的源生应用,但能在Webkit浏览器里支持多种手势操作。,jQueryMobile、Sencha是实现移动应用的前端呈现,Sencha官方的说法是“提供移动平台的解
13、决方案”,实现的效果很接近Native App了,但是这个库很大,如果是要做Web App的话还是可以用一用的,但是做Mobile Web App,性能也是一个都很大的问题。,PhoneGap是比较出名的一个跨平台解决方案。但是PhoneGap并不支持UI设计,它仅仅是浏览器调用本机代码(比如获取地理位置)的一层接口。UI设计还需要别的JS类库支持。 在Google的NexusOne(1G的CPU)上面测试,加载一个PhoneGap和jQuery Touch用时0.9秒左右,这仅仅是基础库的加载,应用本身的HTML、CSS和JS代码还都没有计算。性能很成问题。性能,也就是运行速度是现有跨平台工具的首要问题。,在iOS平台勉强过的去,在Android平台上比较惨,特别是一些比较老的低配置机型上。 介绍一些开发PhoneGap web app优化经验: 1.少用图片,特别是大面积的png图片; 2.巧用-webkit-transform 属性,在iOS平台上,如果你的dom带有-webkit-transform的3d属性,系统将开启硬件加速,你会发现你的动画帧率瞬间上了一个阶; 3.尽量避免使用标签,容易造成未知的内存泄露; 4.尽量简化do