# 2 欢迎页的实现
## 2.1 任务描述
### 2.1.1 任务介绍
- 实现程序的欢迎页面
### 2.1.2 任务要求
#### 2.1.2.1 程序欢迎页面需求
用户场景：用户在界面上左右滑动，轮流显示三张图片，通过这三张图片简单介绍软件。
输入/前置条件：程序第一次运行时或者程序版本升级后第一次运行时，进入欢迎页。
流程说明：无
输出/后置条件：根据用户的操作进入登录页或者注册页。
## 2.2 工作指导说明
资源名称 | 下载链接
### 2.2.1 创建欢迎页组件
在src\app目录下创建routes文件夹，在命令符号（cmd）下，进入项目的根目录执行下面的命令：
ionic g page welcome
该命令会在src\app\routes目录中自动生成以下几个文件
文件名 | 说明
---|---
welcome.page.html | HTML模板
welcome.module.ts | 模块
welcome.page.scss | 私有的样式表，app-welcome{}是一个元素选择器，名称和welcome.page.ts文件中元数据的选择器是一致的，<br>selector: 'app-welcome'。相当于有一个自定义的元素<app-welcome></app-welcome>
welcome.page.ts | 组件的类（class）代码
> 要了解更多ionic generate 的知识，请参考[官网](http://ionicframework.com/docs/cli/generate/)
### 2.2.3 欢迎页设置成默认页
1. 修改app-routing.module.ts文件。
*src\app\app-routing.module.ts*
const routes: Routes = [
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
},
{
path: 'list',
loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
},
// 下面这行代码是在创建页面时，ionic自动更新的
{ path: 'welcome', loadChildren: './routes/welcome/welcome.module#WelcomePageModule' }
];2. 执行ionic serve检查第一个出现的界面是否是欢迎页面。
#### 2.2.2 为界面添加轮播
1. 在\src\assets目录中创建img文件夹，把splsh_one.png、splsh_two.png和splsh_three.png三张图片拷贝到img的目录中。
2. 修改HTML模板文件，为<ion-content>元素删除padding属性，添加no-padding属性，并添加<ion-slides>子元素。
**\src\app\routes\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 的知识，请参考[官网](https://ionicframework.com/docs/api/slides/)
> 要了解更多Slide 的知识，请参考[官网](https://ionicframework.com/docs/api/slides/)
在之前的页面或者代码中出现过“/”、“./”，我们了解这些路径的区别。
语法 | 说明
---|---
/ | 根目录开始
./ | 当前目录开始
../ | 上一级目录开始
有开发过多页面应用（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/routes/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/routes/welcome/welcome.page.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这两种样式。
在组件类中修改装饰器，添加encapsulation元数据，提供模板和 CSS 样式使用的样式封装策略。
**/src/app/routes/welcome/welcome.page.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() {
}
}在ion-header后面添加no-border 隐藏工具栏下面的横线
<ion-header no-border>
</ion-header>#### 2.2.3.2 控制“跳过”按钮的显示或者隐藏
1. 在组件类中添加showSkip属性控制跳过按钮的显示或者隐藏。
当showSkip值为true时，显示“跳过”按钮，当showSkip值为false时，隐藏“跳过”按钮，
**/src/app/routes/welcome/welcome.page.ts**
export class WelcomePage implements OnInit {
showSkip = false;
ngOnInit() {
}
}2. 设置元素hidden属性的绑定
**/src/app/routes/welcome/welcome.page.html**
<ion-button color="primary" [hidden]="!showSkip">跳过</ion-button>要隐藏或显示一个元素，绑定到它的 hidden 属性就可以了。切换到浏览器查看跳过按钮是否消失，再把showSkip的值改为true。
> 要了解更多属性绑定的知识，请参考[Angular官网](https://angular.cn/guide/template-syntax#property-binding--property-)
3. 利用slides的事件控制showSkip的值。
为组件类添加onSlideWillChange方法
**/src/app/routes/welcome/welcome.page.ts**
import { IonSlides } from '@ionic/angular';
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;
});
}
}在模板中实现事件绑定
**/src/app/routes/welcome/welcome.page.html**
<ion-slides #slides pager="true" (ionSlideWillChange)="onSlideWillChange($event)">> 要了解更多事件绑定的知识，请参考[Angular](https://angular.cn/guide/template-syntax#event-binding-event)
> 要了解更多@ViewChild知识，请参考[Angular官网](https://angular.cn/guide/component-interaction#parent-calls-an-viewchild)
### 2.2.4 添加登录和注册按钮
在第三个幻灯片中添加登录和注册两个按钮，并且把这两个按钮固定在界面的底部。
1. 添加.fixed-bottom样式
**/src/app/routes/welcome/welcome.page.scss**
app-welcome {
.fixed-bottom{
position: absolute;
bottom: 0;
z-index: 10;
}
}2. 在welcome.html文件中添加登录和注册按钮
修改ion-slides元素中的第三个ion-slide元素
**/src/app/routes/welcome/welcome.page.html**
<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>
</ion-slide>> 要了解更多Grid的知识，请参考[官网](https://ionicframework.com/docs/api/grid)
> 要了解更多Buttons的知识，请参考[官网](https://ionicframework.com/docs/api/buttons)
## 2.3 产品工作要求
## 2.4 产品检查要求
1. 编写TypeScript代码时，尽量遵守TSLint配置好的规范
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
