針對(duì)Ionic-4
傳送門(mén)
跟著官方示例項(xiàng)目學(xué)Ionic-1(blank,tabs)
跟著官方示例項(xiàng)目學(xué)Ionic-2(tutorial,sidemenu)
跟著官方示例項(xiàng)目學(xué)Ionic-3(super)
跟著官方示例項(xiàng)目學(xué)Ionic-4(conference)
寫(xiě)在前面
最近在學(xué)Ionic,在通讀了Ionic官網(wǎng)的文檔后,大致了解了Ionic主要工作內(nèi)容:
- 在Angular的基礎(chǔ)上,提供了更適合移動(dòng)開(kāi)發(fā)的一系列組件.(menu,nav,card等).
- 在cordova的基礎(chǔ)上,提供了cordova插件的Typescipt封裝,使得調(diào)用cordova插件更容易.
- 提供了一組圖標(biāo)和主題,是的生成的移動(dòng)應(yīng)用更美觀.
然后,僅僅了解個(gè)大概可不算學(xué)會(huì)了Ionic,程序員學(xué)習(xí),提高最直接的方法就是閱讀源碼,特別是寫(xiě)的好的源碼,所幸Ionic官方提供了好幾套的示例程序,接前Ionic程序在vs code中斷點(diǎn)調(diào)試之后,我對(duì)幾個(gè)starter的源代碼進(jìn)行了閱讀,通過(guò)代碼閱讀,對(duì)Ionic如何進(jìn)行組件(compoent)和插件(plugin)的調(diào)用,程序的運(yùn)行情況有了更深入的了解.
starer 示例
| Starter | Description | 備注 |
|---|---|---|
| blank | A blank starter project | 空白項(xiàng)目(略過(guò)) |
| tabs | A starting project with a simple tabbed interface | 包含底部分頁(yè)的項(xiàng)目 |
| sidemenu | A starting project with a side menu with navigation in the content area | 包含滑動(dòng)菜單的項(xiàng)目 |
| tutorial | A tutorial based project that goes along with the Ionic | 基本的Ionic教程項(xiàng)目 |
| super | A starting project complete with pre-built pages, providers and best practices for Ionic development. | 包含推薦的開(kāi)發(fā)實(shí)踐的完整項(xiàng)目(頁(yè)面,服務(wù)劃分等) |
| conference | A project that demonstrates a realworld application documentation | 一個(gè)真實(shí)的演示項(xiàng)目 |
| aws | AWS Mobile Hub Starter | Amazon 移動(dòng)應(yīng)用 |
可以看出,前面4個(gè)是入門(mén)級(jí)別的,后面3個(gè)相對(duì)完整,有一定的借鑒意義.
tabs 工程
tabs 工程是通過(guò)官方開(kāi)始教程構(gòu)造的項(xiàng)目,Get started with Ionic Framework,
啟動(dòng)tabs可見(jiàn),這是一個(gè)包含3個(gè)頁(yè)面的應(yīng)用程序,每個(gè)頁(yè)面有標(biāo)題,內(nèi)容.
應(yīng)用的目錄結(jié)構(gòu)如下:
ionic-tabs-app/
|
|-- resources/ * 資源文件,分為Android和Ios
|
|-- src/
| |-- app/
| | ├── app.component.ts * 入口組件
| | └── app.module.ts * 主模塊
| | └── app.html * 主組件頁(yè)面布局
| | └── app.scss * 全局Sass
| | └── main.ts * 主程序
| |
| |-- assets/
| | ├── icon/
| | | └── favicon.ico * 頁(yè)面圖標(biāo)
| | |
| | └── imgs/
| | └── logo.png * 程序logo
| |
| |-- pages/ * 包含所有的頁(yè)面
│ │ ├── about/ * 關(guān)于頁(yè)面 page
│ │ │ ├── about.html * 關(guān)于頁(yè)面 template
│ │ │ └── about.ts * 關(guān)于頁(yè)面 code
│ │ │ └── about.scss * 關(guān)于頁(yè)面 stylesheet
│ │ │
│ │ ├── contact/ * 聯(lián)系人頁(yè)面 page
│ │ │ ├── contact.html * 聯(lián)系人頁(yè)面 template
│ │ │ └── contact.ts * 聯(lián)系人頁(yè)面 code
│ │ │ └── contact.scss * 聯(lián)系人頁(yè)面stylesheet
│ │ │
│ │ │── home/ * 主頁(yè)面 page
│ │ │ ├── home.html * 主頁(yè)面 template
│ │ │ └── home.ts * 主頁(yè)面 code
│ │ │ └── home.scss * 主頁(yè)面 stylesheet
│ │ │
│ │ │
│ │ │── tabs/ * 分頁(yè) page
│ │ │ ├── tabs.html * 分頁(yè) template
│ │ │ └── tabs.ts * 分頁(yè) code
| |
│ ├── providers/ * 包含所有的可注入服務(wù)
| |
│ ├── theme/ * 應(yīng)用主題文件
| | ├── variables.scss * 應(yīng)用scss變量
| |
| └-- index.html
|
|-- typings/ * JavaScript 類(lèi)型聲明
| └── cordova-typings.d.ts
|
|-- www/ * ionic serve 運(yùn)行時(shí)候生成站點(diǎn)目錄
| ├── assets/
| | ├── data/
| | |
| | ├── fonts/
| | |
| | ├── img/
| |
| │── build/
| |
| │── index.html
| |
| │── manifest.json
| |
| └── service-worker.js
|
├── .editorconfig * 代碼風(fēng)格
├── .gitignore * git忽略文件
├── LICENSE * License 文件
├── README.md * Readme
├── config.xml * Cordova 配置文件
├── ionic.config.json * Ionic 配置文件
├── package.json * Javascript 工程文件
├── tsconfig.json * typescript 編譯配置文件
├── tslint.json * TypeScript 書(shū)寫(xiě)規(guī)范規(guī)則文件
所有的ionic工程結(jié)構(gòu)都大致如此,隨著項(xiàng)目的復(fù)雜,pages和providers會(huì)有更多的東西.
index.html
與普通的angular區(qū)別不大,body中使用ion-app作為程序的入口
<ion-app></ion-app>
app目錄
- appModule.ts
a. 引入的ionic模塊有:
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
在@NgModule中可以看出,和普通的Angular不同,程序的主component并不是我們自己寫(xiě)的組件,而是IonicApp,它的template就是<ion-app>,然后通過(guò)給IonicModule傳遞MyApp的方式,把我們自己寫(xiě)的組件啟動(dòng)起來(lái).
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
b. 引入的ionic-native有:
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
包括StatusBar和SplashScreen
- app.html
僅一行代碼
<ion-nav [root]="rootPage"></ion-nav>
<ion-nav>導(dǎo)航組件作為T(mén)ab項(xiàng)目的主compent,提供了移動(dòng)端的標(biāo)準(zhǔn)棧式導(dǎo)航.
Navigation-doc
從生成的頁(yè)面中能發(fā)現(xiàn),實(shí)際上ionic會(huì)把<ion-nav>包裝到<ion-app>之中.
- app.component.ts
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
做了2件事,給ion-nav組件傳入root頁(yè)面為T(mén)abs頁(yè)面.構(gòu)造器傳入platform,statusBar,splashScreen.這是一個(gè)很標(biāo)準(zhǔn)實(shí)現(xiàn),當(dāng)平臺(tái)準(zhǔn)備就緒之后,給狀態(tài)欄設(shè)置默認(rèn)樣式,隱藏啟動(dòng)界面.
P.S. splash的圖片怎么設(shè)置?
在cordova的配置文件config.xml中,對(duì)不同的平臺(tái)有不同的<splash>
tabs目錄
代碼很少,核心就是<ion-tabs>以及<ion-tab>,結(jié)合官方文檔
Tabs-doc,每個(gè)tab配置有tabTitle標(biāo)題,tabIcon圖標(biāo),[root]每個(gè)分頁(yè)的根頁(yè)面.這里分別指向了HomePage,AboutPage,ContactPage三個(gè)頁(yè)面.
about,contact,home目錄
- html文件
每個(gè)頁(yè)面都很標(biāo)準(zhǔn),以相對(duì)復(fù)雜的contact為例
<!-- 頭部 -->
<ion-header>
<!-- title要嵌入到navbar中 -->
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<!-- 內(nèi)容部份 -->
<ion-content>
<!-- 通過(guò)list 的 list-header 和 item 配合,實(shí)現(xiàn)列表顯示 -->
<ion-list>
<ion-list-header>Follow us on Twitter</ion-list-header>
<ion-item>
<ion-icon name="ionic" item-start></ion-icon>
@ionicframework
</ion-item>
</ion-list>
</ion-content>
- ts文件
constructor(public navCtrl: NavController) {
}
都傳入了NavController,這個(gè)是由<ion-nav>組件創(chuàng)建并初始化的,作為一個(gè)Provider傳入page后,用它能讓頁(yè)面實(shí)現(xiàn)跳轉(zhuǎn),由于tab項(xiàng)目中的幾個(gè)都是單頁(yè)面,所以實(shí)際并沒(méi)有用到.
