第一章 緒論
創(chuàng)建移動app有三種
安卓原生App，使用java語言，目前推薦kotlin語言，開發(fā)工具Android studio
IOS原生App，使用Objective-C或者Swift語言，開發(fā)工具Xcode
混合移動App，使用web通用語言（HTML，css，js）+開發(fā)框架（Ionic）

了解三個獨立的App編寫Ionic應(yīng)用程序
Ionic框架：
一個用HTML，css，js構(gòu)成的用戶界面框架，專門用于混合移動app的開發(fā)，
包含一個強大的命令行接口（CLI）和一套附屬服務(wù)（如Ionic View和Ionic Creator）
最上層是Ionic框架自身--中間層是AngularJS（web應(yīng)用框架）--最下層是Apache Cordova（允許web應(yīng)用程序調(diào)用設(shè)備原生能力并將APP轉(zhuǎn)換成原生App）

使用原生app的優(yōu)劣勢
優(yōu)點：
開發(fā)工具和設(shè)備平臺緊密綁定，IDE明確；
所有的原生api和功能對開發(fā)者都可用，不需要橋接方案；
app性能盡可能優(yōu)化，沒有中間層的性能開銷；
缺點：
開發(fā)語言只能使用一種或幾種；主要是因為部署app到IOS和Android，需要熟悉多種語言和工具

最早的app是沒有app商店的，屬于移動web App應(yīng)用，通過設(shè)備上的web瀏覽器進行加載，只使用web技術(shù)創(chuàng)建App并通過設(shè)備瀏覽器進行發(fā)布
優(yōu)點：可以部署到多個平臺，只需要考慮目標市場，升級也只需上傳新包到服務(wù)器
缺點：app直接運行在本地瀏覽器，可能會受到瀏覽器無法訪問設(shè)備的全部能力，搜索url也不是人人都喜歡

于是乎出現(xiàn)了混合移動App
它也是一種原生移動app，使用web瀏覽器運行web應(yīng)用，只是在設(shè)備和webview之間用了一個原生app容器橋接
優(yōu)點：多平臺部署，能夠訪問設(shè)備的全部能力（插件系統(tǒng)）；
缺點：性能和容量受瀏覽器限制，使用插件進行通信會出現(xiàn)一種依賴，不能保證API是可用的，UI組件可用度低

因此出現(xiàn)了改善這種插件的框架Ionic

Ionic技術(shù)棧
Ionic自身、AngularJS、cordova
Ionic提供了web app不具備的UI組件，CLI命令行接口（創(chuàng)建、編譯、發(fā)布Ionic應(yīng)用程序）、圖形化設(shè)計構(gòu)造工具
Ionic主要目標是UI層，集成Angular和Cordova提供接近于原生的體驗
AngularJS（構(gòu)造復(fù)雜、單頁面web app的MVW框架）
Cordova：能夠利用web技術(shù)構(gòu)建嵌入webview的原生app，提供了webview和設(shè)備原生層之間的接口，橋接框架，支持多平臺，這也是混合移動app的好處
cordova還可以使用自身的命令工具搭建腳手架、編譯和部署移動應(yīng)用。
需要準備的學習條件：HTML、CSS、JS，Angular基礎(chǔ)（TypeScript工具）,移動設(shè)備

第二章 環(huán)境配置
基本Ionic安裝、指定平臺SDK安裝；配置安裝環(huán)境，才能使用模擬器，能夠在設(shè)備上部署和測試應(yīng)用程序并實現(xiàn)app發(fā)布
Ionic框架安裝：
需要四個組件（Node.js，Git，Ionic，Apache Cordova），Ionic和CLI都是用Node.js編寫的
node.js安裝
打印node.js版本：node -v
NPM(Node的包管理器)更新：npm -v
更新NPM安裝：npm istall npm -g

Git安裝省略

Apache cordova CLI
安裝：npm install -g cordova

Ionic CLI
安裝:npm install -g ionic
查看：ionic -v

新建Ionic項目
ionic start testApp --v2
Ionic框架通過一系列初始模板來創(chuàng)建一個項目的腳手架，模板包括：指定的模板（blank,sidemenu,tabs），GitHub庫，Codepen，一個本地目錄，默認使用tabs
在瀏覽器中預(yù)覽：ionic serve

安裝平臺工具：IOS的Xcode，Android studio較好，Windows Universal
配置模擬器
配置設(shè)備
添加移動平臺：ionic platform add android
模擬器上測試：ionic emulate[platform]
ionic emulate ios --target="iPad-Air"
日志：ionic emulate ios -l -c
設(shè)備上測試：ionic run ios -l -c
ionic run android -l -c

第三章 Ionic命令行界面
CLI，它的功能
使用GitHub的模板創(chuàng)建App的例子
ionic start myApp https://github.com/driftyco/ionic2-start-blank --v2
CLI使用TypeScript作為開發(fā)語言
修改APP名稱
ionic start myAPP -a "My awesome Ionic App"
指定編譯平臺
ionic platform add android
管理cordova插件
ionic plugin add cordova-plugin-geolocation(添加)
ionic plugin rm cordova-plugin-geolocation(移除)
ionic plugin ls（查看）
ionic允許你自己搭建指定的模板
ionic g [page|component|deirective|pipe|provider|tabs][element name]
ionic g page mypage
運行app：ionic serve 或ionic serve --lab（顯示多個瀏覽器窗口）
指定ip：ionic serve --address 112.365.365.321
查看CLI信息：ionic info

第四章 AngularJS和TypeScript
AngularJS是基于組件的
組件：
import {Component} from '@angular/core'
//定義組件元數(shù)據(jù)
@Component({
selector:'myfirstapp'//標簽
template:`<div>Hello,my name is {{name}}.
<button (click)="sayMyName()">Log my name</button></div>`//模板
})
export class MyCompanet{
constructor(){
this.name='Inigo Montoya'
}
sayMyName(){
console.log('Hello my name is',this.name,'you killed my father,prepare to die')
}
}
輸入：需要將信息傳遞到組件的機制，通過Input模塊實現(xiàn)
比如組件<current-user>
<current-user [user]="current-user"></current-user>
這個組件的定義如下：
import {Component,Input}from'@angular/core';
@Component({
selector:'current-user',
template:'<div>{{user.name}}</div>'//模板
})
export class UserProfile{
@Input()user;
constructor(){}
}
通過@Input綁定user變量，angularJS會傳遞currentUser變量給這個組件，讓模板渲染出user.name的值，從而實現(xiàn)數(shù)據(jù)的傳遞和參數(shù)的設(shè)置
模板：
渲染：{}
如<div>{{user.name}}</div>
綁定屬性：[]
如<current-user [user]="current-user"></current-user>
事件處理：()類似點擊事件
如<my-component (click)="onUserClick($event)"></my-component>
雙向數(shù)據(jù)綁定[{}]
如<input [(ngModal)]="username">
星號*：*告訴模板以指定的方式進行處理
如<my-component *ngFor="let item of items"></my-component>
事件：事件使用（）標記
<button (click)="clicked()">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(){

}
}
方法可以帶參數(shù)，只需在clicked方法加入?yún)?shù)名
<button (click)="clicked($event)">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(event){

}
}

如果你的組件需要向其他組件廣播自定義事件，可以導(dǎo)入Output模塊和EventEmitter模塊
使用@Output修飾符定義事件，這個事件是一個EventEmitter實例
import {Component,Output,EventEmitter}from '@angular/core';
@Component({
selector:'user-profile'
template:'<div>Hi,my name is</div>'
})
export class UserProfile{
@Output() userDataUpdated = new EventEmitter();
constructor(){
//修改user
//...
this.userDataUpdated.emit(this.user);
}
}

可以綁定user-profile組件的事件了
<user-profile (userDataUpdated)="userDataUpdated($event)"></user-profile>

生命周期事件（允許訪問生命周期中的每一個環(huán)節(jié)）通常與創(chuàng)建、渲染、銷毀相關(guān)
@NgModule實現(xiàn)App的引導(dǎo)方式，它使用元數(shù)據(jù)對象告訴Angular如何編譯和運行模塊代碼，允許將所有的依賴進行前置聲明，而不用在app中多次聲明
import {NgModule}from '@angular/core';
import {BrowserModule}from '@angular/platform-browser';
import {AppComponent}from './app.cpmponent';
@NgModule({
imports:[BrowserModule],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
exports class AppModule{}
這段代碼是基本的app.module.ts文件的例子，使用了BrowserModule模塊，才能運行在web瀏覽器中
這個模塊會被main.ts所用，引導(dǎo)過程：
import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
import {AppModule}from './app.module';
const platform =platformBrowserDynamic();
platform.bootstrapModule(AppModule)
初始化app運行的平臺，然后用這個平臺引導(dǎo)AppModule

組件被創(chuàng)建時，構(gòu)造器會被調(diào)用，所以需要對構(gòu)造器進行初始化
提供了一個ngOnInit事件
Ionic事件，掌握事件描述的意義，省略

管道符（過濾器）
將一個值轉(zhuǎn)換成新的值，|
<p>
The author's birthday is {{birthday|date}}
</p>>

經(jīng)常需要讀寫子組件的方法，當父組件需要這些方法，需要將子方法注入父組件中，@ViewChild

?

TypeScript（改進js）
所有改進的js語言版本都面臨必須將代碼轉(zhuǎn)換成標準的js（就是所謂的轉(zhuǎn)譯，一種語言轉(zhuǎn)換成另一種語言）
TypeScript是對javaScript 的擴展，提供了強大的類型檢查和面向?qū)ο筇匦?#xff0c;是Ionic的主要語言
它的轉(zhuǎn)譯已經(jīng)內(nèi)置在Ionic編譯中

變量指定：let，變量的作用域僅限最近的塊
for(let i =0; i<=10;i++){
console.log(i)
}

類定義：和大多數(shù)語言定義相似

promise：用于延遲和異步，需要和遠程服務(wù)器打交道或者加載本地數(shù)據(jù)時用到該方法
三種狀態(tài)：
Pengding、Fullfilled、Rejected
var greetingPromise = sayHello();
greetingPromise.then(function(greeting){
console.log(greeting);
},function(error){
console.error('uo',error)
});

Angular很多服務(wù)使用Observable而不使用promise，他可以解決多個值的同步

Angular內(nèi)置了模板引擎，使用`符號進行連接，
箭頭函數(shù)：簡化函數(shù)作用域和this關(guān)鍵字，可以不用輸入function關(guān)鍵字、return關(guān)鍵字以及大括號
var multiply =(x,y)=>{return x*y};
箭頭函數(shù)通常用來數(shù)組操縱,數(shù)組就不需要定義了 var missions=[{},{}...];
console.log(mission.map(mission=>mission.flights));

類型：string/number/boolean
特殊類型：any/null/undefined/void
類型化函數(shù)：變量可以類型化，函數(shù)返回值也可以類型化
function sayHello(theName:string):string{
return 'Hello,'+theName;
}

:void用于表示函數(shù)沒有返回類型
function log(message):void{
console.log(message);
}

第五章 Apache cordova

cordova開源框架允許使用HTML、CSS、JS創(chuàng)建針對各種移動設(shè)備的本地應(yīng)用
它會將web應(yīng)用渲染到原生的webView中，web view是一個原生的app組件
cordova將web app無法訪問的電話號碼等信息通過插件都暴漏給開發(fā)者，插件提供了一個web app和設(shè)備原生能力的橋接層，說白了就是管理各種插件的集合，一般是通過第三方插件提供（NFC通信、壓感觸控、推送通知）
如：Battery status監(jiān)控設(shè)備電池狀態(tài)
雖然cordova為開發(fā)者提供了大量的功能，但是缺少一個重要的組件：用戶界面組件，因此最好的方法是使用第三方框架，如Ionic，這就是Ionic技術(shù)的底層

第六章 理解Ionic（這一章節(jié)還需要找項目查看，平安小區(qū)app就可以）
ionic頁面組成：html文件（定義要顯示的組件）、Sass文件（定義組件的可視化樣式）、TypeScript文件（定義組件的自定義功能）它是基于web技術(shù)開發(fā)的，所以會用到很多傳統(tǒng)web app的技術(shù)
我們只需要定義真正需要展示給用戶的組件，因為ionic頁面的html文件是在App容器中渲染，不需要像傳統(tǒng)的HTML頁面那樣定義body等初始標簽。
app.html:
<ion-split-pane>
<!-- logged user menu -->
<ion-menu id="loggedUserMenu"[content]="content">
<ion-header>
<ion-toolbar>
<ion-title>平安小區(qū)</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
我的相關(guān)
</ion-list-header>
<button ion-item menuClose *ngFor="let p of personalPages"(click)="openPage(p)">
<ion-icon item-start [name]="p.icon"[color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- main navigation -->
<ion-nav [root]="rootPage"#content swipeBackEnabled="false" main name="app"></ion-nav>
</ion-split-pane>

app.scss包含了變量聲明，如$company-brand:#ff11dd,直接通過變量來代替這個顏色值
所有的Ionic組件都使用Sass變量設(shè)置樣式，具體參看Ionic文檔
Ionic使用gulp這個構(gòu)建工具來預(yù)編譯sass
page-app{
.content{

}
.toolbar-title-md{

}
.bar-button-default-md{

}
.content_{

}
@each $track,$value in auxiliary-categories(){

}
ion-row{

}
}
App級別的主題樣式會有一個單獨的sass文件

TypeScript（編寫和頁面交互邏輯相關(guān)的Angular/TypeScript代碼，功能實現(xiàn)）文件后綴.ts

基本.ts前面已經(jīng)寫過（省略177行）
平安小區(qū)的包含兩個ts文件，.module.ts和.ts
主要應(yīng)用了NgModule模塊，.ts文件實例如下：
import { Component,ViewChild } from '@angular/core';
import { MenuController,IonicPage, NavController, App, ToastController,InfiniteScroll } from 'ionic-angular';
import { ApiHttpProvider } from '../../providers';
import 'rxjs/add/operator/share';
import { Storage } from '@ionic/storage';
/**
* Generated class for the AccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
* @Author 葛明
* @Date 2018-6-8 15:12
* @Note 用戶信息頁面
* @Version 1.0
*/

@IonicPage()
@Component({
selector: 'page-account',
templateUrl: 'account.html',
})
export class AccountPage {

@ViewChild('infinitescroll', { read: InfiniteScroll }) infiniteScroll: InfiniteScroll;

//用戶對象
residentObjs: { userName: string , userVillage: string, sex:string,idCard:number ,loginName:string,loginPwd:string,kinsfolk:string,grid:string ,building:string,unit:string,room:string,userMobile:string,userType?:number} = {
userName: "",
userVillage:"",
sex: "",
idCard : 1,
loginName: "",
loginPwd:"",
kinsfolk: "",
grid:"",
building: "",
unit : "",
room: "",
userMobile:""
};

constructor(public menu: MenuController,public storage: Storage,public app: App,public navCtrl: NavController,public toastCtrl: ToastController, public apiHttp: ApiHttpProvider) {

}

ionViewDidLoad() {
console.log('ionViewDidLoad AccountPage');
//this.app.setTitle('用戶信息');
this.update();
}

?

//查詢
update() {
this.storage.forEach( (value, key) => {
if(key=='userName') this.residentObjs.userName=value;
else if(key=='userVillage') this.residentObjs.userVillage=value;
else if(key=='sex') this.residentObjs.sex=value;
else if(key=='idCard') this.residentObjs.idCard=value;
else if(key=='loginName') this.residentObjs.loginName=value;
else if(key=='loginPwd') this.residentObjs.loginPwd=value;
else if(key=='kinsfolk') this.residentObjs.kinsfolk=value;
else if(key=='grid') this.residentObjs.grid=value;
else if(key=='building') this.residentObjs.building=value;
else if(key=='unit') this.residentObjs.unit=value;
else if(key=='room') this.residentObjs.room=value;
else if(key=='userMobile') this.residentObjs.userMobile=value;
else if(key=='userType') this.residentObjs.userType=value;
})
}
}

總結(jié)：學習了前面的Ionic、Angular、Cordova后，以及需要的插件，他們之間到底有什么關(guān)系呢？
Ionic和Angular：
Ionic只是對Angular進行了擴展，利用Angular實現(xiàn)了很多符合移動端應(yīng)用的組件，并搭建了很完善的樣式庫，是對Angular最成功的應(yīng)用樣例。即使不使用Ionic，Angular也可與任意樣式庫，如Bootstrap、Foundation等搭配使用，得到想要的頁面效果
混合開發(fā)中扮演的是不同的角色–Ionic/Angular負責頁面的實現(xiàn)，而Cordova負責將實現(xiàn)的頁面包裝成原生應(yīng)用（Android:apk；iOS:ipa）
就像花生，最內(nèi)層的花生仁是Angular，花生仁的表皮是Ionic，而最外層的花生殼則是Cordova。

Cordova插件的作用是提供一個橋梁供頁面和原生通信，首先我們的頁面不能直接調(diào)用設(shè)備能力，所以需要與能夠調(diào)用設(shè)備能力的原生代碼（Android:Java；iOS:OC）通信，此時就需要Cordova插件了。

Cordova插件能夠再任何Cordova工程中使用，和使用什么前端框架（如Ionic）無關(guān)。

Ionic 2中封裝了Ionic Native，方便了Cordova插件的使用，但在Ionic 2中仍然可以像Ionic 1中一樣使用Cordova插件，Ionic Native不是必須的。

即使在Ionic 2中使用了Ionic Native，也首先需要手動添加插件，如：cordova plugin add cordova-plugin-pluginName。

?

轉(zhuǎn)載于:https://www.cnblogs.com/jacksonlee/p/10244853.html

總結(jié)

以上是生活随笔為你收集整理的Ionic混合移动app框架学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。