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开发环境(二)——使用Cordova代替PhoneGap创建项目

PhoneGap的官方文档说的很清楚。Cordova是PhoneGap的引擎,这两者的关系类似于WebKit与Chrome浏览器的关系。所以一些核心的基础操作对于Cordova与PhoneGap是相通...
  • dongdong9223
  • dongdong9223
  • 2015年06月24日 10:21
  • 1700

Phonegap Device 获取设备信息

phonegap获取手机设备信息  获取的手机的有 device.model     :返回设备的模型或产品的名称 device.cordova  :返回cordova的版本 device.uui...
  • aaawqqq
  • aaawqqq
  • 2014年03月13日 16:33
  • 20171

Mac下安装ionic和cordova,并生成iOS项目

http://www.jianshu.com/p/7a7abfa9f435 Mac下安装ionic和cordova,并生成iOS项目   作者 Springer 关注 2016...
  • ranjio_z
  • ranjio_z
  • 2017年03月22日 14:48
  • 1725

Android 移动APP开发——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova。它能让你使用HTML5轻松调用本地A...
  • qq_34483204
  • qq_34483204
  • 2016年12月28日 11:26
  • 696

用PhoneGap Build打包ask和ipa软件安装包

之前介绍了如何将eclipse的安卓工程改装成Phonegap项目,这里介绍将Phonegap工程发布生成各平台软件安装包的步骤:   将写好的HTML项目放在一个名为“www”的文件夹里(或者Ph...
  • cordova
  • cordova
  • 2016年03月11日 09:47
  • 3384

phonegap运行原理

用phonegap(现在名为cordova)来开发shoujiying
  • leftfist
  • leftfist
  • 2014年08月28日 20:01
  • 4345

phoneGap之Android环境搭建

PhoneGap说明 PhoneGap,一早就听说有这么一个神奇的应用,它可以把WEB项目打包成各种移动平台的应用程序。这里我就研究一下,把之前开发的WebRTC项目打包成Android平台的apk...
  • yy374864125
  • yy374864125
  • 2014年12月05日 15:21
  • 7356

PhoneGap与Cordova之间的关系

There has been some confusion in the PhoneGap community and to complement Simeon Bateman’s recent bl...
  • dipolar
  • dipolar
  • 2014年07月05日 15:49
  • 894

Mac中PhoneGap的安装与使用测试

首先,在安装phonegap之前需要安装nodejs,地址为http://nodejs.org/安装是dmg的向导式,不用多说 接下来安装phonegap,在终端中使用$ sudo npm ins...
  • gisxy
  • gisxy
  • 2014年02月21日 10:13
  • 2015

使用 Cordova 和 Vue.js 创建移动应用

前言:这是一个技术光速发展的时代,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 原文地址:使用 Cordova 和 Vue.js 创建移动...
  • gaowenhui2008
  • gaowenhui2008
  • 2016年12月15日 17:21
  • 5260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:mac环境下node.js和phonegap/cordova创建ios和android应用
举报原因:
原因补充:

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