mac环境下node.js和phonegap/cordova创建ios和android应用
引用百度百科的一段描述: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/androidPackage: com.phonegap.helloworldName: Hello WorldAndroid 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 应用模拟器截图回头补上.