歡迎頁面

2 歡迎頁的實現

2.1 任務描述

2.1.1 任務介紹

• 實現程序的歡迎頁面

2.1.2 任務要求

2.1.2.1 程序歡迎頁面需求

用戶場景：用戶在界面上左右滑動，輪流顯示三張圖片，通過這三張圖片簡單介紹軟件。

輸入/前置條件：程序第一次運行時或者程序版本升級后第一次運行時，進入歡迎頁。

流程說明：無

需求描敘：

輸出/后置條件：根據用戶的操作進入登錄頁或者注冊頁。

版本說明：

2.2 工作指導說明

資源名稱	下載鏈接
啟動屏幕圖片壓縮包	百度雲下載

2.2.1 創建歡迎頁組件

在src\app目錄下創建pages文件夾，在命令符號（cmd）下，進入項目的根目錄執行下面的命令：

ionic generate page pages/welcome

或者

ionic g page welcome

或者

ionic g page welcome --no-module

該命令會在src\app\pages目錄中自動生成以下幾個文件

文件名	說明
welcome.page.html	HTML模板
welcome.module.ts	模塊
welcome.page.scss	私有的樣式表，app-welcome{}是一個元素選擇器，名稱和welcome.page.ts文件中元數據的選擇器是一致的， selector: 'app-welcome'。相當於有一個自定義的元素
welcome.page.ts	組件的類（class）代碼

要了解更多ionic generate 的知識，請參考官網

2.2.3 歡迎頁設置成默認頁

1. 修改app-routing.module.ts文件。

    src\app\app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'welcome', // 原來是home
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  },
  // 下面這行代碼是在創建頁面時，ionic自動更新的
  { path: 'welcome', loadChildren: './welcome/welcome.module#WelcomePageModule' }
];

2. 執行ionic serve檢查第一個出現的界面是否是歡迎頁面。
   

2.2.2 為界面添加輪播

1. 在\src\assets目錄中創建img文件夾，把splsh_one.png、splsh_two.png和splsh_three.png三張圖片拷貝到img的目錄中。也可以先復制圖片，然后在Webstorm中，在img目錄上點擊右鍵，選擇“Paste”菜單項。或者在img目錄上直接Ctrl+V，就能夠把文件快速地拷貝到制定目錄中。
   

2. 修改HTML模板文件，為<ion-content>元素刪除padding屬性，添加no-padding屬性，並添加<ion-slides>子元素。

  \src\app\pages\welcome\welcome.page.html

<!-- 其他省略 -->
<ion-content no-padding >
  <ion-slides pager="true">
    <ion-slide>
      <img src="/assets/img/splsh_one.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="./assets/img/splsh_two.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="assets/img/splsh_three.png" alt="">
    </ion-slide>
  </ion-slides>
</ion-content>

ion-content：內容組件提供了易於使用的內容區域。
ion-slides：幻燈片（輪播、旋轉木馬）組件是個多節容器。每個部分都可以在其間滑動或拖動。它包含任意數量的Slide組件。
ion-slide：滑動組件是Slides的子組件。任何幻燈片內容都應該寫在此組件中，並且應該與幻燈片一起使用。。
no-padding：

要了解更多Slides 的知識，請參考官網

要了解更多Slide 的知識，請參考官網

在之前的頁面或者代碼中出現過“/”、“./”，我們了解這些路徑的區別。

語法	說明
/	根目錄開始
./	當前目錄開始
../	上一級目錄開始

有開發過多頁面應用（MPA，Multi-page Application）的同學可能感到很奇怪，welcome.page.html和assets根本不在同一級目錄下，在瀏覽器上運行時正常會報404錯誤。想要訪問assets目錄下的文件，常規的寫法“../../../”。然而單頁面應用（SPA，Single-page Application）只顯示一個index.html頁面，相應的頁面僅僅替換index.html的某個區域。

4. 查看界面是否修改成功。
   切換到瀏覽器，不需要按F5刷新，等待console提示編譯完畢，瀏覽器上就能夠顯示新的界面。

注意：在實際的前端開發中，組件中用到的圖片應放在各自組件的images目錄中。編譯時可以使用webpack把圖片拷貝到www\assets\img目錄中

2.2.3 添加“跳過”按鈕

在標題欄的右邊添加“跳過”按鈕。當滑動到第一張或者第二張圖片時，顯示“跳過”按鈕，當滑動到最后一張圖片時隱藏“跳過”按鈕。

2.2.3.1 在頭部右側添加“跳過”按鈕

1. 在模板文件中添加按鈕組件

/src/app/pages/welcome/welcome.page.html

<ion-header>
  <ion-toolbar no-border>
    <ion-buttons slot="end">
      <ion-button color="primary" >跳過</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

ion-header：標題組件是包含工具欄組件的父級組件。注意：ion-header必須是頁面的三個根元素之一（ion-content，ion-footer）。
ion-toolbar：工具欄組件
ion-buttons：按鈕組組件，用於存放1個或者多個按鈕。
ion-button：按鈕組件
借助標題等組件，可以使用Ionic提供的默認樣式，幫助我們快速定義好按鈕的外觀及位置。但是正常的歡迎頁面是不出現標題欄的，可以通過設置css中的background和bordy-color兩個屬性為透明，“隱藏”標題欄。

2. 設置工具欄透明

/src/app/pages/welcome/welcome.scss

app-welcome {
  ion-toolbar {
    --background: transparent;
    --border-color: transparent;
  }
}

在SCSS中app-welcome是一種元素選擇器，同樣ion-toolbar也是元素選擇器。ion-toolbar嵌套在app-welcome中表示子元素選擇器。意思是在頁面中作為app-welcome子元素的ion-toolbar元素才能應用--background: transparent和--border-color: transparent這兩種樣式。最終生成的css如下：

app-wlecome ion-toolbar {
  background: transparent;
  border-color: transparent;
}

在組件類中修改裝飾器，添加encapsulation元數據，提供模板和 CSS 樣式使用的樣式封裝策略。

/src/app/pages/welcome/welcome.ts

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.page.html',
  styleUrls: ['./welcome.page.scss'],
  encapsulation: ViewEncapsulation.None
})
export class WelcomePage implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

在iOS模式下測試通過，在md模式下發現工具欄的底部依舊存在一條邊，通過閱讀官方文檔發現，需要為ion-toolbar元素添加no-border屬性。

2.2.3.2 控制“跳過”按鈕的顯示或者隱藏

1. 在組件類中添加showSkip屬性控制跳過按鈕的顯示或者隱藏。

當showSkip值為true時，顯示“跳過”按鈕，當showSkip值為false時，隱藏“跳過”按鈕，
/src/app/pages/welcome/welcome.ts

export class WelcomePage implements OnInit {
  showSkip = false;
  ngOnInit() {
  }
}

2. 設置元素hidden屬性的綁定

/src/app/pages/welcome/welcome.page.html

<ion-button color="primary" [hidden]="!showSkip">跳過</ion-button>

要隱藏或顯示一個元素，綁定到它的 hidden 屬性就可以了。切換到瀏覽器查看跳過按鈕是否消失，再把showSkip的值改為true。

要了解更多屬性綁定的知識，請參考Angular官網

3. 利用slides的事件控制showSkip的值。

為組件類添加onSlideWillChange方法

/src/app/pages/welcome/welcome.ts

export class WelcomePage implements OnInit {
  showSkip = true;
  @ViewChild('slides', {static: false}) slides: IonSlides;
  constructor() { }

  ngOnInit() {
  }
  onSlideWillChange(event) {
    console.log(event);
    this.slides.isEnd().then((end) => {
      this.showSkip = !end;
    });
  }
}

另外一種實現方式

  onSlideWillChange(event) {
    event.target.isEnd().then((end) => {
      this.showSkip = !end;
    });
  }

在模板中實現事件綁定

/src/app/pages/welcome/welcome.html

<ion-slides #slides pager="true" (ionSlideWillChange)="onSlideWillChange($event)">

要了解更多事件綁定的知識，請參考Angular

slides這是angular中的本地變量，也可以不使用本地變量。

@ViewChild(IonSlides, {static: false})
slides: IonSlides;

要了解更多@ViewChild知識，請參考Angular官網

2.2.4 添加登錄和注冊按鈕

在第三個幻燈片中添加登錄和注冊兩個按鈕，並且把這兩個按鈕固定在界面的底部。

1. 添加.fixed-bottom樣式

/src/app/pages/welcome/welcome.scss

app-welcome {
  .fixed-bottom{
    position: absolute;
    bottom: 0;
    z-index: 10;
  }
}

2. 在welcome.html文件中添加登錄和注冊按鈕

修改ion-slides元素中的第三個ion-slide元素

/src/app/pages/welcome/welcome.html

<!--其他省略-->
<ion-grid>
  <ion-row>
    <ion-col>
      <img src="assets/img/splsh_three.png">
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="primary" fill="outline" expand="block">登錄</ion-button>
    </ion-col>
    <ion-col>
      <ion-button color="primary" expand="block">注冊</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

要了解更多Grid的知識，請參考官網

要了解更多Buttons的知識，請參考官網

2.3 產品工作要求

2.4 產品檢查要求

1. 編寫TypeScript代碼時，盡量遵守TSLint配置好的規范