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

作者: Springer | 来源:发表于2016-01-14 11:47 被阅读24293次

为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android.

Ionic(ionicframework一款接近原生的HTML5移动App开发框架　会html css js就可以开发app

博客地址: http://blog.img421.com/

ionic中文教程讲解的很清楚,此网站翻译了一些原官网文档,而且也有诸多例子,让我们能够更好的学习.本教程讲述一下ionic、cordova安装的具体内容.

1. 安装npm 、node.js

1.1 打开`终端(Terminal)`,分别输入以下内容:

npm -v

node -v

如果npm或者node可能并非最新版本或者没有安装,可以到nodejs官网下载最新版本.

下载好后双击下载的pkg包默认安装即可。

2.安装ionic和cordova

2.1 因为某些原因,国内的网络安装ionic和cordova 会出现错误,因此要跳过某些墙。采用淘宝NPM镜像。打开终端直接输入以下命令即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2 通过淘宝NPM镜像就可以安装ionic和cordova包.

输入在终端中以下内容:

sudo cnpm install -g cordova ionic

**ps:等待时间可能会长,请耐心等候**

输出以上内容即可安装成功。

2.3 安装成功以后,要查看安装的包内容是否全部都已安装.运行命令:

ionic info

上图中所显示的Not installed代表未安装,安装方式即为红色给出的内容,照着内容安装即可以.

**ps:不安装的情况下就是不能在此环境下编译等,但是对于浏览器运行无影响.**

`ios-sim`代表模拟器运行环境,

`ios-deploy`代表真机运行环境。

**ps:博主只安装了模拟器环境**

3. 项目

3.1 项目生成

终端运行

//进入桌面

cd ./Desktop

//生成demo_1文件项目

ionic start demo_1

如果创建`iOS`应用,`终端`运行:

cd demo_1

ionic platform add ios (可能会需要sudo)

ionic build ios

ionic emulate ios //模拟器运行

生成的iOS应用会在`platforms`文件夹中显示。

网友评论

2017CBwithMe:楼主你好，我先说说我的情况吧；

我现在使用的vm的虚拟机安装的mac os 10.12的系统。我的目的是达到像我在windows建立安卓平台的效果，插上usb连接电脑，运行ionic cordova run android -l 就这句命令，我编辑代码后保存，手机上APP自己刷新的DEBUG功能。
但是在苹果上我遇到很多问题，开始是build ios的时候，出现 **ARCHIVE FAILED** 这样的错误。查找资料才知道要在XCODE上登录ID，注册证书之类的。弄完这一切，archive success。
但就出现了我这么多天一直搞不定的错误，**EXPORT FAILED**,一直搞不清楚这个问题是什么情况，但我知道是XCODE有什么没对，但在网上找了找也没找到答案。
错误信息：
** EXPORT FAILED **

Error: Error code 70 for command: xcodebuild with args: -exportArchive,-archivePath,MyApp.xcarchive,-exportOptionsPlist,/Users/yeezy/cbe/platforms/ios/exportOptions.plist,-exportPath,/Users/yeezy/cbe/platforms/ios/build/device

下面是我一些配置信息；
global packages:

@IONIC/cli-utils : 1.3.0
Cordova CLI : 7.0.1
Ionic CLI : 3.3.0
local packages:

@IONIC/app-scripts : 1.3.7
@IONIC/cli-plugin-cordova : 1.3.0
@IONIC/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.3.0
System:

Node : v6.10.3
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.1
ios-sim : 5.0.13

Springer:抱歉，邮件没有收到上简书才到消息。你这个是导出。要导出先查看一下导出都需要什么证书等。命令的话，我看好像你使用的参数貌似有点问题

Springer:@melody_ha 修改文档权限

melody_ha:你好，iOS应用生成后，我xcode打开提示没有权限修改啊

在逃科学家:Mac下出现这样的问题:wenzhihangdeMacBook-Pro:textApp wenzhihang$ ionic platform add ios
The platform command has been renamed. To find out more, run:

ionic cordova platform --help

葛高召:楼主您好：
我这里是一个ionic工程，我按一下步骤出现报错：
先执行： ionic cordova run

在 cordova run ios 这一步报错：
Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'

麻烦您看下，thank you !!!

b77f8eef150b:你好，我用的是ionic3，按照您的操作，改成新命令都成功，就是最后用模拟器运行的时候，已经build成功了，但是出现一个错误，这是环境global packages:

@IONIC/cli-utils : 1.3.0
Ionic CLI : 3.3.0

System:

Node : v8.0.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 5.1.0
错误代码：
Signing Identity: "-"

/usr/bin/codesign --force --sign - --timestamp=none /Users/lzm/Desktop/demo_3/platforms/ios/build/emulator/MyApp.app

** BUILD SUCCEEDED **

Error: Cannot read property 'replace' of undefined

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova emulate ios (exit code 1).

朝洋:前段时间 ionic cli刚刚发布了3.0的版本, 这就是你出现问题原因之所在, 目前市面上的一切资料中的命令全部无法正常使用了, 所以建议你降级到ionic cli 2.x的版本. (怎么降级看后面)

当用ionic cli命令行创建项目的时候这个命令行工具(ionic cli)会到github上去下载项目的模板(那个模板在不断更新), 目前那个模板已经到了3.2.x版本, 这个模板的版本号就是Ionic Framework Version. 要使用这个模板需要在创建项目的时候加--v2的参数 (不然ionic cli会到github上下载ionic1.x的模板)

执行ionic info可以查看当前的ionic相关的环境变量, 这样有助于别人帮助你. 我的如下, FYI:

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.2 Build version 8E2002
安装ionic cli 2.x
确认你当前系统上ionic cli的版本ionic -v, 如果不是 ionic 2.x版本, 使用如下方式降级

npm uninstall -g ionic
npm cache clean
npm install -g ionic@2
ionic start your-project blank --v2 --id com.xxx.myproject
注:
ionic cli 2默认会创建ionic 1.x的项目, 如果要创建ionic2+(包括3)的项目, 需要多加了个--v2的参数. @2会自动下载最新的2.x版本, 不用给出具体的版本号.

如果报错,请贴出具体的错误信息, 比如我曾碰到过如下错误:

Mac上一条命令搭建环境: npm install -g ionic@2 cordova ios-sim ios-deploy

如果安装ios-deploy报错: npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy

执行sudo npm install -g ios-deploy --unsafe-perm=true解决

错误2: Error: Cannot find module 'q'

执行npm install --save q && npm install --save nopt解决

暮寒痴绝:为何我在2.1步的时候就失败了，，是什么原因

暮寒痴绝:谢谢楼主，康祝。

Springer:@暮寒痴绝这个你得看一下开源中国提供的是什么。具体地址我也忘了，我现在没上班，正在医院

暮寒痴绝:npm install -g cnpm --registry=https://registry.npm.ruby-china.org 是这样吗

圆圆的兔子:你好，请问一下。总是安装不了ios真机运行，只有simulator。。。系统提示之后出现
npm ERR! Please include the following file with any support request:
npm ERR! /Users/lijialu/npm-debug.log

Springer:@圆圆的兔子好的

圆圆的兔子:@Springer 已经查找解决方式，不知道后续效果怎样，但是目前可以成功安装。如果sudo cnpm install -g ios-deploy报错的话，可以试试sudo npm install -g ios-deploy --unsafe-perm=true

Springer:@圆圆的兔子这种情况是有些问题。我那时通过命令直接运行模拟器也会随机出现此种问题，刚开始以为类似Xcode编译错误,但查看不是那种原因。抱歉，目前也是未解决,因此是直接通过Xcode 运行安装

童井神:当进行到ionic start demo_1 时候下载
Installing npm packages...
npm WARN package.json ionic-project@1.1.1 No repository field.
npm WARN package.json ionic-project@1.1.1 No license field.
一直在下载状态，跟换了网络也不好使，这个该怎么处理啊。

Springer:@童井神你gem update 后试一下

Damon4Zhou:sudo npm set registry https://registry.npm.taobao.org
sudo npm install -g cordova ionic

Damon4Zhou:它是把js代码转换成了oc代码？？楼主讲下原理吧

Springer:@Damon4Zhou 除了插件。其余的是。你可以使用Safari进行iOS模拟器 js调试

Damon4Zhou:@Springer 对于iOS，是不是app里面所有的页面都是webview，可以这么理解吗？

Springer:@Damon4Zhou ionic是一种老式的使用H5开发iOS和Android应用的方式,你也可以使用新的语言React Native开发,当然对于H5实现复杂的或者交互性没有那么好的,你就可以使用iOS和Android的插件实现

Damon4Zhou:这种框架对于iOS开发有什么好处呢？？？

33ea243f8ac7:******************************************************
Dependency warning - for the CLI to run correctly,
it is highly suggested to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`

******************************************************
我的也是，一直报cordova,但是我已经安装上了，还是6.1.1版本的
ios:~ mac$ sudo cordova -v
Password:
6.1.1
怎么解决呀？

4c1de55b67de:@Springer 你好，我也报了一样的错，node版本也是最新的，6.2.0 还是提示这个问题，请问这个最后有解决吗

Springer:@33ea243f8ac7 你可以使用 node -v 查看一下node 版本是不是 4.2.0以上

Springer:@33ea243f8ac7 报Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova` 这种npm install 说明你的node js版本过低,要去nodejs 官网下载https://nodejs.org/en/版本

紫荆逸:cordova总安装失败怎么办，
lyw:~ david$ cordova -v
/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:53
throw err;
^

Error: EACCES: permission denied, open '/Users/david/.config/configstore/update-notifier-cordova.json'
You don't have access to this file.

at Error (native)

Springer:@紫荆逸你能看到Error: EACCES: permission denied, 这个是因为权限的原因。所以你在安装的时候要使用超级用户。sudo

2017CBwithMe:楼主你好，我先说说我的情况吧；

我现在使用的vm的虚拟机安装的mac os 10.12的系统。我的目的是达到像我在windows建立安卓平台的效果，插上usb连接电脑，运行ionic cordova run android -l 就这句命令，我编辑代码后保存，手机上APP自己刷新的DEBUG功能。
但是在苹果上我遇到很多问题，开始是build ios的时候，出现 **ARCHIVE FAILED** 这样的错误。查找资料才知道要在XCODE上登录ID，注册证书之类的。弄完这一切，archive success。
但就出现了我这么多天一直搞不定的错误，**EXPORT FAILED**,一直搞不清楚这个问题是什么情况，但我知道是XCODE有什么没对，但在网上找了找也没找到答案。
错误信息：
** EXPORT FAILED **

Error: Error code 70 for command: xcodebuild with args: -exportArchive,-archivePath,MyApp.xcarchive,-exportOptionsPlist,/Users/yeezy/cbe/platforms/ios/exportOptions.plist,-exportPath,/Users/yeezy/cbe/platforms/ios/build/device

下面是我一些配置信息；
global packages:

@IONIC/cli-utils : 1.3.0
Cordova CLI : 7.0.1
Ionic CLI : 3.3.0
local packages:

@IONIC/app-scripts : 1.3.7
@IONIC/cli-plugin-cordova : 1.3.0
@IONIC/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.3.0
System:

Node : v6.10.3
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.1
ios-sim : 5.0.13
Springer:抱歉，邮件没有收到上简书才到消息。你这个是导出。要导出先查看一下导出都需要什么证书等。命令的话，我看好像你使用的参数貌似有点问题
Springer:@melody_ha 修改文档权限
melody_ha:你好，iOS应用生成后，我xcode打开提示没有权限修改啊
在逃科学家:Mac下出现这样的问题:wenzhihangdeMacBook-Pro:textApp wenzhihang$ ionic platform add ios
The platform command has been renamed. To find out more, run:

ionic cordova platform --help
葛高召:楼主您好：
我这里是一个ionic工程，我按一下步骤出现报错：
先执行： ionic cordova run

在 cordova run ios 这一步报错：
Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'

麻烦您看下，thank you !!!
b77f8eef150b:你好，我用的是ionic3，按照您的操作，改成新命令都成功，就是最后用模拟器运行的时候，已经build成功了，但是出现一个错误，这是环境global packages:

@IONIC/cli-utils : 1.3.0
Ionic CLI : 3.3.0

System:

Node : v8.0.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 5.1.0
错误代码：
Signing Identity: "-"

/usr/bin/codesign --force --sign - --timestamp=none /Users/lzm/Desktop/demo_3/platforms/ios/build/emulator/MyApp.app

** BUILD SUCCEEDED **

Error: Cannot read property 'replace' of undefined

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova emulate ios (exit code 1).

朝洋:前段时间 ionic cli刚刚发布了3.0的版本, 这就是你出现问题原因之所在, 目前市面上的一切资料中的命令全部无法正常使用了, 所以建议你降级到ionic cli 2.x的版本. (怎么降级看后面)

当用ionic cli命令行创建项目的时候这个命令行工具(ionic cli)会到github上去下载项目的模板(那个模板在不断更新), 目前那个模板已经到了3.2.x版本, 这个模板的版本号就是Ionic Framework Version. 要使用这个模板需要在创建项目的时候加--v2的参数 (不然ionic cli会到github上下载ionic1.x的模板)

执行ionic info可以查看当前的ionic相关的环境变量, 这样有助于别人帮助你. 我的如下, FYI:

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.2 Build version 8E2002
安装ionic cli 2.x
确认你当前系统上ionic cli的版本ionic -v, 如果不是 ionic 2.x版本, 使用如下方式降级

npm uninstall -g ionic
npm cache clean
npm install -g ionic@2
ionic start your-project blank --v2 --id com.xxx.myproject
注:
ionic cli 2默认会创建ionic 1.x的项目, 如果要创建ionic2+(包括3)的项目, 需要多加了个--v2的参数. @2会自动下载最新的2.x版本, 不用给出具体的版本号.

如果报错,请贴出具体的错误信息, 比如我曾碰到过如下错误:

Mac上一条命令搭建环境: npm install -g ionic@2 cordova ios-sim ios-deploy

如果安装ios-deploy报错: npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy

执行sudo npm install -g ios-deploy --unsafe-perm=true解决

错误2: Error: Cannot find module 'q'

执行npm install --save q && npm install --save nopt解决
暮寒痴绝:为何我在2.1步的时候就失败了，，是什么原因
暮寒痴绝:谢谢楼主，康祝。
Springer:@暮寒痴绝这个你得看一下开源中国提供的是什么。具体地址我也忘了，我现在没上班，正在医院
暮寒痴绝:npm install -g cnpm --registry=https://registry.npm.ruby-china.org 是这样吗
圆圆的兔子:你好，请问一下。总是安装不了ios真机运行，只有simulator。。。系统提示之后出现
npm ERR! Please include the following file with any support request:
npm ERR! /Users/lijialu/npm-debug.log

Springer:@圆圆的兔子好的
圆圆的兔子:@Springer 已经查找解决方式，不知道后续效果怎样，但是目前可以成功安装。如果sudo cnpm install -g ios-deploy报错的话，可以试试sudo npm install -g ios-deploy --unsafe-perm=true
Springer:@圆圆的兔子这种情况是有些问题。我那时通过命令直接运行模拟器也会随机出现此种问题，刚开始以为类似Xcode编译错误,但查看不是那种原因。抱歉，目前也是未解决,因此是直接通过Xcode 运行安装
童井神:当进行到ionic start demo_1 时候下载
Installing npm packages...
npm WARN package.json ionic-project@1.1.1 No repository field.
npm WARN package.json ionic-project@1.1.1 No license field.
一直在下载状态，跟换了网络也不好使，这个该怎么处理啊。
Springer:@童井神你gem update 后试一下
Damon4Zhou:sudo npm set registry https://registry.npm.taobao.org
sudo npm install -g cordova ionic
Damon4Zhou:它是把js代码转换成了oc代码？？楼主讲下原理吧
Springer:@Damon4Zhou 除了插件。其余的是。你可以使用Safari进行iOS模拟器 js调试
Damon4Zhou:@Springer 对于iOS，是不是app里面所有的页面都是webview，可以这么理解吗？
Springer:@Damon4Zhou ionic是一种老式的使用H5开发iOS和Android应用的方式,你也可以使用新的语言React Native开发,当然对于H5实现复杂的或者交互性没有那么好的,你就可以使用iOS和Android的插件实现
Damon4Zhou:这种框架对于iOS开发有什么好处呢？？？
33ea243f8ac7:******************************************************
Dependency warning - for the CLI to run correctly,
it is highly suggested to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`

******************************************************
我的也是，一直报cordova,但是我已经安装上了，还是6.1.1版本的
ios:~ mac$ sudo cordova -v
Password:
6.1.1
怎么解决呀？

4c1de55b67de:@Springer 你好，我也报了一样的错，node版本也是最新的，6.2.0 还是提示这个问题，请问这个最后有解决吗
Springer:@33ea243f8ac7 你可以使用 node -v 查看一下node 版本是不是 4.2.0以上
Springer:@33ea243f8ac7 报Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova` 这种npm install 说明你的node js版本过低,要去nodejs 官网下载https://nodejs.org/en/版本
紫荆逸:cordova总安装失败怎么办，
lyw:~ david$ cordova -v
/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:53
throw err;
^

Error: EACCES: permission denied, open '/Users/david/.config/configstore/update-notifier-cordova.json'
You don't have access to this file.

at Error (native)
Springer:@紫荆逸你能看到Error: EACCES: permission denied, 这个是因为权限的原因。所以你在安装的时候要使用超级用户。sudo

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

1. 安装npm 、node.js

1.1 打开`终端(Terminal)`,分别输入以下内容:

2.安装ionic和cordova

2.1 因为某些原因,国内的网络安装ionic和cordova 会出现错误,因此要跳过某些墙。采用淘宝NPM镜像。打开终端直接输入以下命令即可。

2.2 通过淘宝NPM镜像就可以安装ionic和cordova包.

2.3 安装成功以后,要查看安装的包内容是否全部都已安装.运行命令:

3. 项目

3.1 项目生成

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS 技术文档收录

iOS开发札记

iOS开发与应用

iOS - Cordova

混合开发教程