mac环境下node.js和phonegap/cordova创建ios和android应用

mac环境下node.js和phonegap/cordova创建ios和android应用

 一介布衣  2015-01-12   nodejs  6888

分享到： QQ空间 新浪微博 腾讯微博 人人网 微信

引用百度百科的一段描述:PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用. 查看更多

使用前提:

已经安装xcode

已经安装python 2.7 (3.0一下版本)

已经安装node 0.10.*(本环境是 0.10.28)

上面的安装方法你可以在本博客搜索

cordova和phonegap是什么关系?

PhoneGap的代码已经贡献给了Apache软件基金会（ASF），并且改名为 Apache Cordova.

这个名字来源于温哥华的科尔多瓦街（Cordova Street），它是创建PhoneGap时Nitobi公司的所在地.

所以上面这2个东西其实是一个东西.下面就全部统一成 cordova

安装 cordova 环境

sudo npm install -g cordova

经过几分钟的下载编译,成功了.....

这时你就可以创建app相关项目了,命令如下:

$ cordova create sansiyueapp
$ cd sansiyueapp

一个app相关的空项目就算建好了.接着我们来创建 ios 和 android 相关应用.

ios版:

$ cordova platform add ios

非常顺利,你可以在Finder中看到 sansiyueapp 目录 platforms文件夹下看到 ios 文件夹,已经创建成功,你可以用xcode开发这个项目.

android版:(稍微做一点心理准备,也许你也会碰到下面的坑)

$ phonegap run android
或者
$ cordova platform add android

上面的2种命令方式是一致的,选择其中一种运行即可

上面的错误大致是在生产安卓应用的时候,没有找到android_home 环境变量的支持.因为我的环境已经安装了jdk ,如果你发现和上面的错误不一样,请按照下面的几个步骤排查

需要如下环境支持:

JDK、Android SDK、Apache Ant

对应下载地址:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

http://developer.android.com/sdk/index.html

http://ant.apache.org/bindownload.cgi

因为我的环境之前安装了jdk,所以这里忽略了.....

apache_ant安装:

根据上面提供的地址进入下载页,中间靠下的位置可以看到下面列出的3个压缩包,你可以下载任意一个,我是用的中间这个压缩文件.

我把解压出来的文件夹拷贝的 /usr/local/ 目录下, (如果你Finder 中找不到此文字,在终端用命令拷贝)

$ cp -rf ~/Download/apache-ant-1.9.4 /usr/local/

这里注意一下,为了让你当前登录帐号在未来的日子里有足够权限访问此文件夹,需要你用命令给此文件夹赋权限.

首先要知道你的 用户名和所在的用户组,如何知道? 系统偏好设置 --> 用户与用户组

第一步解锁, 接着第二步在当前账号 右键高级选项 ,见下图:

红框处的用户名和群组需要你记下来,然后执行下面命令赋权限

chown zhangzhi:staff apache-ant-1.9.4

接着运行下面命令

ln -s apache-ant-1.9.4 ant

这时你/usr/local/目录下会多出来一个 ant的文件快捷方式

接着写一个 apache_ant 应用的全局变量:

$ nano /etc/bashrc

红框处的内容写到文件中,保存退出.

export ANT_HOME=/usr/local/ant

export PATH=${PATH}:${ANT_HOME}/bin

这样你的 apache_ant  环境变量就配置好了.终端看下:

$ ant -version

看到版本是 1.9.4,说明环境变量生效了.

Android SDK 安装配置

还是上面贴出的官网地址: http://developer.android.com/sdk/index.html  (或许你需要翻墙,如果你还没有vpn,请点击查看此博文)

我直接下载了 android-studio-ide-1641136.dmg 这个是google官方推出的IDE开发环境,集成了SDK,当然你可以不安装IDE,只安装SDK也可以,但是后面生成的app毕竟要编译,虚拟机部署,所以你值的拥有此IDE

安装很简单,双击,把应用拖到Application 应用列表即可.

注意: cordova 生成 android应用的时候需要 android_sdk 环境变量,但是安装 android-studio 并不会自动写入 sdk的环境变量,需要手动设置.

你查找 sdk所在目录是  ~/Library/Android/sdk 但是这个相对路径是你当前登录帐号映射的目录,环境变量需要绝对路径(也就是说root帐号也必须能找到此路径)

所以环境变量需要切换root帐号查看  /Users/zhangzhi/Library/Android/sdk

$ nano ~/.bash_profile

写入 环境变量  export ANDROID_HOME="/Users/zhangzhi/Library/Android/sdk"

生成 android 应用所需要的前提条件到此都齐了,万事俱备只欠东风!

进入 sansiyueapp 目录

zhangzhi@moke:~$ cd sansiyueapp
zhangzhi@moke:~/sansiyueapp$ cordova platform add android
Creating android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: com.phonegap.helloworld
	Name: Hello World
	Android target: android-19
Copying template files...
Project successfully created.
cp: no such file or directory: /Users/zhangzhi/sansiyueapp/icon.png

OK,android应用生成也成功了.从Finder中查看目录

xcode 打开ios项目,编译运行模拟器如下:

android 应用模拟器截图回头补上.