阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 安装

      ionic 安装

      本站实例采用了 ionic v1.3.2 版本,使用的 CDN 库地址:

      <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
      <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
      

      ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download

      下载后解压压缩包,包含以下目录:

      css/               =>     样式文件
      fonts/             =>     字体文件
      js/                =>     Javascript文件
      version.json       =>     版本更新说明
      
      

      你也可以在 Github 上下载以下资源文件:https://github.com/driftyco/ionic(在release 目录中)。

      接下来,我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。

      <ion-header-bar class="bar-positive">
          <h1 class="title">Hello World!</h1>
      </ion-header-bar>
      
      <ion-content>
          <p>我的第一个 ionic 应用。</p>
      </ion-content>
      

      命令行安装

      首先您需要安装 Node.js,我们在接下来的安装中需要使用到其 NPM 工具,更多 NPM 介绍可以查看我们的NPM 文档

      然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考AndroidiOS 官方文档来安装。

      Window 和 Linux 上打开命令行工具执行以下命令:

      $ npm install -g cordova ionic
      

      Mac 系统上使用以下命令:

      sudo npm install -g cordova ionic
      

      提示:IOS 需要在 Mac Os X. 和 Xcode 环境下面安装使用。

      如果你已经安装了以上环境,可以执行以下命令来更新版本:

      npm update -g cordova ionic
      

      sudo npm update -g cordova ionic
      

      创建应用

      使用 ionic 官方提供的现成的应用程序模板,或一个空白的项目创建一个 ionic 应用:

      $ ionic start myApp tabs
      

      运行我们刚才创建的 ionic 项目

      使用 ionic tool 创建,测试,运行你的 apps(或者通过 Cordova 直接创建)。

      创建 Android 应用

      $ cd myApp
      $ ionic cordova platform add android
      $ ionic cordova build android
      $ ionic cordova emulate android
      
      

      如果一切正常会弹出模拟器,界面如下所示:

      创建 iOS 应用

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

      如果出现”ios-sim was not found.“错误,可以执行以下命令:

      npm install -g ios-sim
      

      如果一切正常会弹出模拟器,界面如下所示:

      Ionic Lab

      Ionic Lab 目前已停止更新。

      Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,Ionic Lab 将会满足你的需求。

      Ionic Lab 为开发者提供了一个更简单的方法来开始,编译,运行,和模拟运行 Ionic 的应用程序。

      Ionic Lab 支持的平台有:Window、Mac OS X、Linux,下载地址为:http://lab.ionic.io/,下载后直接安装即可。整个操作界面如下所示:

      通过以上界面你可以完成以下操作:

      • 创建应用
      • 预览应用
      • 编译应用
      • 运行应用
      • 上传应用
      • 运行日志查看 ……

      推荐使用 Sublime Text 作为 Ionic 项目的编辑器,我们可以通过 Ionic Lab 直接在 Sublime Text 上打开项目,如下图:

      Gif 操作演示

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录