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

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
    :cold_sweat:
    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代码??楼主讲下原理吧 :smiley:
    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项目

本文链接:https://www.haomeiwen.com/subject/qjraxttx.html