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

转载 2016年08月30日 08:57:31

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/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 应用模拟器截图回头补上.

相关文章推荐

配置PhoneGap开发Android应用环境入门

1. 需求 Eclipse 3.4+ 本教程还有另外一个不使用Eclipse的版本,参照这里 。 2. 安装SDK + PhoneGap 下载并安装Eclips...

在Mac平台下搭建WebStorm+PhoneGap/Cordova开发App应用

IntelliJ IDEA 出品的Webstorm是javascript,html5等前端开发的最好的工具之一,本文介绍下如何在Mac环境下配置...
  • soft2buy
  • soft2buy
  • 2015年12月23日 14:12
  • 12139

mac 下配置phonegap(cordova)开发安卓苹果应用

phonegap是一个可以用html5来制作安卓和苹果应用的软件 nodejs(可以从官网下载) phonegap(cordova)通过npm安装 ...
  • KINGDVC
  • KINGDVC
  • 2015年06月06日 17:13
  • 692

PhoneGap(Cordova) :环境搭建(1) ------Android篇

改自:http://www.jb51.net/html5/80728.html Andriod下架设phoneGap环境。 1.下载phoneGap http...
  • qqGrid
  • qqGrid
  • 2014年11月30日 16:01
  • 1110

PhoneGap(Cordova) :js调用native(2) ------Android篇

本文讲解如何使用PhoneGap(Cordova) 调用Android中的方法
  • qqGrid
  • qqGrid
  • 2014年11月30日 16:10
  • 1364

PhoneGap/Cordova学习笔记--1.Android环境搭建

随着移动互联网时代的到来,许多传统行业公司开始向互联网公司转型,鉴于人力、财力、物力和HTML5的爆发,于是产生了混合开发Hybrid(Native原生+Web网页)APP。 了解PhoneGap/C...
  • Sjim_
  • Sjim_
  • 2015年12月26日 17:14
  • 444

【Cordova+Android+PhoneGAP-2.9】webAPP环境搭建

使用的是PhoneGAP2.9.0版本,此版本以后更名为cordova Android开发环境必须有JAVA环境+Android SDK SDK :software development kit 软...

Phonegap(Cordova)3.4 + Android 环境搭建

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。自2.9.0以后,不提供直接下载,需要用node.js来安装。网络上有很多其开发环境配置...
  • cwb1128
  • cwb1128
  • 2014年05月12日 09:12
  • 10815
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:mac环境下node.js和phonegap/cordova创建ios和android应用
举报原因:
原因补充:

(最多只允许输入30个字)