Ionic - 開始項目

一、目錄結構分析

 

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 文件，設置主題信息。

 

二、src 下面文件分析

 

 

三、app.module.ts 分析

 

配置信息：

declaration 聲明組件
import 引入/依賴的模塊
bootstrap 啓動的模塊
entryComponents 配置不會在模板中使用的組件
provider 配置服務

 

 

//這個根模塊會告訴 ionic 如何組裝該應用
import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { ComponentsModule } from '../components/components.module'; 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 { NewsPage } from '../pages/news/news';
//底部 tab 切換
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({
declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    NewsPage,
    TabsPage
],imports: [
BrowserModule, ComponentsModule, IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [ /*配置不會在模板中使用的組件*/ MyApp,
AboutPage,
ContactPage,
    HomePage,
    NewsPage,
    TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

 

 

 

 

 

四、創建組件

 

創建的組件都需要在app.mudule.ts裏全局註冊

1、cd 到我們的項目目錄

2、通過 ionic g component 組件名稱創建組件

3、創建完成組件以後會在 src 目錄下面多一個 components 的目錄，這個目錄裏面有我們用命令創建的所有的組件。

4、如果我們要使用這些組件必須在 app.module.ts 裏面註冊（import）我們的模塊，註冊完成後就可以在page裏使用此組件

五、創建頁面以及頁面跳轉

1、cd 到我們的項目目錄

2、通過 ionic g page 組件名稱創建組件

3、import 目標頁面

4、給標籤增加click方法，並寫入方法內容，跳轉到步驟3裏import到頁面

 

關於導航，從一個頁面導航到另一個頁面，只需將新頁面推入或彈出到堆棧上即可： 

（1）push()：導航到新頁面 
（2）pop():倒退頁面