博主送福利了,微信掃碼有驚喜。超值紅包等着你。。么么噠
言歸正轉
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頁面的生命周期
- // 頁面被加載完成后調用的函數,切換頁面時並不會進行重新加載,因為有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組件
1、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);
- }
- }
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>
3、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);
- }
- }
4、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);
- }
- }
- }
5、Toast控件
- // 2. 使用 Toast 控件
- let toast = this.toastCtrl.create({
- message: '輸入的用戶名格式不正確!',
- duration: 3000,
- });
- toast.present();
6、Grid布局
- <ion-row>
- <ion-col>
- <div class="textAlignRight marginTop10"><button clear>還沒有賬號?點擊注冊</button></div>
- </ion-col>
- </ion-row>
7、 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 {
- }
8、 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>
9、 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>
10、卡片布局
- <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>
11、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組件介紹
1、Image Picker組件
2、Geolocation組件
- // 獲取位置信息
- Geolocation.getCurrentPosition().then((resp) => {
- console.log(resp.coords.latitude);
- console.log(resp.coords.longitude);
- });
3、Local Notifications組件
- // 本地提醒組件
- LocalNotifications.schedule({
- text: '本地化提醒-您啟動了Ionic App',
- at: new Date(new Date().getTime() + 10000),
- sound: null
- });
(五)項目實戰
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中不會出現,只會在瀏覽器調試的過程中出現)
- // 這里是請求 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();
- });
5、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>
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打包與發布
參考學習:
http://kangax.github.io/compat-table/es6/
https://github.com/driftyco/ionic-preview-app/
http://www.typescriptlang.org/docs/
http://mhartington.io/post/ionic2-external-libraries/