Ionic(ionicframework)一款接近原生的HTML5移动App开发框架。

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

注意：这里讲的是ionic2的知识点，毕竟它与ionic 1.0有着较显著的区别。

（一）Ionic 的安装与运行

1、 下载安装 Node.js，可以在命令行中使用node–v 命令查看当前安装的node.js的版本；

2、 使用 npm install ionic –g命令可以安装Ionic，不过需要注意的是此时安装的版本为Ionic 1.0版本。可以使用npm install ionic@beta–g 安装beta版本，如可以使用npm installionic@2.0.0-beta.22 –g安装beta.22版本；

3、 安装Ionic 后，可以使用 ionic start ionicdemo --v2初始化一个空项目，默认采用tabs template作为初始化项目的模板，如果需要其他的模板，那么在项目名称后面添加上对应的模板名称即可，如：ionic start ionicdemo tutorial --v2；（--v2参数明确了使用2.0版本去初始化项目）

4、 使用 ionic serve可以运行Ionic项目；

5、 使用 ionic platform add Android或ionic platform add iOS命令可以添加两个手机平台的部署文件（使用ionicplatform list 命令可以查看当前的平台信息）；

6、 在项目中添加了两个平台的部署文件，可以通过platform文件夹下进行查看，相应地，在Xcode导入ios部署文件或在Android studio导入Android部署文件，可以进行相应地真机调试；

（二）Ionic页面的生命周期

[javascript] view plain copy

 

 

1. // 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在  
2. onPageLoaded() {  
3.   console.log(‘page 1: page loaded.‘);  
4. }  
5.   
6. // 页面即将进入的时候  
7. onPageWillEnter() {  
8.   // 在这里可以做页面初始化的一些事情  
9.   console.log(‘page 1: page will enter.‘);  
10. }  
11.   
12. // 页面已经进入的时候  
13. onPageDidEnter() {  
14.   console.log(‘page 1: page did enter.‘);  
15. }  
16.   
17. // 页面即将离开的时候  
18. onPageWillLeave() {  
19.   console.log(‘page 1: page will leave.‘);  
20. }  
21.   
22. // 页面已经离开的时候  
23. onPageDidLeave() {  
24.   console.log(‘page 1: page did leave.‘);  
25. }  
26.   
27. // 从 DOM 中移除的时候执行的生命周期  
28. onPageWillUnload() {  
29.   
30. }  
31.   
32. // 从 DOM 中移除执行完成的时候  
33. onPageDidUnload() {  
34.   
35. }  

（三）Ionic组件

1、Tab控件

图标：http://ionicframework.com/docs/v2/ionicons/ 

tabs.html

[html] view plain copy

 

 

1. <ion-tabs>  
2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>  
5. </ion-tabs>  

[html] view plain copy

 

 

1. <ion-tabs>  
2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3"></ion-tab>  
5. </ion-tabs>  

[html] view plain copy

 

 

1. <ion-tabs>  
2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
5. </ion-tabs>  

默认首先进入第三个tab页面：

Html控制

[html] view plain copy

 

 

1. <ion-tabs selectedIndex="2">  
2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
5. </ion-tabs>  

JS控制

[html] view plain copy

 

 

1. <ion-tabs #mainTabs>  
2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabTitle="用户中心" tabIcon="person"></ion-tab>  
5. </ion-tabs>  

[javascript] view plain copy

 

 

1. import {Component} from ‘@angular/core‘;  
2. import {HomePage} from ‘../home/home‘;  
3. import {AboutPage} from ‘../about/about‘;  
4. import {ContactPage} from ‘../contact/contact‘;  
5.   
6. import {Tabs} from ‘ionic-angular‘;  
7. import {Injectable, ViewChild} from ‘@angular/core‘;  
8.   
9. @Component({  
10.   templateUrl: ‘build/pages/tabs/tabs.html‘  
11. })  
12. export class TabsPage {  
13.   @ViewChild(‘mainTabs‘) tabRef: Tabs;  
14.   
15.   private tab1Root: any;  
16.   private tab2Root: any;  
17.   private tab3Root: any;  
18.   
19.   constructor() {  
20.     // this tells the tabs component which Pages  
21.     // should be each tab‘s root Page  
22.     this.tab1Root = HomePage;  
23.     this.tab2Root = AboutPage;  
24.     this.tab3Root = ContactPage;  
25.   }  
26.   
27.   ionViewDidEnter() {  
28.     this.tabRef.select(2);  
29.   }  
30. }  

2、Button控件

[html] view plain copy

 

 

1. <button>Basic Button</button>  
2. <button gray>Gray Button</button>  
3. <button danger>Danger Button</button>  
4. <button outline>Outline Button</button>  
5. <button clear>Clear Button</button>  
6. <button round>Round Button</button>  
7. <button block>Block Button</button>  
8. <button small>Small Button</button>  
9. <button large>Large Button</button>  
10. <button>  
11.   <ion-icon name="home"></ion-icon>  
12.   Button  
13. </button>  
14. <button>  
15.   Button  
16.   <ion-icon name="home"></ion-icon>  
17. </button>  
18. <button>  
19.   <ion-icon name="home"></ion-icon>  
20. </button>  

3、Input控件

[html] view plain copy

 

 

1. <ion-list>  
2.   <ion-item>  
3.     <ion-label floating>用户名</ion-label>  
4.     <ion-input type="text" value=http://www.mamicode.com/"" [(ngModel)]="user.username"></ion-input>  
5.   </ion-item>  
6.   <ion-item>  
7.     <ion-label stacked>密码</ion-label>  
8.     <ion-input type="password" value=http://www.mamicode.com/"" [(ngModel)]="user.password"></ion-input>  
9.   </ion-item>  
10. </ion-list>  
11. <button block (click)="showFill()">登录</button>  

[javascript] view plain copy

 

 

1. export class ContactPage {  
2.   public user = {  
3.     username: ‘parry‘,  
4.     password: ‘‘  
5.   };  
6.   
7.   constructor(private navCtrl: NavController) {  
8.   
9.   }  
10.   
11.   showFill() {  
12.     alert(this.user.username);  
13.     console.log(this.user.password);  
14.   }  
15. }  

4、Loading控件、Alert控件

[javascript] view plain copy

 

 

1. import {Component} from ‘@angular/core‘;  
2. import {NavController, LoadingController, AlertController} from ‘ionic-angular‘;  
3.   
4. @Component({  
5.   templateUrl: ‘build/pages/contact/contact.html‘  
6. })  
7. export class ContactPage {  
8.   public user = {  
9.     username: ‘parry‘,  
10.     password: ‘‘  
11.   };  
12.   
13.   constructor(private navCtrl: NavController,  
14.               private loadingCtrl: LoadingController,  
15.               private alertCtrl: AlertController) {  
16.     this.navCtrl = navCtrl;  
17.   }  
18.   
19.   showFill() {  
20.     alert(this.user.username);  
21.     console.log(this.user.password);  
22.   }  
23.   
24.   login() {  
25.     /*// 创建 loading 窗口，模拟3秒后登录成功， loading 窗口消失 
26.     let loading = Loading.create({ 
27.       content: ‘正在登录...‘, 
28.       duration: 3000, //单位是毫秒 
29.     }); 
30.  
31.     this.navCtrl.present(loading); 
32.  
33.     // 真实的逻辑应该是：去请求登录的 API，返回结果后，进行loading窗口的隐藏 
34.     setTimeout(() => { 
35.       loading.dismiss(); 
36.     }, 3000);*/  
37.   
38.     if(this.user.username == ‘‘ || this.user.username.length <= 3) {  
39.       // alert 提醒用户注意用户名的正确性  
40.       let alertUserNameError = this.alertCtrl.create({  
41.         title: ‘用户中心‘,  
42.         subTitle: ‘输入的用户名格式不正确！‘,  
43.         buttons: [‘OK‘]  
44.       });  
45.   
46.       alertUserNameError.present();  
47.     } else {  
48.       let loading = this.loadingCtrl.create({  
49.         content: ‘Please wait...‘,  
50.         spinner: ‘dots‘,  
51.         duration: 3000, //单位是毫秒  
52.       });  
53.   
54.       loading.present();  
55.   
56.       setTimeout(() => {  
57.         loading.dismiss();  
58.       }, 3000);  
59.     }  
60.   
61.   }  
62.   
63. }  

5、Toast控件

[javascript] view plain copy

 

 

1. // 2. 使用 Toast 控件  
2. let toast = this.toastCtrl.create({  
3.   message: ‘输入的用户名格式不正确！‘,  
4.   duration: 3000,  
5. });  
6. toast.present();  

6、Grid布局

[javascript] view plain copy

 

 

1. <ion-row>  
2.   <ion-col>  
3.     <div class="textAlignRight marginTop10"><button clear>还没有账号？点击注册</button></div>  
4.   </ion-col>  
5. </ion-row>  

7、 modal控件

[javascript] view plain copy

 

 

1. // 导入注册页面  
2. import {Register} from ‘../contact/register‘;  

[javascript] view plain copy

 

 

1. // 打开注册页面  
2. openRegisterPage() {  
3.   let modal = this.modalCtrl.create(Register);  
4.   modal.present();  
5. }  

[javascript] view plain copy

 

 

1. import {Component} from ‘@angular/core‘;  
2.   
3. @Component({  
4.   templateUrl: ‘build/pages/contact/register.html‘  
5. })  
6. export class Register {  
7.   
8. }  

8、 Toolbar控件

[javascript] view plain copy

 

 

1. <ion-toolbar>  
2.   <ion-title>用户注册</ion-title>  
3.   <ion-buttons end>  
4.     <button (click)="dismiss()">  
5.       <span showWhen="ios">取消</span>  
6.       <ion-icon name="md-close" showWhen="android,windows"></ion-icon>  
7.     </button>  
8.   </ion-buttons>  
9. </ion-toolbar>  

修改：

[html] view plain copy

 

 

1. <ion-header>  
2.   <ion-toolbar>  
3.     <ion-title>用户注册</ion-title>  
4.     <ion-buttons end>  
5.       <button (click)="dismiss()">  
6.         <span showWhen="ios">取消</span>  
7.         <ion-icon name="md-close" showWhen="android,windows"></ion-icon>  
8.       </button>  
9.     </ion-buttons>  
10.   </ion-toolbar>  
11. </ion-header>  
12.   
13.   
14. <ion-content padding>  
15.     <h5>Parameters passed:</h5>  
16. </ion-content>  

9、 List控件

[html] view plain copy

 

 

1. <ion-list>  
2.   <ion-item>  
3.     <ion-avatar item-left><img src=http://www.mamicode.com/"../images/1.jpg" alt="头像"></ion-avatar>  
4.     <h2>哈哈</h2>  
5.     <p>(ˇ?ˇ) 想～</p>  
6.   </ion-item>  
7.   <ion-item>  
8.     <ion-avatar item-left><img src=http://www.mamicode.com/"../images/2.jpg" alt="头像"></ion-avatar>  
9.     <h2>美女</h2>  
10.     <p>(ˇ?ˇ) 想～</p>  
11.   </ion-item>  
12. </ion-list>  

绑定数据源：

数据源的声明

[javascript] view plain copy

 

 

1. // 一般数据源都是从 api 进行获取，这里我们只是模拟一些已经取到了数据  
2. public contacts = [  
3.   {‘contactid‘: 1, ‘contactname‘: ‘梦小白‘, ‘contacttext‘: ‘18888888888‘},  
4.   {‘contactid‘: 2, ‘contactname‘: ‘梦小白2‘, ‘contacttext‘: ‘18888888888‘},  
5.   {‘contactid‘: 3, ‘contactname‘: ‘梦小白3‘, ‘contacttext‘: ‘18888888888‘},  
6.   {‘contactid‘: 4, ‘contactname‘: ‘梦小白4‘, ‘contacttext‘: ‘18888888888‘},  
7.   {‘contactid‘: 5, ‘contactname‘: ‘梦小白5‘, ‘contacttext‘: ‘18888888888‘},  
8.   {‘contactid‘: 6, ‘contactname‘: ‘梦小白6‘, ‘contacttext‘: ‘18888888888‘},  
9.   
10.   {‘contactid‘: 1, ‘contactname‘: ‘梦小白7‘, ‘contacttext‘: ‘18888888888‘},  
11.   {‘contactid‘: 2, ‘contactname‘: ‘梦小白8‘, ‘contacttext‘: ‘18888888888‘},  
12.   {‘contactid‘: 3, ‘contactname‘: ‘梦小白9‘, ‘contacttext‘: ‘18888888888‘},  
13.   {‘contactid‘: 4, ‘contactname‘: ‘梦小白10‘, ‘contacttext‘: ‘18888888888‘},  
14.   {‘contactid‘: 5, ‘contactname‘: ‘梦小白11‘, ‘contacttext‘: ‘18888888888‘},  
15.   {‘contactid‘: 6, ‘contactname‘: ‘梦小白12‘, ‘contacttext‘: ‘18888888888‘},  
16. ];  

[html] view plain copy

 

 

1. <ion-list>  
2.   <ion-item *ngFor="#contact of contacts" (click)="itemClick($event, contact)">  
3.     <ion-avatar item-left><img src=http://www.mamicode.com/"../images/{{contact.contactid}}.jpg" alt="头像"></ion-avatar>  
4.     <h2>{{contact.contactname}}</h2>  
5.     <p>{{contact.contacttext}}</p>  
6.   </ion-item>  
7. </ion-list>  

10、卡片布局

[html] view plain copy

 

 

1. <ion-card>  
2.   <ion-item>  
3.     <ion-avatar item-left>  
4.       <img src=http://www.mamicode.com/"../images/6.jpg" alt="头像">  
5.     </ion-avatar>  
6.     <h2>Elon Musk</h2>  
7.     <p>来自 iPhone 6s</p>  
8.   </ion-item>  
9.   <img src=http://www.mamicode.com/"../images/c1.jpg" alt="图片">  
10.   <ion-card-content>  
11.     <p>我又发布了一辆新车，上天入地舍我其谁？呵呵</p>  
12.   </ion-card-content>  
13.   <ion-item>  
14.     <button primary clear item-left><ion-icon name="thumbs-up"></ion-icon><div>888 赞</div></button>  
15.     <button primary clear item-left><ion-icon name="text"></ion-icon><div>600 评论</div></button>  
16.     <ion-note item-right>  
17.       1小时前  
18.     </ion-note>  
19.   </ion-item>  
20. </ion-card>  

11、navigation控件

[javascript] view plain copy

 

 

1. itemClick(event, contact) {  
2.   //console.log(event);  
3.   //console.dirxml(contact);  
4.   //alert(contact.contactname);  
5.   
6.   this.navCtrl.push(ContactDetails, {item: contact});  
7. }  

ContactDetails页面

[javascript] view plain copy

 

 

1. /** 
2.  * Created by Administrator on 2016/8/23 0023. 
3.  */  
4. import {Component} from ‘@angular/core‘;  
5. import {NavParams} from ‘ionic-angular‘;  
6.   
7. @Component({  
8.   templateUrl: ‘build/pages/about/contactdetails.html‘  
9. })  
10. export class ContactDetails {  
11.   private item = ‘‘;  
12.   
13.   constructor(public params: NavParams) {  
14.     this.item = params.data.item;  
15.   }  
16. }  

[html] view plain copy

 

 

1. <ion-header>  
2.   <ion-navbar>  
3.     <ion-title>{{item.contactname}}</ion-title>  
4.   </ion-navbar>  
5. </ion-header>  
6. <ion-content padding>  
7.   {{item.contactname}} 的手机号码为：{{item.contacttext}}  
8. </ion-content>  

（四）Cordova组件介绍

1、Image Picker组件

2、Geolocation组件

[javascript] view plain copy

 

 

1. // 获取位置信息  
2. Geolocation.getCurrentPosition().then((resp) => {  
3.   console.log(resp.coords.latitude);  
4.   console.log(resp.coords.longitude);  
5. });  

3、Local Notifications组件

[javascript] view plain copy

 

 

1. // 本地提醒组件  
2. LocalNotifications.schedule({  
3.   text: ‘本地化提醒-您启动了Ionic App‘,  
4.   at: new Date(new Date().getTime() + 10000),  
5.   sound: null  
6. });  

（五）项目实战

1、快速生成App图标和启动页面

MakeAppicon

Ios.hvims.com

Launcher Icon Generator

iconhandbook.co.uk/reference/chart/android

2、使用localStorage存储状态信息

localStorage.setItem(key, value)

localStorage.getItem(key)

注：Modal页面的关闭需要使用到ViewController中的dismiss方法。

3、Modal关闭后父页面的概念和方法

4、Ionic中的网络请求

跨域请求问题： http://enable-cors.org/ （当然在App中不会出现，只会在浏览器调试的过程中出现）

[javascript] view plain copy

 

 

1. // 这里是请求 API 的实现，注意跨域请求的问题，请参见 http://enable-cors.org/  
2. this.http.get(‘http://xxx/account/Login?email=‘ + this.user.username + ‘&password=‘ + this.user.password)  
3.   .subscribe(data => {  
4.     let res = data.json();  
5.     if(res.LoginStatus == 1) {  
6.       localStorage.setItem(‘username‘, this.user.username);  
7.       localStorage.setItem(‘logined‘, ‘true‘);  
8.       //自身 modal 隐藏  
9.       this.viewCtrl.dismiss(this.user.username);  
10.       loading.dismiss(); //登录进度隐藏  
11.     } else {  
12.       let toast = this.toastCtrl.create({  
13.         message: ‘登录失败！‘,  
14.         duration: 2000,  
15.       });  
16.       toast.present();  
17.     }  
18.   
19.   }, err => {  
20.     let toast = this.toastCtrl.create({  
21.       message: ‘登录失败！‘,  
22.       duration: 2000,  
23.     });  
24.     toast.present();  
25.   
26.   });  

5、List中滑动删除数据

[html] view plain copy

 

 

1. <ion-list>  
2.   <ion-item-sliding *ngFor="#contact of contacts">  
3.     <ion-item (click)="itemClick($event, contact)">  
4.       <ion-avatar item-left><img src=http://www.mamicode.com/"images/{{contact.contactid}}.jpg" alt="头像"></ion-avatar>  
5.       <h2>{{contact.contactname}}</h2>  
6.       <p>{{contact.contacttext}}</p>  
7.     </ion-item>  
8.     <ion-item-options>  
9.       <button danger (click)="removeContact(contact)">  
10.         <span padding><ion-icon name="trash"></ion-icon> 删除</span>  
11.       </button>  
12.     </ion-item-options>  
13.   </ion-item-sliding>  
14. </ion-list>  

6、集成极光推送实现消息推送

// 设置客户端的别名，用于定向接收消息的推送

window.plugins.jPushPlugin.setAlias(‘Client’ + loginResult.UserId);

// Client（只能是单一值）：单独的一台设备绑定到jPush，就相当于设备的ID号码，server端推送的时候只能推送到ID级别的。

var arrayObj = new Array(‘Tags’ + loginResult.UserId);

window.plugins.jPushPlugin.setTags(arrayObj);

//Tags：其实就是分组的意思，那么这样指定后，在用户登录的时候 分配一个分组名给用户，那么推送消息的时候，就可以推送给这个分组。 应用场景：如果用户有多个设备，并且这些设备上可以同时登录app，那么我们推送消息应该推送给这几个设备。

//Client – 1，只是这一台设备收到通知。

//Tag – 1，多台设备都设置叫 Tag – 1。

7、iOS打包与AppStore上架

8、Android打包与发布

参考学习：

https://babeljs.io

http://kangax.github.io/compat-table/es6/

https://github.com/driftyco

https://github.com/driftyco/ionic-preview-app/

http://www.typescriptlang.org/docs/

http://mhartington.io/post/ionic2-external-libraries/

ionic2 自学须知的基本知识点