• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > html5 >

PhoneGap入门六大问题

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-22点击:
   

  很多PhoneGap新手总是需要一些基础问题的解答,Adobe技术布道师Andrew Trice常在其博文中回答诸如” PhoneGap是什么?”、“phonegap应用开发出来是什么样的形态?”、“如何开发phonegap?”等问题。近日他将这些问题回答整理成文以帮助开发者理解和使用PhoneGap。

  1. PhoneGap是什么?

  PhoneGap是一个基于HTML和JavaScript的应用开发平台,使用它可以构建本地应用。你可以把PhoneGap看作一个正方形的web view container,它使用JavaScript编程接口实现用户在不同操作系统下的访问。你可以利用传统的web开发技术(如HTML、CSS、JavaScript )开发用户接口,利用PhoneGap容器把它们部署到不同的应用环境和设备上。

  PhoneGap可以被用来开发跨平台的应用,这些平台包括Apple iOS、 Google Android,、Windows Phone、BlackBerry、 HP WebOS,、Symbian 和 Bada。你可以通过链接

  http://phonegap.com/about/features获取更多关于PhoneGap支持的平台及其特色功能的信息。

  PhoneGap是一个开源的框架,用户可以去http://incubator.apache.org/projects/callback.html获取更多信息。

  2.开发出的PhoneGap应用是什么样的形态?

  由于UI绘制引擎就是移动设备的内置web浏览器,所以PhoneGap应用的形态可能多种多样。你可以使用标准的HTML&CSS使它看起来就像一个简单的网页,也可以使用UI框架使它像jQuery UI, Kendo UI, Sencha, Twitter Bootstrap或Skeleton(或者其它任意基于HTML/CSS/JS的用户框架接口)。另外你也可以采用CSS模式/主题使它看起来就像一个本地应用,如模仿iOS 和 Android的iUI,模仿BlackBerry的bbUI。

  PhoneGap应用可以是基于HTML的静态UIs,也可以是利用JavaScript开发具有动态效果和交互体验动态UIs。这取决于特定的应用、用户体验设计、受众目标以及指示PhoneGap应用如何出现的应用实例。

  使用PhoneGap应用,你可以通过缩小放大操作放大或者缩小查看的内容,或者利用利用viewport metadata tag锁定浏览内容的大小。你可以利用常规浏览器的操作方式滚动浏览网页也可以像iScroll一样采用基于接触的滑动方式浏览网页。

  基于HTML, CSS & JavaScript你有许多方式可以创建用户接口,所以并没有一个典型的外观。如果你没有使用任何的CSS模式,那么用户接口各元素默认和使用的操作系统或者浏览器保持一致,包括按钮、链接、色彩以及亮度。这时PhoneGap应用和操作系统默认的浏览器一样运行。

  3. 如何利用PhoneGap开发应用?

  利用PhoneGap开发应用非常简单,90%的PhoneGap应用只需要一个文本编辑器即可。PhoneGap也能很容易的与特定的设备整合形成开发环境。具体可以参考以各应用平台上的开发指导链接:

  • iOS: http://phonegap.com/start#ios-x4

  • Android: http://phonegap.com/start#android

  • BlackBerry: http://phonegap.com/start#blackberry

  • Windows Phone: http://phonegap.com/start#wp

  • WebOS: http://phonegap.com/start#webos

  • Symbian: http://phonegap.com/start#symbian

  

\

 

  在开发PhoneGap应用应用时 ,一定要谨记你是在web浏览器实例中运行代码。你是利用HTML和JavaScript开发应用而不是本地代码,因此不需要其它任何东西。实际上我的大部分开发都是利用HTML编辑器和Chrome浏览器实现的。当我需要在设备上做测试的时候再切换到特定的设备环境。

  4. 如何调试PhoneGap应用?

  调试PhoneGap应用是PhoneGap开发过程中最棘手部分。只在物理设备上测试,并不能测试出所有的JavaScript异常。下面是一些具体的调式策略:

  尽可能利用桌面浏览器调试

  由于PhoneGap应用是利用HTML, CSS, and JavaScript进行开发的,你可以利用HTML编辑器开发大部分应用然后利用桌面web浏览器调试。最新版本的web浏览器(包括Chrome、IE、Firefox、 Opera 和Safari)都提供了丰富的调试功能。利用web浏览器开发工具,你可以检查HTML DOM元素,检查CSS的模式、设置JavaScript断点、检查内存和JavaScript变量。通过下面链接可以获得更多更多关于桌面浏览器开发工具的信息:

  • Chrome Developer Tools: http://code.google.com/chrome/devtools/docs/overview.html

  • Firefox via FireBug: http://getfirebug.com/

  • Safari Developer Tools: https://developer.apple.com/technologies/safari/developer-tools.html

  • IE Developer Tools: http://msdn.microsoft.com/en-us/ie/aa740478

  • Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/

  你一旦利用桌面工具开发了应用的主要功能,便可以切换到特定的设备环境增加特定的设备功能并与PhoneGap APIs整合。

  利用真实设备进行测试是必不可少的。利用真实设备测试可能获得不同于桌面浏览器和模拟器的性能,也可以发现不同的bug和问题包括API的不同和UX脚本的不同。

  用debug.phonegap.com调试

  利用debug.phonegap.com可以进行远程的基于设备的调试。利用Weinre调试工具你可以远程检查DOM、测试资源下载、检测网络使用、检测时间线以及控制台输出。如果你已经使用了上述列出的开发工具,就会发现它们看起来很相似。只是你不能在移动设备上设置断点,但是肯定比什么都没有强。

  利用iOS5进行远程web调试

  利用iOS5模拟器实现远程调试只需要开通远程调试功能即可。然后利用iOS5桌面模拟器发布应用。一旦应用运行它就会打开一个本地Safari实例http://localhost:9999/。这将启动远程调试工具,完成断点设置和脚本测试。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ