碼上快樂

相關內容    簡體    繁體

ionic2 自學須知的基本知識點

本文轉載自   查看原文   2016-10-23 22:46   10472    ionic2知識

博主送福利了，微信掃碼有驚喜。超值紅包等着你。。么么噠

 

言歸正轉

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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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>  

 

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  1. // 2. 使用 Toast 控件  
  2. let toast = this.toastCtrl.create({  
  3.   message: '輸入的用戶名格式不正確！',  
  4.   duration: 3000,  
  5. });  
  6. toast.present();  

 

6、Grid布局

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  1. // 導入注冊頁面  
  2. import {Register} from '../contact/register';  

 

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. // 打開注冊頁面  
  2. openRegisterPage() {  
  3.   let modal = this.modalCtrl.create(Register);  
  4.   modal.present();  
  5. }  

 

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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.     <h2>美女</h2>  
  10.     <p>(ˇˍˇ) 想～</p>  
  11.   </ion-item>  
  12. </ion-list>  

 

綁定數據源：

數據源的聲明

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  1. <ion-list>  
  2.   <ion-item *ngFor="#contact of contacts" (click)="itemClick($event, contact)">  
  3.     <ion-avatar item-left><img src="../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
 
 在CODE上查看代碼片派生到我的代碼片
  1. <ion-card>  
  2.   <ion-item>  
  3.     <ion-avatar item-left>  
  4.       <img src="../images/6.jpg" alt="頭像">  
  5.     </ion-avatar>  
  6.     <h2>Elon Musk</h2>  
  7.     <p>來自 iPhone 6s</p>  
  8.   </ion-item>  
  9.   <img src="../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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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="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/

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Linux基本知識點 VIM必須知道的知識點 Unity --- 紋理壓縮基本知識點 NLP基本知識點和模型 關於javaSMTP協議發郵件你必須知道的知識點 數據庫基本知識點梳理 uni-app開發基本知識點 Design-for-Testability（DFT）的基本知識點 服務器運維入門基本知識點 ASP .NET Core 基本知識點示例 目錄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM