Ionic HTML5 混合APP开发框架-创建新页面和导航

Posted 2021-05-01 吾将上下学前端

Ionic 是一个html5混合APP开发框架。

一、安装Ionic

首先得需要安装最新版的Node.js。

$ npm install -g ionic cordova

安装完成之后，创建个目录，运行下面命令。

$ ionic start cutePuppyPics

要使用Ionic1。需要添加-v1参数。进入cutePuppyPics目录，运行下面命令，运行APP。

$ ionic serve

二、Ionic入门教程

这个简单教程将会带领你创建一个新的应用、并给这个应用添加页面、在页面之间进行导航。

依次运行下面的命令，即可创建一个教程入门用APP。

$ ionic start MyIonicProject tutorial

start为创建命令

MyIonicProject为应用名称

tutorial为启动模板

运行该命令后，不仅创建了项目，还会安装NPM模块、使得Cordova准备充分以待使用。

$ ionic serve

运行该命令后启动APP。

三、项目文件结构

在start命令创建的文件夹中，即生成一个典型的Cordova文件目录结构和特定于平台的项目文件，并且在这个目录里可以安装原生插件。

1. ./src/index.html

   这里是整个APP的入口文件，但是它的作用仅仅是引用包含启动APP的必要脚本和样式文件。在这个文件里，如果APP能够启动，必须包含<ion-app></ion-app>标签。并且有

   <script ></script>

   <script ></script>

   在本地开发环境下，第一个脚本引用将会引发404错误，因为它是在Cordova构建过程中注入到项目的。

   第二个脚本引用是合并了Ionic、Angular和APP的脚本文件之后的脚本文件。

2. ./src/

   在该目录是原始的、未经编译的项目代码。当我们运行ionic serve之后，该目录里的代码将会被编译成浏览器能懂、能运行的代码。所以我们可以使用抽象层更高的TypeScript。

   src/app/app.module.ts是APP运行时主要的入口。在这个文件内容的上面：

   @NgModule({  declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],  imports: [ BrowserModule, IonicModule.forRoot(MyApp)],  bootstrap: [IonicApp],  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],  providers: []})export class AppModule {}

   每个APP都由一个根模块来控制，也是我们启动APP的部分。

   在上面的代码中：该模块设置了根组件MyApp，它是src/app/app.component.ts文件。这是我们APP第一个加载的组件，通常它是一个用于加载其它组件的外壳。在app.component.ts，我们将模板设置成src/app/app.html。

3. ./src/app/app.html

   这个文件就是主要的模板文件。它的部分内容如下：

   <ion-nav id="nav" [root]="rootPage" #nav swipeBackEnabled="false"></ion-nav><ion-menu [content]="nav">  <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-menu担当side菜单，ion-nav组件担当主要的内容区域。ion-menu的content属性绑定到ion-nav组件的本地变量nav，所以使得ion-menu知道怎么变化。

四、创建更多页面并在页面间导航

在上面的代码中，ion-nav标签的[root]属性，这个属性设置了ion-nav组件的根页面，具体表现就是当ion-nav组件加载过后，通过rootpage引用的组件就会成为根页面。

在src/app/app.component.ts中，MyApp组件即在它的构造器中声明了这个：

...import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';...export class MyApp {  ...  // make HelloIonicPage the root (or first) page  rootPage: any = HelloIonicPage;  pages: Array<{ title: string, component: any }>;    constructor(private platform: Platform, private menu: MenuController, ...) {      ...    }  ...}

我们看到rootpage设置成HelloIonicPage，所以HelloIonicPage将是nav控制器第一个呈现的页面。

在src/pages/hello-ionic/文件夹中，打开hello-ionic.ts。

你会发现每个页面都有自己的文件夹，并且这个文件夹以页面名称命名。在每个这类文件夹中，有一个.html文件和一个.scss文件，名称同样如是。例如在hello-ionic/下，有hello-ionic.ts文件、hello-ionic.html文件、hello-ionic.scss文件。尽管这不是必要的，但是这样做有利于文件组织。

下面我们看看HelloIonicPage类，这个是一个Angular组件，可以使用所有的Ionic提供的指令，可以创建一个页面并由Ionic导航系统加载。

因为页面是被动态加载的，所以他们无需选择器。然后如果希望重写某个页面的默认样式，选择器也是有用的。（看hello-ionic.scss）

import { Component } from '@angular/core';@Component({  selector: 'page-hello-ionic',  templateUrl: 'hello-ionic.html'})export class HelloIonicPage {  constructor() {  }}

所有的页面都有一个类和一个相关的模板。让我们看看src/pages/hello-ionic/hello-ionic.html文件。这个页面的模板文件如下：

<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>

在这个页面中，<ion-navbar>就是一个模板（navigation bar）。当我们导航到这个页面的时候，这个navigation bar的按钮和标题将会页面过渡的一部分。

模板剩下的内容是标准的Ionic代码，用于设置内容区域和打印欢迎信息。

五、创建额外页面

为了创建额外页面，除了正确配置标题和任何其它我们想要navigation bar展示的内容以外，不需要做太多。

在src/pages/list/list.ts中，你将会看到一个新声明的页面：

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    });  }}

这个页面将会创建一个基本的列表。

总的来说，这个页面和HelloIonicPage非常类似。

六、页面导航

在五中ListPage类中有一段代码如下：

itemTapped(event, item) {    this.navCtrl.push(ItemDetailsPage, {      item: item    });}

我们在其中引用了ItemDetailsPage。这是一个tutorial教程入门的页面。为了使用它，需要将其导入到app/pages/list/list.ts中。如下：

import {ItemDetailsPage} from '../item-details/item-details';

保存之后，ionic serve将会重新编译APP来应用变化、并重新加载浏览器。这个时候，当我们再次浏览APP时，选择一个列表项目将会导航到项目详细内容页面。同时注意，菜单toggle按钮被一个back按钮替换。这是一个Ionic采用的原生样式，但是可以根据需要配置。

七、导航如何工作的？

Ionic的导航像一个简单的栈结构，当我们push新页面到栈顶，将会导致我们页面的变化并且呈现一个回退按钮。为了回退，我们可以将栈顶页面pop off。在构造器中我们设置了this.navCtrl，所以可以调用this.navCtrl.push()并传递目标页面参数，就能够导航到目标页面。同时我们也可以传递一个对象用于包含目标页面的数据。使用push导航到新页面很简单，但是Ionic的导航系统是非常灵活的。我们不仅可以通过href属性导航，还可以通过URL导航。

------转载需要注明原处：吾将上下学前端