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

View Code

　　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>

View Code

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

View Code

 

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

View Code

　　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() { } }

TS

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

HTML

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

View Code

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

View Code

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

View Code

　　　　7.2.3 子頁面效果圖