Ionic2入坑基础教程和安装指南
creajoy
8年前
<h2><strong>安装Ionic</strong></h2> <p>Ionic 2 程序主要通过Ionic命令行工具 CLI 来创建和开发，并使用 Cordova 来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。</p> <h2><strong>安装Ionic CLI 和 Cordova</strong></h2> <p>要创建 Ionic 2 项目，你需要安装最新版本的 CLI 和 Cordova 。在此之前你需要安装最新版本的 Node.js 。 <a href="/misc/goto?guid=4959720361992225947" rel="nofollow,noindex">点这里</a> 下载安装 Node.js ，然后继续安装 Ionic CLI 和 Cordova 来进行应用程序开发：</p> <p>安装 Ionic</p> <pre> <code class="language-javascript">npm install -g ionic</code></pre> <p>安装 Cordova</p> <pre> <code class="language-javascript">npm install -g cordova</code></pre> <p>命令前面可能需要添加 sudo 提权来进行全局安装。</p> <p>安装完成后来创建你的第一个 Ionic 应用：</p> <pre> <code class="language-javascript">ionic start cutePuppyPics --v2</code></pre> <p>cutePuppyPics 可以替换成你的应用程序名称。 --v2 表示当前生成的是 Ionic 2 版本的应用，不添加则生成 Ionic 1 应用。</p> <p>创建完成后 cd 到你的程序目录中，执行 ionic serve 来启动你的Ionic应用，并确保测试在浏览器中能够正常显示：</p> <pre> <code class="language-javascript">cd cutePuppyPics ionic serve</code></pre> <h2><strong>平台指南</strong></h2> <p>对于那些为iOS和Android构建原生应用程序（大多数人），每个平台都有一定的功能和安装要求，才能充分利用Ionic和Cordova开发。</p> <p>对于iOS开发人员，并按照说明安装或升级Xcode，并注册开发人员帐户，开始为iOS开发应用程序。</p> <p>对于Android开发人员，并按照说明安装SDK或Android Studio，开始为Android开发应用程序。</p> <h2><strong>Ionic 2 基础教程</strong></h2> <p>确保完成之前的安装并测试启动成功。下面我们将启动新的应用程序，添加页面，并在这些页面之间导航等过程。 让我们开始吧！</p> <h2><strong>启动一个新的Ionic 2应用</strong></h2> <p>用 start 命令来创建一个新的Ionic 2应用。别忘了添加 --v2 来指定这是一个 Ionic 2 的应用程序。再添加一个 tutorial 参数，指定使用 tutorial 模版创建该应用。这样一个基于 TypeScript 的Ionic 2应用就被成功创建了。</p> <pre> <code class="language-javascript">ionic start MyIonic2Project tutorial --v2</code></pre> <p>在这个过程中将会下载 Ionic 2 库包，安装所需的npm模块，并为应用配置好Cordova。如果在创建时不指定 tutorial 参数，ionic默认使用 tabs 模版来创建应用。</p> <h2><strong>在浏览器中查看应用</strong></h2> <p>现在你可以 cd 到创建好的项目文件夹中，使用 serve 命令在浏览器中预览你的应用。</p> <pre> <code class="language-javascript">cd MyIonic2Project/ ionic serve</code></pre> <p><img src="https://simg.open-open.com/show/ba146c14760012d0b139cb372cc34663.png"></p> <p>如果成功启动，你将看到上面这样的欢迎界面。</p> <h2><strong>项目结构</strong></h2> <p>让我们来剖析一下Ionic 2应用，在我们创建的文件夹中，我们可以看到一个典型的Cordova项目结构。我们可以在其中安装原生插件，并创建平台特定的项目文件。</p> <h2><strong>./src/index.html</strong></h2> <p>src/index.html 是 Ionic 2 应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。 我们不会在这个文件中花费大量的时间。</p> <p>为了让应用正常运作，Ionic 2 会在HTML中寻找 <ion-app> 标记。 在这个例子中，我们有：</p> <pre> <code class="language-javascript"><ion-app></ion-app></code></pre> <p>并且在下方我们还能看到这样的脚本引用：</p> <pre> <code class="language-javascript"><script src="cordova.js"></script> <script src="build/polyfills.js"></script> <script src="build/main.js"></script></code></pre> <ul> <li> <p>cordova.js 是Cordova应用的需求文件，我们在开发过程中这个文件将会提示404错误，这不需要担心。Cordova将会在构建过程中自动注入这个文件。</p> </li> <li> <p>build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。</p> </li> <li> <p>build/main.js 是一个包含了Ionic, Angular和你的JS脚本的文件。</p> </li> </ul> <h2><strong>./src/app/app.component.ts</strong></h2> <p>在 app 文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行 ionic serve 时， app 中的代码将被编译成当前浏览器能够执行的javascript版本（当前是ES5）。也就是说我们可以使用TypeScript或更高级别的 ES6+ 进行开发，而在编译时会自动降级为浏览器可识别的版本。</p> <p>app.component.ts 是应用的入口文件。</p> <p>在文件中我们能够看到这样的结构：</p> <pre> <code class="language-javascript">@Component({ templateUrl: 'app.html' }) export class MyApp { constructor( ) }</code></pre> <p>每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的启动配置被放倒了 app.module.ts 文件中。</p> <p>在这个组件中，我们设置了模版文件 app.html ，下面我们来看一下这个文件。</p> <h2><strong>./src/app/app.html</strong></h2> <p>app.html 里是我们应用的主模版：</p> <pre> <code class="language-javascript"><ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Pages</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav></code></pre> <p>在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。</p> <p>接下来，我们来看看如何创建更多页面并执行基本的导航。</p> <h2><strong>添加页面</strong></h2> <p>现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。</p> <p>让我们看一下 app.html 页面的底部：</p> <pre> <code class="language-javascript"><ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav></code></pre> <p>注意 [root] 属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量 rootPage 引用的组件将是根页面。</p> <p>在 app.component.ts 中， MyApp 组件在其构造函数中指定：</p> <pre> <code class="language-javascript">... import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic'; ... export class MyApp { ... // make HelloIonicPage the root (or first) page rootPage: any = HelloIonicPage; constructor( public platform: Platform, public menu: MenuController ) { ... } ... }</code></pre> <p>我们看到 rootPage 设置成了 HelloIonicPage ，所以 HelloIonicPage 将是在nav控制器中加载的第一个页面。</p> <h2><strong>创建一个页面</strong></h2> <p>接下来，让我们看看我们正在导入的 HelloIonicPage 。在 src/app/pages/hello-ionic/ 文件夹中，找到并打开 hello-ionic.ts 。</p> <p>你可能已经注意到每个页面都有自己的文件夹，该文件夹以页面命名。 在每个文件夹内，我们还可以看到一个.html和一个.scss同名文件。 例如，在 hello-ionic/ 我们将找到 hello-ionic.ts ， hello-ionic.html 和 hello-ionic.scss 。 虽然使用这种模式不是必需的，但它可以有助于保持项目的组织结构。</p> <p>然后我们找到 HelloIonicPage 类，在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意，因为页面是动态加载的，所以它们没有选择器（ selector ）：</p> <pre> <code class="language-javascript">import { Component } from '@angular/core'; @Component({ templateUrl: 'hello-ionic.html' }) export class HelloIonicPage { constructor() { } }</code></pre> <p>所有的页面都会有一个类和一个关联的模版。让我们再看一下 src/app/pages/hello-ionic/hello-ionic.html ，这是一个模版页面：</p> <pre> <code class="language-javascript"><ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Hello Ionic</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h3>Welcome to your first Ionic app!</h3> <p> This starter project is our way of helping you get a functional app running in record time. </p> <p> Follow along on the tutorial section of the Ionic docs! </p> <p> <button ion-button color="primary" menuToggle>Toggle Menu</button> </p> </ion-content></code></pre> <p><ion-navbar> 是这个页面中导航栏的模版。当我们导航到这个页面，导航栏的按钮和标题作为页面转换的一部分进行过渡。</p> <p>模板的其余部分是标准的Ionic代码，用于设置我们的内容区域并输出我们的欢迎信息。</p> <h2><strong>创建其他页面</strong></h2> <p>要创建一个其他的页面，我们不需要太多的事情，只要确保配置标题和我们期望在导航栏显示的东西即可。</p> <p>让我们来看一下 src/app/pages/list/list.ts 。在这里，你会看到一个新的页面被定义：</p> <pre> <code class="language-javascript">import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { ItemDetailsPage } from '../item-details/item-details'; @Component({ templateUrl: 'list.html' }) export class ListPage { selectedItem: any; icons: string[]; items: Array<{title: string, note: string, icon: string}>; constructor(public navCtrl: NavController, public navParams: NavParams) { // If we navigated to this page, we will have an item available as a nav param this.selectedItem = navParams.get('item'); this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 'american-football', 'boat', 'bluetooth', 'build']; this.items = []; for(let i = 1; i < 11; i++) { this.items.push({ title: 'Item ' + i, note: 'This is item #' + i, icon: this.icons[Math.floor(Math.random() * this.icons.length)] }); } } itemTapped(event, item) { this.navCtrl.push(ItemDetailsPage, { item: item }); } }</code></pre> <p>此页面将创建一个包含多个项目的基本列表页面。</p> <p>总的来说，这个页面和我们之前看到的 HelloIonicPage 非常相似。 在下一节中，我们将学习如何导航到新页面！</p> <h2><strong>导航到页面</strong></h2> <p>回想上一部分我们在 ListPage 类中有一个函数，看起来像这样：</p> <pre> <code class="language-javascript">itemTapped(event, item) { this.navCtrl.push(ItemDetailsPage, { item: item }); }</code></pre> <p>你可能已经注意到我们引用了一个 ItemDetailsPage 。这是一个包含在教程启动器中的页面。我们要在 list.ts 中导入它，我们可以这样导入：</p> <pre> <code class="language-javascript">... import { ItemDetailsPage } from '../item-details/item-details'; ...</code></pre> <p>保存好之后。你会发现 ionic serve 将重新编译应用程序并刷新浏览器，你的修改将会出现在程序中。让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目，它将导航到项目详细信息页面！请注意，菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格，但可以按需配置。</p> <h2><strong>工作原理</strong></h2> <p>Ionic 2 导航的工作原理就像一个简单的堆栈，我们通过 push 将一个页面推到堆栈的顶端，这会让我们的应用前进一步并显示一个返回按钮。反之，我们也可以 pop 掉一个页面。因为我们在构造函数中设置了 this.navCtrl ，我们可以调用 this.navCtrl.push() ,并传递我们要导航到的页面。我们还可以传递一个数据对象给我们想要导航到的页面。使用 push 导航到新页面很简单，而且Ionic的导航系统非常的灵活。你可以查看 <a href="/misc/goto?guid=4959720362087817175" rel="nofollow,noindex">导航文档</a> 找到更多高级导航示例。</p> <p>当涉及到URL，Ionic 2的工作方式有点不同于Ionic 1。不使用URL导航，可以确保我们可以总是回到一个页面（例如应用程序启动）。这意味着我们不只是限于使用href来导航。无论怎样，我们仍然可以选择在必要时使用网址导航到某个网页。</p> <h2><strong>后续步骤</strong></h2> <p>到此你已经完成了Ionic 2基本教程，了解了Ionic 2并开始朝着掌握Ionic 2进发。有能力的话最好去 <a href="/misc/goto?guid=4958866117679173720" rel="nofollow,noindex">Ionic官网</a> 阅读完整的技术文档。</p> <ul> <li> <p>建议熟悉一下TypeScript的基本语法和使用，包括@types使用和d.ts编写。</p> </li> <li> <p>掌握Angular2的基本原理和开发思路。</p> </li> <li> <p>熟悉Ionic 2的所有Components和API。</p> </li> <li> <p>了解Cordova的使用方法和插件。</p> </li> </ul> <p> </p> <p> </p> <p>来自：https://segmentfault.com/a/1190000007131084</p> <p> </p>