《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
