PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。
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应用和操作系统默认的浏览器一样运行。
开发工具
PhoneGap XDK是一个完整的开发环境,也可以和其他代码编辑器一起使用,如Dreamweave 5.5或NotePad++等。因此,开发者并不需要学习一种全新的编辑器。该框架的目标是帮助开发者减少编码和调试周期。PhoneGap XDK允许用于测试、模拟PhoneGap代码,以看该应用能否在iOS或Android设备上运行
PhoneGap Android
(1)安装Eclipse3.4,我安装使用的为3.6版本中文语言包(如果你使用的是英文原版,下面的一些操作请自行和我的中文描述对应),ADT Plugin要求使用3.5.1以上版本 。如果你对Eclipse不了解,不知道使用哪种版本的,建议下载Eclipse Classic版本。Eclipse为绿色版软件,下载后解压到任意位置均可使用。
(2)下载安装JDK (java SDK)。android SDK 依赖于JDK,所以必须先安装JDK 。JDK1.6官方下载 。JDK安装好以后,需要配置系统环境变量。配置系统环境变量.
(3)下载安装Android SDK (android官方下载地址不可直接访问,华军有当前最新版本的SDK下载,访问这里)。同JDK设置环境变量一样,需要设置ADK的环境变量为(以我 安装ADK的路径为例) M:Program FilesAndroidandroid-sdkplatform-tools
(4)下载安装 ADT Plugin 是一款Eclipse的插件,用于快速开发Android应用。
(5)下载最新版本的PhoneGap
以上所有都安装好以后,再进行下一步
Step4
◆打开Eclipse,选择文件->新建->其他->AndroidProject
并建立一个专案本文以 [helloinside]为名称,分别输入专案的属性为
Application name:helloinside
Package name:com.phonegap.helloinside
Create Activity:app
这一步如果遇到No target available ,是因为ADK环境没配置好 首选项—>android—>选择android-sdk的路径,然后点击应用即可。(需要重新启动Eclipse)
注:目前PhoneGap 0.9.3用Android 2.3以上版本会出错,所以Build Target请选 Android 2.2以下的版本。
◆在新建项目的根目录下,创建两个目录
1. /libs
2.
3. /assets/www
◆解压PhoneGap文件夹,复制phonegap.js文件到/assets/www 目录下,复制phonegap.jar文件到libs目录下
◆需要对Eclipse下项目的App.java文件(src文件夹内)进行一些配置(如图所示)
修改类的继承 将Activity 修改为 DroidGap
将setContentView()这一行修改为super.loadUrl("file:///android_asset/www/index.html");
添加 import com.phonegap.*;
有可能在这里会遇到一个错误,显示Eclipse找不到phonegap-0.9.2.jar ,右键点击/libs文件夹,Build Paths(构建路径)/ > Configure Build Paths(配置构建路径) 在library(库)栏向工程中添加phonegap-0.9.4.jar,可能需要按一次F5刷新。
◆右键点击AndroidManifest.xml文件,选择Open With > Text Editor(打开方式->文本编辑器)
◆粘贴下面的授权信息至版本名称后面(如图所示)
- <supports-screens
- android:largeScreens="true"
- android:normalScreens="true"
- android:smallScreens="true"
- android:resizeable="true"
- android:anyDensity="true"
- />
- <uses-permission android:name="android.permission.CAMERA" />
- <uses-permission android:name="android.permission.VIBRATE" />
- <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
- <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
- <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
- <uses-permission android:name="android.permission.READ_PHONE_STATE" />
- <uses-permission android:name="android.permission.INTERNET" />
- <uses-permission android:name="android.permission.RECEIVE_SMS" />
- <uses-permission android:name="android.permission.RECORD_AUDIO" />
- <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
- <uses-permission android:name="android.permission.READ_CONTACTS" />
- <uses-permission android:name="android.permission.WRITE_CONTACTS" />
- <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
- <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
复制代码
◆向activity标记中添加android:configChanges="orientation|keyboardHidden” (如上图所示)
Step5
◆新建一个index.html文件至/assets/www目录下
◆粘贴下面的代码至index.html文件中
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>PhoneGap</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- </head>
- <body>
复制代码
Step6
◆右键点击项目,选择 运行方式-> AndroidApplication
◆Eclipse可能会询问你选择一个AVD(Android运行的虚拟设备),如果没有,你可以创建一个(建议选择2.2版本)
注意:运行时初始启动较慢,需要耐心等待几分钟。
如果你看到了下面这张图,恭喜你,hello world运行成功!
Step7
◆确保你的设备上开启了USB debug模式,并且通过USB线将它连接到电脑上(你的设备:设置->应用->开发)
◆右键点击项目,选择 运行方式-> AndroidApplication
部署PhoneGap应用
部署PhoneGap应用和创建移动设备web是一样的,唯一不同的就是PhoneGap应用程在本地初始化HTML设置而不是远程服务器。PhoneGap应用加载初始化的HTML,它可以用来申请服务器或者本地上的资源。由于PhoneGap是基于浏览器的,可以像浏览器一样运行。你可以同时下载各种网页但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据。PhoneGap也支持单页浏览模式,建议用户使用单页浏览模式。
单页浏览模式部署
单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新,你可以把它看做是客户/服务器模式,由一个客户应用和一个服务器组成。客户应用可以请求数据或者进行更新而不用重新加载web页。
通过使用单页浏览模式你可以维护内存中的数据。通过如下链接可以了解更多关于单页模式的知识。
可以利用任意常见的JS架构如Angular,Ember,Backbone,Mustache部署PhoneGap应用。