web front-end development --Ionic 3.0 [Ashoka classroom training professional front-end]

A, Ionic
moving direction to develop three side

Primal APP development,

End mobile web development

Hybrid Development (interposed between the two or more)

Applet-type micro letter

reactNative, react with grammar, developed app. But not the same set of components and browser

hybird, cordova, etc., on behalf of that angular, ionic, etc., using the browser kernel render the view to achieve Primal app, so support html, css, js and other front-end language

angular6.0 for enterprise-class large-scale project development, thus achieving engineering, automation, you can install components, pipes, instruction, services, modules, etc., but does not provide some of the UI components such as a single instruction, so we have to from start to finish writing style.

ionic angular6.0 is standing on the shoulders of a UI style development framework, is a moving end of the framework, provides a wealth of components, services, etc., can greatly improve our development efficiency.

1.1体验ionic
1.1.1 github
https://github.com/ionic-team/ionic

1.1.2 The website
's official website: https://ionicframework.com/docs/ (recommended)

Chinese website: http://www.ionic.wang/css_doc-v3.html

1.1.3 Installation
ionic Like ng6, also provides instructions, so we can install ionic globally with npm

npm install -g ionic

The installation is complete, provides ionic instructions, you can view the version number by the ionic -v

1.1.4 Creating a project
like ng6, create a project can also be used ionic instruction

ionic start the project name

At this point let us select the project type

tabs tabs type of page

blank blank project

slideMenu create a project with a sidebar

super super project (contains dozens of pages)

tutorial guide has a project page

During installation, whether to download native function, we choose n, do not write in a

ionic built sass, so we can directly use scss

1.1.5 start the project
we execute ionic serve to start the project

1.1.6 directory deployment
ionic based ng6 achieve, so the use of a system architecture ng6, but in ng6, only the component has templates and styles, so ionic order for us to create a file to simplify, the name of the style and template functions part of the component removed, and canceled the default single measurement.

But other documents, is still divided into three parts: the name of the function expansion name.

src work in most developed directory

app application directory

app.compoennt.ts application components

app.html application component template

app.module.ts global configuration application

app.scss application style

main.ts application entry file

static resource assets

pages all pages, each page contains three files, scripts, styles, and templates, and scripts to remove the component function

home Home

contact contact page

on page about

tabs tabs page

Theme theme style configuration

index.html Home

mainifest.json project configuration

service-work.js web works服务

www project publishing address

1 ionic serve

1.2 Components
ionic built a large number of components, can greatly improve our development efficiency, these components we can directly use

1.3 Button component
in ionic, we define a button by button is a normal button, want to become ionic in button components, we want to use ionic instruction, built-in instructions are beginning to ion-

Button assembly instructions: ion-button

并且我们可以通过color属性定义按钮的背景色，sass在主题中定义几种默认的样式，我们可以直接使用，并且我们还可以更改这些主题，让我们的项目变得与众不同

1.4字体图标
ionic中，为让图标不会因为放缩而出现锯齿状，使用了css3中的字体图标

我们可以通过ion-icon组件使用字体图标

通过name属性定义图标样式

由于这些图标是通过字体实现的，因此改变这些图标，我们要改变font-size

ionic内置了700多个图标

1 <!-- 指令 -->

2 <button ion-button>按钮</button>

3 <!-- 定义按钮颜色 -->

4 <button ion-button color="dark">按钮</button>

5 <!-- 字体图标 -->

6 <ion-icon name="basket"></ion-icon>

7 <!-- 更改字体大小，就是更改图标大小 -->

8 <ion-icon name="battery-charging" style="font-size: 100px;"></ion-icon>

1.5徽章
我们通过ion-badge组件定义徽章

是一个行内元素，所以可以直接添加在文本后面

1.6栅格系统
bootstrap提供了栅格系统，定义容器用.container,container-fluid等类

ionic中，我们用ion-grid组件定义容器

bootstrap中，

定义行用row类

定义类用col类

ionic中，

定义行用ion-row组件

定义列用ion-col组件

注意：

bootstrap中将整行分成12份，是几占几份

ionic使用的是css3中的flex布局，每个都是均分的，所以里面有几个，都会均分整行

1 <!-- 使用徽章 -->

2 <button ion-button>按钮<ion-badge>10</ion-badge></button>

3 <!-- 使用栅格系统 -->

4 <ion-grid>

5 <ion-row>

6 <ion-col>001</ion-col>

7 <ion-col>002</ion-col>

8 <ion-col>003</ion-col>

9 </ion-row>

10 </ion-grid>

1.7卡片
我们通过ion-card组件定义卡片

通过ion-card-header定义卡片头部

通过ion-card-content定义卡片内容

1.8分享
在ionic中，我们通过ion-fab组件定义分享按钮

通过添加top, left, bottom, right定义所在位置

通过edge属性，定义是否基于屏蔽边缘定义（默认基于父容器边缘定义）

我们通过button定义按钮，添加ion-fab指令，即可让按钮变成圆形，我们为按钮添加mini，即可让按钮缩小。

我们通过ion-fab-list定义下拉按钮组

我们添加side属性，即可定义按钮列表的弹出方向

在内部通过ion-fab指令将每一个按钮变成圆形

1 <!-- 定义卡片 -->

2 <ion-card>

3 <ion-card-header>卡片标题</ion-card-header>

4 <ion-card-content>卡片内容</ion-card-content>

5 </ion-card>

6 <ion-card>

7 <ion-card-header>卡片标题2</ion-card-header>

8 <ion-card-content>卡片内容2</ion-card-content>

9 </ion-card>

10 <!-- 定义分享按钮 -->

11 <ion-fab right top edge>

12 <!-- 定义按钮 -->

13 <button ion-fab mini><ion-icon name="add"></ion-icon></button>

14 <!-- 定义下拉分享按钮 -->

15 <ion-fab-list side="left">

16 <button ion-fab>

17 <ion-icon name="logo-facebook"></ion-icon>

18 </button>

19 <button ion-fab>

20 <ion-icon name="logo-github"></ion-icon>

21 </button>

22 <button ion-fab>

23 <ion-icon name="logo-twitch"></ion-icon>

24 </button>

25 </ion-fab-list>

26 </ion-fab>

1.9事件
ionic是基于ng6实现的， 因此也只是ng6绑定事件的语法，ionic又是移动端的框架，因此也支持移动端事件，如tap, swipe, rotate等

语法 (tap)=”fn()”

事件回调函数添加参数集合，并且定义在组件类中，默认没有参数，使用什么传递什么，使用事件对象传递$event

1.10列表
我们通过ion-list组件定义列表

通过ion-list-header定义列表的标题

通过ion-item组件定义每一个成员

注意：ion-item不仅仅可以作为组件来使用，也可以作为指令来使用

默认每个成员之间有边线，想取消边线，我们可以添加no-lines属性

在渲染成员的时候，我们可以为成员的子元素添加

item-start 渲染在前面

item-end 渲染在后面

其它子元素自适应

1.11头像
我们通过ion-avatar组件定义头像，在内部通过img标签引入图片

效果：用圆形呈现这张图片

1.12缩略图
我们可以通过ion-thumbnail组件定义缩列图

1 <!-- 定义按钮 -->

2 <button ion-button (tap)="fn(true, 100, $event)">按钮</button>

3

4 <!-- 定义列表 -->

5 <ion-list>

6 <ion-list-header>列表标题</ion-list-header>

7 <!-- 定义成员 -->

8 <ion-item *ngFor="let item of colors" no-lines>{{item}}</ion-item>

9 <!-- ion-item还可以作为指令来用 -->

10 <div ion-item *ngFor="let item of colors">{{item}}</div>

11 <!-- 成员比较复杂 -->

12 <ion-item *ngFor="let item of colors">

13 <!-- 引入头像 -->

14 <ion-avatar item-start>

15 <img src="assets/imgs/01.jpg" alt="">

16 </ion-avatar>

17 <h1>{{item}}</h1>

18 <p>成员内容</p>

19 <!-- <button ion-button item-end>按钮</button> -->

20 <ion-thumbnail item-end>

21 <img src="assets/imgs/01.jpg" alt="">

22 </ion-thumbnail>

23 </ion-item>

24 </ion-list>

1.13表单组件
ionic内置了表单组件，我们可以使用

在ion中，表单组件通常都是前面添加ion-指令

例如

label => ion-label

fixed 用来让label与后面的表单元素对其，如input

floating 浮动到input上，实现遮盖

input => ion-input

select => ion-select

option => ion-option

radio => ion-radio

一组单选框，我们通常放在一个具有radio-group指令的元素内

check => ion-checkbox

新增组件

ion-range 进度条

ion-toggle 开关按钮

ion-datatime 日期组件

我们可以定义日期格式

pickerFormate 选择日期时候的格式

displayFormat 展示日期时候的格式

Y 表示年

M 表示月

D 表示日

H | h 表示小时

m 表示分

s 表示秒

个数不同展示的形式也不同

1 <!-- 定义表单 -->

2 <ion-list>

3 <ion-item>

4 <ion-label>用户名</ion-label>

5 <!-- <ion-label fixed>用户名</ion-label> -->

6 <ion-input style="background: green"></ion-input>

7 </ion-item>

8 <ion-item>

9 <ion-label floating>密码</ion-label>

10 <ion-input style="background: pink"></ion-input>

11 </ion-item>

12 <ion-item>

13 <ion-label>选择色彩</ion-label>

14 <ion-select multiple>

15 <ion-option *ngFor="let item of colors">{{item}}</ion-option>

16 </ion-select>

17 </ion-item>

18 <ion-item>

19 <ion-label>调节屏幕亮度</ion-label>

20 <ion-range></ion-range>

21 </ion-item>

22 <ion-item>

23 <ion-label>是否打开wifi</ion-label>

24 <ion-toggle></ion-toggle>

25 </ion-item>

26 <ion-item>

27 <ion-label>选择时间</ion-label>

28 <ion-datetime pickerFormat="YYYY MMMM DD HH:mm:ss" displayFormat="hh:mm:ss"></ion-datetime>

29 </ion-item>

30 </ion-list>

31 <!-- 单选框 -->

32 <ion-list radio-group>

33 <ion-list-header>兴趣爱好</ion-list-header>

34 <ion-item>

35 <ion-label>篮球</ion-label>

36 <ion-radio value="basketball"></ion-radio>

37 </ion-item>

38 <ion-item>

39 <ion-label>足球</ion-label>

40 <ion-radio value="football"></ion-radio>

41 </ion-item>

42 <ion-item>

43 <ion-label>乒乓球</ion-label>

44 <ion-radio value="pingpang"></ion-radio>

45 </ion-item>

46 </ion-list>

1.14导航
ionic不但提供了大量的组件，还提供了大量服务（功能）

每个页面都引入了一个NavController服务，用来管理导航的服务

push方法用来打开新的页面的

第一个参数表示页面组件

第二个参数表示打开该页面时候，传递的数据

导航的切换也实现了一个堆栈，打开页面就是进入栈，返回页面就是推出栈，所以想返回上一个页面，可以执行pop方法

注意：tab页面的切换，要清空栈，因此没有页面进入栈，就不会有返回按钮了

获取导航信息数据

我们可以注入NavParams服务，来获取导航的数据信息

其中data属性存储接收到的数据

1 // 进入关于页面

2 showAboutPage() {

3 // 进入about页面

4 this.navCtrl.push(AboutPage, {

5 color: 'red'

6 })

7 }

1.15 tab页面
在ion中，通过ion-tabs定义tabs组件（页面底部切换页面的按钮）

ion-tab定义每一个页面项

root 将要被打开的页面组件

tabTitle 页面按钮的标题

tabIcon 页面按钮的图片（可以在内置的700个字体图标中选择）

rootParams 打开页面时传递的数据

默认显示第一个ion-tab定义的页面

1.16登录页面
在ng6中，创建组件，我们用 ng g component指令

在ionic中，为了创建页面方便，提供了

ionic g page 页面名称

通过该指令，可以快速创建页面，页面会自动存储在pages目录下

创建页面后，会自动添加四个文件：模板文件，脚本文件，样式文件，模块文件

ng6中，创建的组件会自动在全局声明，但是ionic中，创建的页面不会全局声明，我们要手动在全局声明

在全局配置中，app.module.ts文件中的declarations，以及entryComponents配置中声明

declarations 表示全局声明，声明以后就可以在任何地方使用

entryComponents 是否可以作为页面来使用

1.17页面组件
ionic模拟了html中的body，head， title等元素，定义了一些页面级别的组件

ion-header 定义页面头部

ion-content 定义页面内容

ion-footer 定义页面底部

ion-navbar 定义页面头部的导航

ion-title 定义页面的标题

1 <ion-tabs>

2 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>

3 <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="logo-android" [rootParams]="{num: 100}"></ion-tab>

4 <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>

5 </ion-tabs>

1.18搜索组件
我们通过ion-searchbar定义搜索组件

我们可以通过placeholder定义提示文案

通过ionInput事件获取提交的数据

每次更新的时候，都会执行，

我们传递$event获取事件对象，通过e.target.value获取内容值

1 <ion-searchbar placeholder="请搜索内容" (ionInput)="searchValue($event)"></ion-searchbar>

1.19轮播图组件
我们ion-slides定义轮播图组件

默认占满整个屏幕

通过autoplay定义轮播的事件 单位是毫秒

通过loop属性，定义是否无限轮播

通过ion-slide定义每一个页面

我们不仅仅可以在内部引入图片，还可以定义任何元素

1 <ion-slides loop autoplay="3000">

2 <ion-slide style="background: pink;">

3 <h2 (tap)="showPage('home')">这是第一个页面</h2>

4 <p>第一个页面内容</p>

5 </ion-slide>

6 <ion-slide style="background: gold;">

7 <h2 (tap)="showPage('about')">这是第二个页面</h2>

8 <p>第二个页面内容</p>

9 </ion-slide>

10 <ion-slide style="background: skyblue;">

11 <h2 (tap) = "showPage ( 'contact')"> This is the third page </ h2>

12 <p> third page content </ p>

13 </ion-slide>

14 </ion-slides>

1.20 application switches start page
application components can not be introduced NavController services, so in order to achieve the switching of the start page, we want to inject Nav service by ViewChild annotation class

@ViewChild() nav: Nav;

At this point we can this.nav.setRoot way to switch the page

1 setTimeout(() => {

2 // enter the tab page

3 this.nav.setRoot(TabsPage)

4}, 3000)

** No public concern "icketang", access to learning places at the latest learning materials and free line