最近突然想弄一下phonegap,之前一直是听说,没亲自配置开发过。结果配置过程非常艰难啊。特别是android平台的配置,那叫一个麻烦,网上搜了半天都没找到非常好的资料。文章也都是抄来抄去,最烦的就是抄来抄去的文章,没亲自测试过就转发了,你转发个毛线啊。事实证明还是得自己亲自解决,花了两天时间终于搞定。
写下这篇文章希望对想开发phonegap的同学有所帮助。
最新的phonegap貌似用的是nodejs开发的
共有以下几个步骤:
安装nodejs环境、安装phonegap、安装xcode、安装android SDK
跟我进入安装phonegap的艰难之旅吧。。文章有点长不喜勿看
安装phonegap3.0需要事先安装nodejs环境,nodejs安装非常简单。直接上nodejs官网下载一个安装包,打开安装即可,安全没有难度,我就不说了。
安装完nodejs后,打开Terminal命令行工具输入
$ sudo npm install -g phonegap
等待片刻即安装成功
再当前目录创建hello项目
创建phonegap项目名字暂时就叫helloworld吧,cordova即phonegap是由于adobe收藏原phonegap后另外取的名字而已
hello即项目名,com.example.hello为(id)命名空间, HelloWorld即APP名称
$ cordova create hello com.example.hello HelloWorld
添加要编译的平台
即项目开发完后要编译出哪些平台的APP,如ios平台,android平台,Blackberry平台等,详情支持哪些平台请看这里
http://docs.phonegap.com/en/edge/guide_platforms_index.md.html#Platform%20Guides
进入hello项目目录
$ cd hello
添加ios平台
$ cordova platform add ios
在当前目录下应该就可以看到如下文件结构
创建ios平台项目
$ cordova build ios
成功后你就可以看到
双击HelloWorld.xcodeproj这个文件就可以打开这个项目进行测试了
接下来就可以在xcode中正常的编译、输出、发布到appstore上了,前提是您得有开发者帐号哈。添加ios平台是如此的简单
接下来是
添加android平台
$ cordova platform add android
如果你在运行此条命令前没有安装并配置正确的android SDK那么应该会报错,我这边报这样的错误如图
错误提示意思是大概是没有安装并正确配置android SDK
所以得在创建android平台之前先得去google下载最新的android SDK并添加至全局环境中
下载android SDK的网页可能需要翻一下墙
下载到最新的SDK开发包解压并放到某个目录下,我是放在了User目录下的Development目录下,Development是自己建的如图
由于下载的最新SDK只是个基本环境,你还得双击tools目录下的android程序android SDK manager来下载更新安装你需要的N个android版本可能会花点时间哟,如图勾选你需要使用的版本,我是选了好多个的:
更新完SDK后得配置Android Virtual Device Manager即传说中的AVD也就是android虚拟机
双击tools目录下的monitor程序,monitor然后点击window菜单下的monitor打开AVD管理器如图
在AVD中点击new按钮,根据自己需要配置一个新的android虚拟器
好了,至此android SDK安装完了。
将android SDK目录添加到全局环境中
在Terminal中输入
open ~/.bash_profile
打开文件后输入这两行
export PATH=/Users/willian/Development/android-sdk-macosx/platform-tools:$PATH
export PATH=/Users/willian/Development/android-sdk-macosx/tools:$PATH
具体的目录需要更改为你放置android SDK的正确目录
保存文件
并在Terminal内输入
source ~/.bash_profile
此命令是刚刚的配置命令以即刻生效
好了,android的所有配置完成了。
继续运行命令
$ cordova platform add android
发现还是不能添加成功,如图
错误提示说是没有安装ant, 好吧,继续安装ant
安装ant请先确保homebrew已经安装了,这个东西您应该懂的,安装一些程序时非常实用,首先请勿必更新homebrew否则安装ant命令在mac ox 10.9内是不识别的
$ brew update
再安装ant
$ brew install ant
发更还是报错,还得安装Command Line Tools
继续运行
$ xcode-select –install
然后再运行
$ brew install ant
应该就安装成功了如图
至此运行
$ cordova platform add android
添加android平台就可以成功了
在文件目录下应该可以看到如图
使用eclipse就可以直接导入项目
在Terminal中输入
$ cordova build android
即可编译出apk文件在hello/platforms/android/bin目录下可以找到
在模拟器中运行
$ cordova emulate android
安装apk至android手机
$ phonegap install android
至此ios与 android平台的配置都已经OK了。Android的配置真是蛋疼啊。
如果安装中碰到任何问题,请与我交流心得。谢谢