一、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)
**关注公众号“icketang”，获取最新学习资料及免费线下学习名额