Ionic3.x+ 目錄結構分析、創建組件、創建 頁面、頁面跳轉

一，Ionic3.x目錄結構分析

 

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

src 工作目錄： 

 

 app：應用根目錄

assets：資源目錄（靜態文件（圖片，js 框架。。。）各

pages：頁面文件，放置編寫的頁面文件，包括：html，scss，ts。

theme：主題文件，裏面有一個 scss 文件，設置主題信息。

二、Ionic3.x src 裏面文件分析 

 

 三、app.module.ts 分析

 

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

//引入組件模板ComponentsModule
import { ComponentsModule } from "../components/components.module";
//引入根組件
import { MyApp } from './app.component';

//引入跳轉頁面
import { ClassificationPage } from '../pages/classification/classification';
import { EquipmentAccessoriesPage } from '../pages/equipment-accessories/equipment-accessories';
import {IntelligentFeedingPage} from '../pages/intelligent-feeding/intelligent-feeding';
import { IntelligentlyReadPage } from '../pages/intelligently-read/intelligently-read';
import { IntelligentWeighingPage } from '../pages/intelligent-weighing/intelligent-weighing';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ShoppingPage } from '../pages/shopping/shopping';
import {SignInPage} from '../pages/sign-in/sign-in';
import {RegisterPage} from '../pages/register/register';
import { ProductDetailsPage } from '../pages/product-details/product-details';
import { ProductDetailsPageModule } from '../pages/product-details/product-details.module';

//引入服務配置
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


// 引入硬件調用
import { Camera} from '@ionic-native/camera';
// ,{
//   tabsHideOnSubPages: 'true'         //隱藏全部子頁面tabs
// }
@NgModule({
  declarations: [
    MyApp,
    ClassificationPage,
    EquipmentAccessoriesPage,
    IntelligentFeedingPage,
    IntelligentlyReadPage,
    IntelligentWeighingPage,
    ContactPage,
    HomePage,
    TabsPage,
    ShoppingPage,
    SignInPage,
    RegisterPage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp),
    ProductDetailsPageModule //提供模板

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ClassificationPage,
    EquipmentAccessoriesPage,
    IntelligentFeedingPage,
    IntelligentlyReadPage,
    IntelligentWeighingPage,
    ContactPage,
    HomePage,
    TabsPage,
    ShoppingPage,
    ProductDetailsPage,
    SignInPage,
    RegisterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    ProductDetailsPageModule,//隱藏子也頁面的tabs需要引入
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 四、Ionic3.x 創建組件

1.  cd 到我們的項目目錄 
2. 通過 ionic g component 組件名稱創建組件
3. 創建完成組件以後會在 src 目錄下面多一個 components 的目錄，這個目錄裏面有我 們用命令創建的所有的組件。
4. 如果我們要使用這些組件必須在 app.module.ts 裏面註冊我們的模塊，註冊完成後就可以在 pages 裏面的其頁面裏面使用這些組件。

 

五、Ionic3.x 創建頁面以及頁面跳轉 

 

1. 跟創建組件一樣，cd 到項目根目錄，創建頁面 命令 ionic g page product-details（頁面名稱）
2. 路由跳轉（ionic路由跳轉也有三種方式，這裏只做頁面跳轉）

 

html

 

 

ts