Web前端开发——Ionic 3.0【爱创课堂专业前端培训】

前端开发——Ionic 3.0

一、Ionic

移动端有三种开发方向

源生APP开发，

移动端web开发

混合开发（介于以上两者之间的）

类微信小程序

reactNative，用react语法，开发app。但是与浏览器端不是同一套组件

hybird，cordova等，代表就是angular，ionic等，采用浏览器内核渲染视图，实现源生app，所以支持html，css，js等前端语言

angular6.0是面向企业级大型项目开发的，因此实现了工程化，自动化，通过一条指令就可以安装组件，管道，指令，服务，模块等等，但是并没有提供一些UI组件等，因此我们要从头到尾写样式。

ionic则是站在angular6.0肩膀上，开发的一套UI样式框架，是一个移动端的框架，提供了丰富的组件，服务等，可以极大的提高我们的开发效率。

1.1体验ionic

1.1.1 github

https://github.com/ionic-team/ionic

1.1.2网站

官网：https://ionicframework.com/docs/ （建议）

中文网站：http://www.ionic.wang/css_doc-v3.html

1.1.3安装

ionic跟ng6一样，也提供了指令，因此我们可以用npm全局安装ionic

npm install -g ionic

安装完成，提供了ionic指令，通过ionic -v可以查看版本号

1.1.4创建项目

跟ng6一样，创建项目也可以使用ionic指令

ionic start 项目名称

此时会让我们选择项目类型

tabs   tabs类型的页面

blank  空白的项目

slideMenu 创建一个具有侧边栏的项目

super  超级项目（包含几十个页面）

tutorial  具有引导页的项目

安装过程中，是否下载native功能，我们选择n，不要写在了

ionic内置了sass，因此我们可以直接使用scss

1.1.5启动项目

我们执行ionic serve即可启动项目

1.1.6目录部署

ionic是基于ng6实现的，因此采用了ng6的架构体系，但是在ng6中，只有组件有模板和样式，因此ionic为了让我们创建文件简化，将样式和模板的名称中，功能部分component去除了，并且默认取消了单测。

但是其他的文件，依旧是分成三个部分：名称.功能.拓展名

src    工作中最常开发的目录

app    应用程序目录

app.compoennt.ts 应用程序组件

app.html   应用程序组件模板

app.module.ts  应用程序全局配置

app.scss   应用程序样式

main.ts   应用程序入口文件

assets    静态资源

pages   所有页面，每个页面都包含三个文件，脚本，样式，和模板，并将脚本的component功能移除了

home  首页

contact  联系页面

about  关于页面

tabs   tabs页面

theme  主题样式配置

index.html 首页

mainifest.json 项目配置

service-work.js web works服务

www 项目发布地址

1 ionic serve

1.2组件

ionic内置了大量的组件，可以极大的提高我们的开发效率，这些组件我们都可以直接使用

1.3按钮组件

在ionic中，我们通过button定义按钮，是一个普通的按钮，想变成ionic中的按钮组件，我们要使用ionic指令，内置的指令都是以ion-开头

按钮组件指令：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')">这是第三个页面</h2>

12   <p>第三个页面内容</p>

13  </ion-slide>

14 </ion-slides>

1.20应用程序切换启动页面

应用程序组件是不能引入NavController服务的，因此为了实现对启动页面的切换，我们要通过ViewChild注解类注入Nav服务

@ViewChild() nav: Nav;

此时我们可以通过this.nav.setRoot方法，来切换页面

1 setTimeout(() => {

2     // 进入tab页面

3     this.nav.setRoot(TabsPage)

4 }, 3000)