一.專案開發目標

• 目標：開發一款論壇相關的APP

二.tab元件佈局以及圖示選擇

• page/tabs資料夾下有對應icon的設定

• 圖示選取的網站:ionicframework.com/docs/ionicons,將對應的icon名字拷貝過來放置成ion-tab標籤中的tabIcon的值

• ion-tab標籤屬性

  • tabTitle：Tab標題名
  • tabIcon：Tab圖示
  • [root]：對應的Tab頁面名

• 例項程式碼

  • html程式碼

    <ion-tabs
     
    >
    
      <ion-tab tab="home">
        <ion-router-outlet name="home"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="discovery">
        <ion-router-outlet name="discovery"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="chat">
        <ion-router-outlet name
     
    ="chat"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="notifications">
        <ion-router-outlet name="notifications"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="more">
        <ion-router-outlet name="more"></ion-router-outlet>
      </ion-tab>
     
    
    
      <ion-tab-bar slot="bottom">
    
        <ion-tab-button tab="home" href="/tabs/(home:home)">
          <ion-icon name="list-box"></ion-icon>
          <ion-label>Home</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="discovery" href="/tabs/(discovery:discovery)">
          <ion-icon name="navigate"></ion-icon>
          <ion-label>Discovery</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="chat" href="/tabs/(chat:chat)">
          <ion-icon name="chatbubbles"></ion-icon>
          <ion-label>Chat</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="notifications" href="/tabs/(notifications:notifications)">
          <ion-icon name="notifications"></ion-icon>
          <ion-label>Notifications</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="more" href="/tabs/(more:more)">
          <ion-icon name="menu"></ion-icon>
          <ion-label>more</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    
    </ion-tabs>
    

三.五個一級基礎頁面的建立與除錯

• 通過ionic執行ionic generate(簡寫:ionic g)會提示建立的內容，選擇page則可以建立元件，之後按照提示輸入元件名，即自動生成對應元件[也可以通過ionic g page 元件名直接生成對應元件]

• 執行安裝元件命令，並刪除之前無用的元件

  ionic g page home
  ionic g page discovery
  ionic g page chat
  ionic g page notifications
  ionic g page more
  

• 修改對應程式碼

  • tabs.page.html

    <ion-tabs>
    
      <ion-tab tab="home">
        <ion-router-outlet name="home"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="discovery">
        <ion-router-outlet name="discovery"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="chat">
        <ion-router-outlet name="chat"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="notifications">
        <ion-router-outlet name="notifications"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="more">
        <ion-router-outlet name="more"></ion-router-outlet>
      </ion-tab>
    
      <ion-tab-bar slot="bottom">
    
        <ion-tab-button tab="home" href="/tabs/(home:home)">
          <ion-icon name="list-box"></ion-icon>
          <ion-label>Home</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="discovery" href="/tabs/(discovery:discovery)">
          <ion-icon name="navigate"></ion-icon>
          <ion-label>Discovery</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="chat" href="/tabs/(chat:chat)">
          <ion-icon name="chatbubbles"></ion-icon>
          <ion-label>Chat</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="notifications" href="/tabs/(notifications:notifications)">
          <ion-icon name="notifications"></ion-icon>
          <ion-label>Notifications</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="more" href="/tabs/(more:more)">
          <ion-icon name="menu"></ion-icon>
          <ion-label>more</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    
    </ion-tabs>
    

  • tabs.router.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    import { TabsPage } from './tabs.page';
    import { HomePage } from '../home/home.page';
    import { DiscoveryPage } from '../discovery/discovery.page';
    import { ChatPage } from '../chat/chat.page';
    import { NotificationsPage } from '../notifications/notifications.page';
    import { MorePage } from '../more/more.page';
    
    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: '',
            redirectTo: '/tabs/(home:home)',
            pathMatch: 'full',
          },
          {
            path: 'home',
            outlet: 'home',
            component: HomePage
          },
          {
            path: 'discovery',
            outlet: 'discovery',
            component: DiscoveryPage
          },
          {
            path: 'chat',
            outlet: 'chat',
            component: ChatPage
          },
          {
            path: 'notifications',
            outlet: 'notifications',
            component: NotificationsPage
          },
          {
            path: 'more',
            outlet: 'more',
            component: MorePage
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class TabsPageRoutingModule {}
    

  • tabs.modules.ts

    import { IonicModule } from '@ionic/angular';
    import { RouterModule } from '@angular/router';
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    
    import { TabsPageRoutingModule } from './tabs.router.module';
    
    import { TabsPage } from './tabs.page';
    import { HomePageModule } from '../home/home.module';
    import { DiscoveryPageModule } from '../discovery/discovery.module';
    import { ChatPageModule } from '../chat/chat.module';
    import { MorePageModule } from '../more/more.module';
    import { NotificationsPageModule } from '../notifications/notifications.module';
    
    @NgModule({
      imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        TabsPageRoutingModule,
        HomePageModule,
        DiscoveryPageModule,
        ChatPageModule,
        NotificationsPageModule,
        MorePageModule
      ],
      declarations: [TabsPage]
    })
    export class TabsPageModule {}
    

四.專案資料來源API解讀與測試工具Postman介紹

• IOS對API的要求是HTTPS請求
• 測試API我們通常採用Postman軟體進行測試【到官網下載Postman軟體直接執行就可以使用】