Welcome to achieve 2 pages

2.1 Task Description

2.1.1 mission briefing

Implement the program welcome page

2.1.2 mission requirements

2.1.2.1 Demand program welcome page

User scenarios: The user interface on the left and right slide, in turn display three images, three pictures by this brief software.

Input / pre-condition: the program is first run or version upgrade after the first run, into the welcome page.

Process Description: None

Demand Miao Xu:
Welcome page prototype

Output / postcondition: the user's operation to enter the login page or registration page.

Release Notes:

2.2 Operating instructions

Resource Name	Download Link
Startup screen picture archive	Baidu cloud download

2.2.1 Creating Welcome Page Components

Creating pages folder under src \ app directory, at the command symbol (cmd), into the root directory of the project the following command:

ionic generate page pages/welcome

ionic g page welcome

ionic g page welcome --no-module

The command \ app \ pages directory automatically generate the following files in the src

file name	Explanation
welcome.page.html	HTML template
welcome.module.ts	Module
welcome.page.scss	Private stylesheet, app-welcome {} is an element selector, the selector and the name of the metadata file welcome.page.ts are consistent, Selector: 'App-available for purchase'. The equivalent of a custom element
welcome.page.ts	Component class (class) Code

To learn more ionic generate, refer to the official website

2.2.3 welcome page as the default page

Modify app-routing.module.ts file.

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

Execution interface ionic serve to check whether it is the first occurrence of the welcome page.

2.2.2 Adding carousel for the interface

在\src\assets目录中创建img文件夹，把splsh_one.png、splsh_two.png和splsh_three.png三张图片拷贝到img的目录中。也可以先复制图片，然后在Webstorm中，在img目录上点击右键，选择“Paste”菜单项。或者在img目录上直接Ctrl+V，就能够把文件快速地拷贝到制定目录中。
修改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的某个区域。

查看界面是否修改成功。
切换到浏览器，不需要按F5刷新，等待console提示编译完毕，浏览器上就能够显示新的界面。

注意：在实际的前端开发中，组件中用到的图片应放在各自组件的images目录中。编译时可以使用webpack把图片拷贝到www\assets\img目录中

2.2.3 添加“跳过”按钮

在标题栏的右边添加“跳过”按钮。当滑动到第一张或者第二张图片时，显示“跳过”按钮，当滑动到最后一张图片时隐藏“跳过”按钮。

2.2.3.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两个属性为透明，“隐藏”标题栏。

设置工具栏透明

/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 控制“跳过”按钮的显示或者隐藏

在组件类中添加showSkip属性控制跳过按钮的显示或者隐藏。

When showSkip true, the display "Skip" button, when showSkip false, the hide "Skip" button,
/src/app/pages/welcome/welcome.ts

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

Set the binding element hidden attribute

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

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

To hide or show an element binding to its hidden attribute on it. Switch to the browser to view the skip button disappears, then the value of showSkip changed to true.

To learn more binding properties, please refer Angular official website

Use slides event of the control value showSkip.

The method of adding a component class 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;
    });
  }
}

Another implementation

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

Realization event bindings in the template

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

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

To learn more binding events, please refer Angular

This is the angular slides in a local variable, you can not use local variables.

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

To learn more @ViewChild knowledge, please refer Angular official website

2.2.4 Login and register button added

Add .fixed-bottom style

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

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

Modified ion-slides elements third ion-slide element

/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 To learn more, please refer to the official website

Buttons To learn more, please refer to the official website

2.3 Product work requirements

2.4 Product inspection requirements

When writing TypeScript code and try to follow TSLint configured specifications

Welcome Page