ウェルカムページ

2ページを達成するためにようこそ

2.1タスク説明

2.1.1ミッションブリーフィング

• プログラムのウェルカムページを実装

  2.1.2ミッション要求

  2.1.2.1デマンドプログラムのウェルカムページ

  ユーザーシナリオ：ターンディスプレイの左右のスライドのユーザーインターフェイス、この簡単なソフトウェアによる三つの画像、3枚の写真。

入力/前提条件：プログラムは、ウェルカムページに、最初の実行後に最初の実行またはバージョンアップグレードです。

プロセスの説明：なし

需要ミャオ族徐：

出力/事後条件：ユーザーの操作ログインページまたは登録ページを入力します。

リリースノート：

2.2取扱説明書

リソース名	ダウンロードのリンク
起動画面の画像アーカイブ	Baiduのクラウドダウンロード

Welcomeページのコンポーネントの作成2.2.1

作成ページは、src \アプリディレクトリの下に、コマンド記号（CMD）で、プロジェクト、次のコマンドのルートディレクトリにフォルダ：

ionic generate page pages/welcome

若しくは

ionic g page welcome

若しくは

ionic g page welcome --no-module

コマンド\アプリ\ページディレクトリが自動的にSRCに次のファイルを生成します

ファイル名	説明
welcome.page.html	HTMLテンプレート
welcome.module.ts	モジュール
welcome.page.scss	プライベートスタイルシート、アプリケーション・歓迎{}は要素セレクタで、セレクタとメタデータファイルwelcome.page.tsの名前は、一貫している セレクター：「購入のApp-利用できます」。カスタム要素の同等
welcome.page.ts	Componentクラス（クラス）コード

イオンが生成する詳細については、を参照してください公式サイト

デフォルトのページとして2.2.3ウェルカムページ

1. アプリ-routing.module.tsファイルを変更します。

    src \アプリ\アプリ-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. 実行インターフェイスのイオンは、ウェルカムページの最初に発生したかどうかをチェックするのに役立ちます。
   

インターフェイスのためのカルーセルを追加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真、ディスプレイは、ボタン、ときshowSkip偽、非表示は、「スキップ」ボタン、「スキップ」
/src/app/pages/welcome/welcome.tsを

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

1. binding要素の隠し属性を設定します。

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

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

その上で、その隠された属性に結合要素を非表示にしたり表示するには。スキップボタンを表示するには、ブラウザに切り替えて、その後、showSkipの値がtrueに変更され、消えます。

より多くの結合特性を学習するには、参照してくださいアンギュラ公式サイト

1. 制御値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)">

それ以上の結合事象を学ぶために、参照してくださいアンギュラ

これは、ローカル変数の角のスライドで、あなたはローカル変数を使用することはできません。

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

より@ViewChildの知識を習得するには、参照してくださいアンギュラ公式サイト

2.2.4ログインボタンを追加登録

ログイン第三スライドに登録されている二つのボタンを追加し、これら二つのボタンインターフェースの底部に固定されています。

1. .fixedボトムスタイルを追加します。

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

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

1. welcome.htmlファイルに追加したボタンをログインと登録

改変イオンスライド要素第3のイオンスライド要素

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

より多くを学ぶためにグリッドは、を参照してください公式サイト

より多くを学ぶためのボタンは、を参照してください公式サイト

2.3製品の作業の要件

2.4製品の検査要件

1. 活字のコードを書くときとTSLint構成された仕様に従ってみてください