Ionic01 簡單介紹、環境搭建、創建項目、項目結構、創建組件、創建頁面、子頁面跳轉

 

1 Ionic 基本介紹

　　Ionic 是一款基於 Angular、Cordova 的強大的 HTML5 移動應用開發框架 , 可以快速創建一個跨平台的移動應用。可以快速開發移動 App、移動端 WEB 頁面、微信公眾平台應用，混
合 appweb 頁面。

　　Ionic官網

　　1.1 ionic、cordova、angular之間的關系

　　　　ionic=Cordova+Angular+ionicCSS

　　　　Ionic 是完全基於谷歌的 Angular 框架，在 Angular 基礎上面做了一些封裝，讓我們可以更快 速和容易的開發移動的項目。Ionic 調用原生的功能是基於 Cordova,Cordova 提供了使用 JavaScript 調用 Native 功能，ionic 自己也封裝了一套漂亮的 CSSUI 庫。

 

2 Ionic環境搭建

　　2.1 安裝Node.js

　　　　詳情參見度娘

　　　　技巧01：安裝完node.js后就可以使用npm命令了

　　　　　　

　　2.2 安裝 cordova、ionic

　　　　技巧01：利用 npm 安裝cordova和ionic，如果安裝失敗請換cnpm進行安裝

　　　　技巧02：使用cnpm前需要利用npm進行安裝    ->    npminstall-gcnpm--registry=https://registry.npm.taobao.org

npm install -g cordova ionic

 　　　　　　

　　2.3 開發工具

　　　　2.3.1 webstorm

　　　　　　功能強大，就是有點卡

　　　　2.3.2 vsCode

　　　　　　angular官方推薦，原因你懂的

 

3 新建Ionic項目

　　使用 ionic start 命令來創建應用。可以選擇創建一個空白的應用，或是基於已有的模板來創建應用；ionic start 命令的第一個參數是應用的名稱，會作為包含生成的骨架代碼的目錄的名稱；第二個參數是模板的名稱。Ionic 默認提供了7種模板。這些模板也可能隨着 Ionic 的版本升級而不斷變化。

ionic start 項目名稱 項目模板

　　技巧01：項目創建完畢后，進入到新建項目的根目錄執行 ionic serve 就可以啟動項目【PS: 和angualr類似，僅僅更換了關鍵字而已】

》空白應用：模板名稱為 blank。生成的應用是空白的，適合於已有經驗的開發人員。
》底部標簽式應用：模板名稱為 tabs。生成的應用的底部是一個標簽頁，每個標簽可以有自己的頁面。
》帶側邊欄菜單的應用：模板名稱為 sidemenu。生成的應用的左上角是一個可以打開側邊欄菜單的按鈕。也可以通過手指向右滑動來打開側邊欄。
》超級完整版的應用：模板名稱為 super。生成的應用非常完備，包含了很多作為示例的頁面。建議初學者從這些頁面中學習 Ionic 應用開發的最佳實踐。
》會議應用：模板名稱為 conference。這是一個完整的、現實世界中的、使用 Ionic 開發的會議日程相關的應用。
》教程應用：模板名稱為 tutorial。這是與 Ionic 官方教程相對應的模板。
》AWS Mobile 應用：模板名稱為 aws。這是使用 AWS Mobile 作為后台的應用模板。

 

4 目錄結構分析

hooks：編譯 cordova 時自定義的腳本命令，方便整合到我們的編譯系統和版本控制系統中 node_modules ：node 各類依賴包 
resources ：android/ios 資源（更換圖標和啟動動畫） 
src：開發工作目錄，頁面、樣式、腳本和圖片都放在這個目錄下 
www：靜態文件 
platforms：生成 android 或者 ios 安裝包路徑（ platforms\android\build\outputs\apk：apk 所在位置）執行 cordova platform add android 后會生成
plugins：插件文件夾，里面放置各種 
cordova 安裝的插件 
config.xml: 打包成 app 的配置文件 
package.json: 配置項目的元數據和管理項目所需要的依賴 
tsconfig.json: TypeScript 項目的根目錄，指定用來編譯這個項目的根文件和編譯選項 tslint.json：格式化和校驗 typescript

　　4.1 src文件詳解

app：應用根目錄 
assets：資源目錄（靜態文件（圖片，js 框架。。。）
pages：頁面文件，放置編寫的頁面文件，包括：html，scss，ts。 
theme：主題文件，里面有一個 scss 文件，設置主題信息。

　　　　

 

5 創建組件

　　5.1 ionic 創建命令組件

　　　　技巧01：在項目根目錄下執行相關命令可以查看ionic支持創建哪些命令

ionic generate --help 

　　　　　　

　　5.2 創建組件

　　　　技巧01：創建第一個組件時會自動生成一個組件模塊，並將新創建的組件添加到這個模塊中；之后創建的模塊都會添加到這個模塊中（即：所有的組件都從屬與這個模塊）；直接將這個模塊在主模塊中進行引入並聲明就可以在任何地方使用了。

ionic generate component 組件名稱

　　5.3 引入並聲明組件

　　　　

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ComponentsModule } from '../components/components.module';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

　　5.4 使用組件

　　　　技巧01：和angular中使用組件的方式一樣，只要在相應模塊中引入並聲明后就可以使用了【PS: 本博文直接將需要使用組件所在的模塊引入的】

　　　　》在home頁面中使用

　　　　　　技巧01：頁面也相當於一個組件

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <hr/>
  <div>
    <news></news>
  </div>
</ion-content>

　　5.5 組件采坑

　　　　5.5.1 問題

　　　　　　在新創建的組件中直接使用angular相關的指令時會報錯，例如：使用*ngFor指令的錯誤信息如下 ，意思是：li命令沒有*ngFor這個屬性

　　5.5.2 解決

　　　　在組件所在模塊中引入並聲明  BrowserModule 模塊即可

import { NgModule } from '@angular/core';
import { NewsComponent } from './news/news';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    declarations: [NewsComponent],
    imports: [
        BrowserModule
    ],
    exports: [NewsComponent]
})
export class ComponentsModule {}

 

 6 創建頁面及頁面跳轉

　　6.1 創建頁面

　　　　技巧01：創建頁面時，會自動為每個頁面創建一個模塊

 ionic generate page 頁面名

　　6.2 頁面引入和聲明

　　　　技巧01：新創建的頁面必須在跟模塊中進行引入和聲明后才可以使用

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ComponentsModule } from '../components/components.module';
import { NewsPage } from '../pages/news/news';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [  // 不需要在模板中使用時需要進行的聲明
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

　　6.3 頁面跳轉

　　　　技巧01：在tabs頁面中按照套路修改ts文件和模板文件就行啦　　　

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { NewsPage } from '../news/news';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = NewsPage;

  constructor() {

  }
}

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="News" tabIcon="apps"></ion-tab>
</ion-tabs>

　　6.4 效果展示

　　　　

 

7 子頁面跳轉

　　技巧01：從一個頁面跳轉到子頁面可以利用依賴注入的 NavController 實現

　　技巧02：子頁面必須在根模塊中進行引入和聲明

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NewsInfoPage } from '../news-info/news-info';

/**
 * Generated class for the NewsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {

  newsList : string[] = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NewsPage');
    for(let i = 0; i < 10; i++) {
      this.newsList.push("這是第" + i + "新聞");
    }
  }

  onNewsInfoPage(event: Event): void {
    console.log(event);
    this.navCtrl.push(NewsInfoPage);
  }

}

　　7.1 隱藏tabs菜單

　　　　7.1.1 需求

　　　　　　當跳轉到子頁面后，將tabs菜單隱藏掉

　　　　7.1.2 解決

　　　　　　直接在根模塊中對 IonicModule.forRoot() 進行相應的配置即可

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ComponentsModule } from '../components/components.module';
import { NewsPage } from '../pages/news/news';
import { NewsInfoPage } from '../pages/news-info/news-info';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    // IonicModule.forRoot(MyApp) // 默認配置
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: "true" // 進入子頁面后隱藏tabs菜單配置
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [  // 不需要在模板中使用時需要進行的聲明
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

　　7.2 返回按鈕配置

　　　　7.2.1 需求

　　　　　　修改子頁面的分返回按鈕提示信息

　　　　7.2.2 解決

　　　　　　直接在根模塊中對 IonicModule.forRoot() 進行相應的配置即可

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ComponentsModule } from '../components/components.module';
import { NewsPage } from '../pages/news/news';
import { NewsInfoPage } from '../pages/news-info/news-info';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    // IonicModule.forRoot(MyApp) // 默認配置
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: "true", // 進入子頁面后隱藏tabs菜單配置
      backButtonText: "返回" // 修改子頁面返回按鈕文本信息
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [  // 不需要在模板中使用時需要進行的聲明
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

　　　　7.2.3 子頁面效果圖