Ionic2 自学须知的基本知识点

Posted 从前端开发到全栈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ionic2 自学须知的基本知识点相关的知识，希望对你有一定的参考价值。

http://www.cnblogs.com/zsl123/p/5991336.html

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页面的生命周期

  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

  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>  

 

 

  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>  


 

 

  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控制

 

  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控制

  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>  

 

  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控件

  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控件

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

 

  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控件

  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控件

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

 

6、Grid布局

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

 

7、 modal控件

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

 

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

 

  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控件

  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>  

 

修改：

  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控件

  1. <ion-list>  
  2.   <ion-item>  
  3.     <ion-avatar item-left><img src="../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="../images/2.jpg" alt="头像"></ion-avatar>  
  9. <

    以上是关于Ionic2 自学须知的基本知识点的主要内容，如果未能解决你的问题，请参考以下文章

    安装操作系统前须知的知识（理论）

    入门须知之网络爬虫的基本流程及抓取策略

    WPF自学入门WPF-XAML基本知识

    算法动态规划DP自学笔记 入门：基本知识+经典例题

    自学Spring框架的几个基本概念

    HTML基础知识自学教程