QQ20140116-2.png

有个很早以前打包的基于PhoneGap制作的企业版App又过一年了,描述文件过期需要重新打包。可是电脑恢复过而且Xcode经过若干次升级,旧的PhoneGap环境我并没有保留,所以我需要重新建立PhoneGap的环境。下载的时候才发现PhoneGap已经从1.7升级到了3.3,插件架构、安装模式和使用模式已经改变,本文是简单的介绍与记录。

Adobe PhoneGap 3.0在第三届PhoneGap年会发布。作为流行的跨平台移动开发框架,PhoneGap从3.0开始变得更不一样,包含新的插件架构、改进的工具、新的平台和新的API,最近3.3发布时还支持了Android 4.4 KitKat。

Adobe® PhoneGap™, 流行的开源移动应用开发框架, 在俄勒冈州波特兰市第三届PhoneGap年后发布PhoneGap 3.0。PhoneGap允许开发者用HTML5, CSS3和Javascript编译快平台应用。通过PhoneGap, 你可以拾起你熟悉的网页开发技巧和使用 PhoneGap API获取那些浏览器不能获得本地特性的权限。

我们很兴奋的宣布 PhoneGap 3.0以下几个主要新特性:

  • 新的插件架构- 我们的插件架构让应用更小更快,你只需要加载你所需要的API与此同时插件可以自动安装和移除。
  • 更友好的开发工具 – 我们让切换原生平台更简单和快捷,而不需要通过原生平台CLI(命令行界面)工具统一学习新的语法。不需要安装任何原生SDK? 没问题! 我们的工具盒 PhoneGap/Build 整合了
  • 新的平台支持 – 年初已经支持iOS6 ( iOS7 现已支持!), Windows Phone 8,和 BlackBerry 10. Firefox OS 以及 Ubuntu a也将支持
  • 新的 APIs – 两个新的 API- InAppBrowser (早先的ChildBrowser 插件)和Globalization API(多语言全球化插件)

一、安装NodeJS

NodeJS网站下载pkg安装包双击安装。

二、安装PhoneGap

这步比较容易,用npm安装

$ sudo npm install -g phonegap

三、创建PhoneGap工程

$ phonegap create my-app --name myApp --id com.example.myApp
$ cd my-app

可以看到my-app目录中有merges/ platforms/ plugins/ www/四个子目录。

www目录中存放的是HTML/JS/CSS,以及一个res子目录。其中res目录存放多个平台的图标与启动画面。

platforms目录目前是空的,建立多个平台的工程时会在此目录中新增相应的工程目录。

plugins目录目前是空的,新增插件的时候会下载到此目录中。

四、配置PhoneGap工程中需要的插件

这步是我之前没有想到的,我直接创建了iOS工程并编译运行的时候,发现device和其他对象都是undefined的,百思不得其姐啊,我从JS中跟踪了一番愣是没找到原因,后来回头去看文档归才发现需要安装新的插件并配置feature属性。

安装插件的时候,发现用cordova plugin add org.apache.cordova.device不知道有什么问题,停着不动,因此找了资料之后,使用以下指令:

phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
phonegap plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
#可以查看安装的插件
$ phonegap plugin list
[phonegap] org.apache.cordova.console
[phonegap] org.apache.cordova.device
[phonegap] org.apache.cordova.device-motion
[phonegap] org.apache.cordova.device-orientation
[phonegap] org.apache.cordova.dialogs
[phonegap] org.apache.cordova.inappbrowser
[phonegap] org.apache.cordova.network-information
[phonegap] org.apache.cordova.splashscreen
[phonegap] org.apache.cordova.vibration

五、创建for iOS的工程

$ phonegap build ios
[phonegap] detecting iOS SDK environment...
[phonegap] using the local environment
[phonegap] adding the iOS platform...
[phonegap] compiling iOS...
[phonegap] successfully compiled iOS app

platforms目录中生成了ios目录。

六、用Xcode编译制作安装包

进入platforms/ios/,用Xcode打开myApp.xcodeproj进行编译安装,如果发现插件没有效果,要检查一下config.xml有没有配置相应的feature,范例如下:

<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature>