Добро пожаловать, чтобы достичь 2 страницы
2.1 Описание задачи
2.1.1 миссии брифинг
Реализовать страницу программы приветствия
2.1.2 Требования к миссии
2.1.2.1 Demand программа страница приветствия
Пользовательские сценарии: Пользовательский интерфейс на левую и правую горке, в свою очередь, дисплей три изображений, три фотографии этого краткого программное обеспечение.
Ввод / предварительное условие: программа первый запуск или обновление версии после первого запуска, в страницу приветствия.
Процесс не Описание: Отсутствует
Спрос Мяо Сюй:
Выход / Постусловие: операция пользователя для входа на страницу входа в систему или страницу регистрации.
Примечания к выпуску:
2.2 Инструкция по эксплуатации
Имя ресурса | Ссылка для скачивания |
---|---|
архив Startup экран изображение | скачать Baidu облако |
2.2.1 Создание приветствия компонентов Page
Создание страниц папки под ЦСИ \ каталог приложений, в символ команды (CMD), в корневой директории проекта, выполните следующую команду:
ionic generate page pages/welcome
или
ionic g page welcome
или
ionic g page welcome --no-module
Команда \ приложение каталога \ страницы автоматически генерирует следующие файлы в ГКЗ
имя файла | объяснение |
---|---|
welcome.page.html | шаблон HTML |
welcome.module.ts | модуль |
welcome.page.scss | Отдельная таблица стилей, приложение-радушно {} является селектор элемента, селектор и имя файл метаданных welcome.page.ts последователен, селектор: "App-доступен для покупки. Эквивалент пользовательского элемента |
welcome.page.ts | Компонентный класс (класс) Код |
Чтобы узнать больше ионной генерации, обратитесь к официальному сайту
2.2.3 страница приветствия в качестве страницы по умолчанию
- Изменение приложения-routing.module.ts файл.
ЦСИ \ приложение \ 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.2.2 Добавление карусельного для интерфейса
在\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属性控制跳过按钮的显示或者隐藏。
Когда showSkip правда, на дисплее «Пропустить» кнопку, когда showSkip ложные, шкура «Пропустить» кнопку,
/src/app/pages/welcome/welcome.ts
export class WelcomePage implements OnInit {
showSkip = false;
ngOnInit() {
}
}
- Установить атрибут привязки элемента скрыта
/src/app/pages/welcome/welcome.page.html
<ion-button color="primary" [hidden]="!showSkip">跳过</ion-button>
Чтобы скрыть или отобразить элемент привязки к его скрытому атрибуту на нем. Переключение в браузере, чтобы увидеть кнопку пропуска исчезает, то значение showSkip изменилось к истине.
Чтобы узнать больше связующие свойства, см Углового официального сайта
- Используйте слайды событие контрольного значения 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 Логин и регистрация добавлена кнопка
Войти и добавить две кнопки, зарегистрированные в третьем слайде, и фиксируется в нижней части этих двух кнопок интерфейса.
- Добавить .fixed-нижний стиль
/src/app/pages/welcome/welcome.scss
app-welcome {
.fixed-bottom{
position: absolute;
bottom: 0;
z-index: 10;
}
}
- Вход и регистрация добавлена кнопка в Welcome.html файла
Модифицированный ион-горки элементы третьего элемент ионно-слайд
/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 Продукта
- При написании коды машинописи и попытаться следовать TSLint спараметрированных