歡迎頁面

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' }
];
           

1. 執行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的某個區域。

1. 檢視界面是否修改成功。

   切換到浏覽器，不需要按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兩個屬性為透明，“隐藏”标題欄。

1. 設定工具欄透明

/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時，隐藏“跳過”按鈕，

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

1. 設定元素hidden屬性的綁定

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

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

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

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

為元件類添加onSlideWillChange方法

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

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

1. 在welcome.html檔案中添加登入和注冊按鈕

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

<!--其他省略-->
<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配置好的規範