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 的安裝與運行

 

一、 下載安裝 Node.js，能夠在命令行中使用node–v 命令查看當前安裝的node.js的版本；

二、 使用 npm install ionic –g命令能夠安裝Ionic，不過須要注意的是此時安裝的版本爲Ionic 1.0版本。可使用npm install ionic@beta–g 安裝beta版本，如可使用npm installionic@2.0.0-beta.22 –g安裝beta.22版本；

三、 安裝Ionic 後，可使用 ionic start ionicdemo --v2初始化一個空項目，默認採用tabs template做爲初始化項目的模板，若是須要其餘的模板，那麼在項目名稱後面添加上對應的模板名稱便可，如：ionic start ionicdemo tutorial --v2；（--v2參數明確了使用2.0版本去初始化項目）

四、 使用 ionic serve能夠運行Ionic項目；

五、 使用 ionic platform add Android或ionic platform add iOS命令能夠添加兩個手機平臺的部署文件（使用ionicplatform list 命令能夠查看當前的平臺信息）；

六、 在項目中添加了兩個平臺的部署文件，能夠經過platform文件夾下進行查看，相應地，在Xcode導入ios部署文件或在Android studio導入Android部署文件，能夠進行相應地真機調試；

 

 

（二）Ionic頁面的生命週期

// 頁面被加載完成後調用的函數，切換頁面時並不會進行從新加載，由於有cache的存在
onPageLoaded() {
  console.log('page 1: page loaded.');
}

// 頁面即將進入的時候
onPageWillEnter() {
  // 在這裏能夠作頁面初始化的一些事情
  console.log('page 1: page will enter.');
}

// 頁面已經進入的時候
onPageDidEnter() {
  console.log('page 1: page did enter.');
}

// 頁面即將離開的時候
onPageWillLeave() {
  console.log('page 1: page will leave.');
}

// 頁面已經離開的時候
onPageDidLeave() {
  console.log('page 1: page did leave.');
}

// 從 DOM 中移除的時候執行的生命週期
onPageWillUnload() {

}

// 從 DOM 中移除執行完成的時候
onPageDidUnload() {

}

 

（三）Ionic組件

一、Tab控件

圖標：http://ionicframework.com/docs/v2/ionicons/ 

tabs.html

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

 

 

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

 

 

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

 

 

默認首先進入第三個tab頁面：

Html控制

 

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

 

 

JS控制

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

 

import {Component} from '@angular/core';
import {HomePage} from '../home/home';
import {AboutPage} from '../about/about';
import {ContactPage} from '../contact/contact';

import {Tabs} from 'ionic-angular';
import {Injectable, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  @ViewChild('mainTabs') tabRef: Tabs;

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ContactPage;
  }

  ionViewDidEnter() {
    this.tabRef.select(2);
  }
}

 

二、Button控件

<button>Basic Button</button>
<button gray>Gray Button</button>
<button danger>Danger Button</button>
<button outline>Outline Button</button>
<button clear>Clear Button</button>
<button round>Round Button</button>
<button block>Block Button</button>
<button small>Small Button</button>
<button large>Large Button</button>
<button>
  <ion-icon name="home"></ion-icon>
  Button
</button>
<button>
  Button
  <ion-icon name="home"></ion-icon>
</button>
<button>
  <ion-icon name="home"></ion-icon>
</button>

 

 

三、Input控件

<ion-list>
  <ion-item>
    <ion-label floating>用戶名</ion-label>
    <ion-input type="text" value="" [(ngModel)]="user.username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>密碼</ion-label>
    <ion-input type="password" value="" [(ngModel)]="user.password"></ion-input>
  </ion-item>
</ion-list>
<button block (click)="showFill()">登陸</button>

 

export class ContactPage {
  public user = {
    username: 'parry',
    password: ''
  };

  constructor(private navCtrl: NavController) {

  }

  showFill() {
    alert(this.user.username);
    console.log(this.user.password);
  }
}

 

四、Loading控件、Alert控件

import {Component} from '@angular/core';
import {NavController, LoadingController, AlertController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/contact/contact.html'
})
export class ContactPage {
  public user = {
    username: 'parry',
    password: ''
  };

  constructor(private navCtrl: NavController,
              private loadingCtrl: LoadingController,
              private alertCtrl: AlertController) {
    this.navCtrl = navCtrl;
  }

  showFill() {
    alert(this.user.username);
    console.log(this.user.password);
  }

  login() {
    /*// 建立 loading 窗口，模擬3秒後登陸成功， loading 窗口消失
    let loading = Loading.create({
      content: '正在登陸...',
      duration: 3000, //單位是毫秒
    });

    this.navCtrl.present(loading);

    // 真實的邏輯應該是：去請求登陸的 API，返回結果後，進行loading窗口的隱藏
    setTimeout(() => {
      loading.dismiss();
    }, 3000);*/

    if(this.user.username == '' || this.user.username.length <= 3) {
      // alert 提醒用戶注意用戶名的正確性
      let alertUserNameError = this.alertCtrl.create({
        title: '用戶中心',
        subTitle: '輸入的用戶名格式不正確！',
        buttons: ['OK']
      });

      alertUserNameError.present();
    } else {
      let loading = this.loadingCtrl.create({
        content: 'Please wait...',
        spinner: 'dots',
        duration: 3000, //單位是毫秒
      });

      loading.present();

      setTimeout(() => {
        loading.dismiss();
      }, 3000);
    }

  }

}

 

五、Toast控件

// 2. 使用 Toast 控件
let toast = this.toastCtrl.create({
  message: '輸入的用戶名格式不正確！',
  duration: 3000,
});
toast.present();

 

六、Grid佈局

<ion-row>
  <ion-col>
    <div class="textAlignRight marginTop10"><button clear>尚未帳號？點擊註冊</button></div>
  </ion-col>
</ion-row>

 

七、 modal控件

// 導入註冊頁面
import {Register} from '../contact/register';

 

// 打開註冊頁面
openRegisterPage() {
  let modal = this.modalCtrl.create(Register);
  modal.present();
}

 

import {Component} from '@angular/core';

@Component({
  templateUrl: 'build/pages/contact/register.html'
})
export class Register {

}

 

八、 Toolbar控件

<ion-toolbar>
  <ion-title>用戶註冊</ion-title>
  <ion-buttons end>
    <button (click)="dismiss()">
      <span showWhen="ios">取消</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>

 

修改：

<ion-header>
  <ion-toolbar>
    <ion-title>用戶註冊</ion-title>
    <ion-buttons end>
      <button (click)="dismiss()">
        <span showWhen="ios">取消</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding>
    <h5>Parameters passed:</h5>
</ion-content>

 

九、 List控件

<ion-list>
  <ion-item>
    <ion-avatar item-left><img src="../images/1.jpg" alt="頭像"></ion-avatar>
    <h2>哈哈</h2>
    <p>(ˇˍˇ) 想～</p>
  </ion-item>
  <ion-item>
    <ion-avatar item-left><img src="../images/2.jpg" alt="頭像"></ion-avatar>
    <h2>美女</h2>
    <p>(ˇˍˇ) 想～</p>
  </ion-item>
</ion-list>

 

綁定數據源：

數據源的聲明

// 通常數據源都是從 api 進行獲取，這裏咱們只是模擬一些已經取到了數據
public contacts = [
  {'contactid': 1, 'contactname': '夢小白', 'contacttext': '18888888888'},
  {'contactid': 2, 'contactname': '夢小白2', 'contacttext': '18888888888'},
  {'contactid': 3, 'contactname': '夢小白3', 'contacttext': '18888888888'},
  {'contactid': 4, 'contactname': '夢小白4', 'contacttext': '18888888888'},
  {'contactid': 5, 'contactname': '夢小白5', 'contacttext': '18888888888'},
  {'contactid': 6, 'contactname': '夢小白6', 'contacttext': '18888888888'},

  {'contactid': 1, 'contactname': '夢小白7', 'contacttext': '18888888888'},
  {'contactid': 2, 'contactname': '夢小白8', 'contacttext': '18888888888'},
  {'contactid': 3, 'contactname': '夢小白9', 'contacttext': '18888888888'},
  {'contactid': 4, 'contactname': '夢小白10', 'contacttext': '18888888888'},
  {'contactid': 5, 'contactname': '夢小白11', 'contacttext': '18888888888'},
  {'contactid': 6, 'contactname': '夢小白12', 'contacttext': '18888888888'},
];

 

<ion-list>
  <ion-item *ngFor="#contact of contacts" (click)="itemClick($event, contact)">
    <ion-avatar item-left><img src="../images/{{contact.contactid}}.jpg" alt="頭像"></ion-avatar>
    <h2>{{contact.contactname}}</h2>
    <p>{{contact.contacttext}}</p>
  </ion-item>
</ion-list>

 

十、卡片佈局

<ion-card>
  <ion-item>
    <ion-avatar item-left>
      <img src="../images/6.jpg" alt="頭像">
    </ion-avatar>
    <h2>Elon Musk</h2>
    <p>來自 iPhone 6s</p>
  </ion-item>
  <img src="../images/c1.jpg" alt="圖片">
  <ion-card-content>
    <p>我又發佈了一輛新車，上天入地捨我其誰？呵呵</p>
  </ion-card-content>
  <ion-item>
    <button primary clear item-left><ion-icon name="thumbs-up"></ion-icon><div>888 贊</div></button>
    <button primary clear item-left><ion-icon name="text"></ion-icon><div>600 評論</div></button>
    <ion-note item-right>
      1小時前
    </ion-note>
  </ion-item>
</ion-card>

 

十一、navigation控件

itemClick(event, contact) {
  //console.log(event);
  //console.dirxml(contact);
  //alert(contact.contactname);

  this.navCtrl.push(ContactDetails, {item: contact});
}

 

ContactDetails頁面

/**
 * Created by Administrator on 2016/8/23 0023.
 */
import {Component} from '@angular/core';
import {NavParams} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/about/contactdetails.html'
})
export class ContactDetails {
  private item = '';

  constructor(public params: NavParams) {
    this.item = params.data.item;
  }
}

 

<ion-header>
  <ion-navbar>
    <ion-title>{{item.contactname}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  {{item.contactname}} 的手機號碼爲：{{item.contacttext}}
</ion-content>

 

（四）Cordova組件介紹

一、Image Picker組件

 

二、Geolocation組件

 

// 獲取位置信息
Geolocation.getCurrentPosition().then((resp) => {
  console.log(resp.coords.latitude);
  console.log(resp.coords.longitude);
});

 

 

三、Local Notifications組件

// 本地提醒組件
LocalNotifications.schedule({
  text: '本地化提醒-您啓動了Ionic App',
  at: new Date(new Date().getTime() + 10000),
  sound: null
});

 

（五）項目實戰

一、快速生成App圖標和啓動頁面

MakeAppicon

Ios.hvims.com

Launcher Icon Generator

iconhandbook.co.uk/reference/chart/android

 

二、使用localStorage存儲狀態信息

localStorage.setItem(key, value)

localStorage.getItem(key)

 

注：Modal頁面的關閉須要使用到ViewController中的dismiss方法。

 

三、Modal關閉後父頁面的概念和方法

 

四、Ionic中的網絡請求

跨域請求問題： http://enable-cors.org/ （固然在App中不會出現，只會在瀏覽器調試的過程當中出現）

 

// 這裏是請求 API 的實現，注意跨域請求的問題，請參見 http://enable-cors.org/
this.http.get('http://xxx/account/Login?email=' + this.user.username + '&password=' + this.user.password)
  .subscribe(data => {
    let res = data.json();
    if(res.LoginStatus == 1) {
      localStorage.setItem('username', this.user.username);
      localStorage.setItem('logined', 'true');
      //自身 modal 隱藏
      this.viewCtrl.dismiss(this.user.username);
      loading.dismiss(); //登陸進度隱藏
    } else {
      let toast = this.toastCtrl.create({
        message: '登陸失敗！',
        duration: 2000,
      });
      toast.present();
    }

  }, err => {
    let toast = this.toastCtrl.create({
      message: '登陸失敗！',
      duration: 2000,
    });
    toast.present();

  });

 

 

五、List中滑動刪除數據

<ion-list>
  <ion-item-sliding *ngFor="#contact of contacts">
    <ion-item (click)="itemClick($event, contact)">
      <ion-avatar item-left><img src="images/{{contact.contactid}}.jpg" alt="頭像"></ion-avatar>
      <h2>{{contact.contactname}}</h2>
      <p>{{contact.contacttext}}</p>
    </ion-item>
    <ion-item-options>
      <button danger (click)="removeContact(contact)">
        <span padding><ion-icon name="trash"></ion-icon> 刪除</span>
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

 

六、集成極光推送實現消息推送

// 設置客戶端的別名，用於定向接收消息的推送

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。

 

七、iOS打包與AppStore上架

八、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/

 

http://www.imooc.com/article/14960

button是簡單的組件，包含文字和圖標以及不少屬性。

屬性

先無論按鈕的click事件，簡單的學習下控制按鈕樣式的一些屬性:

color

顧名思義，就是控制按鈕的顏色

<!-- Colors --> <button ion-button>Default</button> <button ion-button color="secondary">Secondary</button> <button ion-button color="danger">Danger</button> <button ion-button color="light">Light</button> <button ion-button color="dark">Dark</button>

多說明一句，上面使用的color,都是定義在src/theme/variables.scss文件中的

shape

有如下三種形狀：

• full
• block
• round

前兩個我沒有發現什麼大的區別，好像都是撐滿父容器，有了解區別的還請指教
round顧名思義就是圓角按鈕的意思

 <!-- Shapes --> Shapes: <br> <table> <tr> <td> <button ion-button block>Block Button</button> </td> <td></td> </tr> </table> <button ion-button round>Round Button</button>

outline

使用該屬性將使按鈕只有邊框。

<!-- Outline --> <button ion-button full outline>Outline + Full</button> <button ion-button block outline>Outline + Block</button> <button ion-button round outline>Outline + Round</button>

Icons

在按鈕中增長圖標的屬性,有如下三個值:

• icon-left : 圖標在文字左邊
• icon-right ：圖標在文字右邊
• icon-only ：只有圖標

 <!-- Icons --> <button ion-button icon-left> <ion-icon name="star"></ion-icon> Left Icon </button> <button ion-button icon-right> Right Icon <ion-icon name="star"></ion-icon> </button> <button ion-button icon-only> <ion-icon name="star"></ion-icon> </button>

Size

這個很簡單，就是制定按鈕的大小，有如下三個值：

• Large
• Default

• small
  大，默認，小

  <!-- Sizes --> <button ion-button large>Large</button> <button ion-button>Default</button> <button ion-button small>Small</button>

高級用法

其實就是和angular2一塊兒使用動態設置樣式的用法
直接上示例：

<button ion-button [color]="isDanger?'danger':'primary'">advanced</button> <!-- Bind the color and round inputs to an expression --> <button ion-button [color]="myColor" [round]="isRound"> Secondary (Round) </button> <!-- Bind the color and clear inputs to an expression --> <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear"> Primary (Clear) </button> <!-- Bind the color, outline and round inputs to an expression --> <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound"> Dark (Solid + Round) </button>

在ts中以下使用：

export class ButtonPage { constructor(public navCtrl: NavController,public navParams:NavParams) { } isDanger: boolean = true; isSecondary: boolean = false; isRound: boolean = true; isOutline: boolean = false; isClear: boolean = true; myColor: string = 'secondary'; myColor2: string = 'dark'; }