第一个Ionic项目

参照Ionic官网教程教程,完成了第一个Ionic项目的创建。过程记录如下:

FOR IOS:

1、安装node.js
第一个Ionic项目_第1张图片
2、安装cordova和ionic

    npm install -g cordova ionic

这里写图片描述
3、创建项目

    ionic start myApp tabs

第一个Ionic项目_第2张图片

第一个Ionic项目_第3张图片
4、运行项目

    cd myApp
    ionic platform add ios
    ionic build ios
    ionic emulate ios

运行最后报错如下:
第一个Ionic项目_第4张图片

提示需要安装ios-sim,安装报错如下:

第一个Ionic项目_第5张图片

因为看到了报错信息中的ruby版本号,尝试将ruby切换到2.0之后,成功安装。

安装ios-sim之后运行ionic emulate ios报错如下
第一个Ionic项目_第6张图片

升级Xcode之后运行,继续报错:
Session could not be started: Error Domain=DTiPhoneSimulatorErrorDomain Code=2 "Simulator session timed out."
第一个Ionic项目_第7张图片

根据错误信息,尝试将platform目录下ios删除,重新执行如下命令:

    ionic platform add ios
    ionic build ios

再次启动模拟器成功

    ionic emulate ios

第一个Ionic项目_第8张图片

FOR Android:

搭建Android系统的运行环境,因为Android模拟器启动太慢,我使用Genymotion来替代Android模拟器作为模拟平台,启动速度增加不少。

Genymotion的安装根据官网step by step下来没有什么问题,启动之后界面如下:
第一个Ionic项目_第9张图片

点击’start’按钮启动模拟器

第一个Ionic项目_第10张图片

确保能够成功启动模拟器之后就可以将刚刚创建的项目放在模拟器上运行了,步骤如下:

    cd myApp
    ionic platform add android
    ionic build android
    ionic run android

运行效果:
第一个Ionic项目_第11张图片

你可能感兴趣的:(Ionic)