Ionic混合移動app框架學習

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

瞭解三個獨立的App編寫Ionic應用程序
Ionic框架：
一個用HTML，css，js構成的用戶界面框架，專門用於混合移動app的開發，
包含一個強大的命令行接口（CLI）和一套附屬服務（如Ionic View和Ionic Creator）
最上層是Ionic框架自身--中間層是AngularJS（web應用框架）--最下層是Apache Cordova（容許web應用程序調用設備原生能力並將APP轉換成原生App）

使用原生app的優劣勢
優勢：
開發工具和設備平臺緊密綁定，IDE明確；
全部的原生api和功能對開發者均可用，不須要橋接方案；
app性能儘量優化，沒有中間層的性能開銷；
缺點：
開發語言只能使用一種或幾種；主要是由於部署app到IOS和Android，須要熟悉多種語言和工具

最先的app是沒有app商店的，屬於移動web App應用，經過設備上的web瀏覽器進行加載，只使用web技術建立App並經過設備瀏覽器進行發佈
優勢：能夠部署到多個平臺，只須要考慮目標市場，升級也只需上傳新包到服務器
缺點：app直接運行在本地瀏覽器，可能會受到瀏覽器沒法訪問設備的所有能力，搜索url也不是人人都喜歡

因而乎出現了混合移動App
它也是一種原生移動app，使用web瀏覽器運行web應用，只是在設備和webview之間用了一個原生app容器橋接
優勢：多平臺部署，可以訪問設備的所有能力（插件系統）；
缺點：性能和容量受瀏覽器限制，使用插件進行通訊會出現一種依賴，不能保證API是可用的，UI組件可用度低

所以出現了改善這種插件的框架Ionic

Ionic技術棧
Ionic自身、AngularJS、cordova
Ionic提供了web app不具有的UI組件，CLI命令行接口（建立、編譯、發佈Ionic應用程序）、圖形化設計構造工具
Ionic主要目標是UI層，集成Angular和Cordova提供接近於原生的體驗
AngularJS（構造複雜、單頁面web app的MVW框架）
Cordova：可以利用web技術構建嵌入webview的原生app，提供了webview和設備原生層之間的接口，橋接框架，支持多平臺，這也是混合移動app的好處
cordova還可使用自身的命令工具搭建腳手架、編譯和部署移動應用。
須要準備的學習條件：HTML、CSS、JS，Angular基礎（TypeScript工具）,移動設備

第二章 環境配置
基本Ionic安裝、指定平臺SDK安裝；配置安裝環境，才能使用模擬器，可以在設備上部署和測試應用程序並實現app發佈
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框架經過一系列初始模板來建立一個項目的腳手架，模板包括：指定的模板（blank,sidemenu,tabs），GitHub庫，Codepen，一個本地目錄，默認使用tabs
在瀏覽器中預覽：ionic serve

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

第三章 Ionic命令行界面
CLI，它的功能
使用GitHub的模板建立App的例子
ionic start myApp https://github.com/driftyco/ionic2-start-blank --v2
CLI使用TypeScript做爲開發語言
修改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'
//定義組件元數據
@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模塊實現
好比組件<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的值，從而實現數據的傳遞和參數的設置
模板：
渲染：{}
如<div>{{user.name}}</div>
綁定屬性：[]
如<current-user [user]="current-user"></current-user>
事件處理：()相似點擊事件
如<my-component (click)="onUserClick($event)"></my-component>
雙向數據綁定[{}]
如<input [(ngModal)]="username">
星號*：*告訴模板以指定的方式進行處理
如<my-component *ngFor="let item of items"></my-component>
事件：事件使用（）標記
<button (click)="clicked()">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(){

}
}
方法能夠帶參數，只需在clicked方法加入參數名
<button (click)="clicked($event)">click</button>
該組件的定義是：
@Component(...)
class MyCompanent{
clicked(event){

}
}

若是你的組件須要向其餘組件廣播自定義事件，能夠導入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>

生命週期事件（容許訪問生命週期中的每個環節）一般與建立、渲染、銷燬相關
@NgModule實現App的引導方式，它使用元數據對象告訴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所用，引導過程：
import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
import {AppModule}from './app.module';
const platform =platformBrowserDynamic();
platform.bootstrapModule(AppModule)
初始化app運行的平臺，而後用這個平臺引導AppModule

組件被建立時，構造器會被調用，因此須要對構造器進行初始化
提供了一個ngOnInit事件
Ionic事件，掌握事件描述的意義，省略

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

常常須要讀寫子組件的方法，當父組件須要這些方法，須要將子方法注入父組件中，@ViewChild

 

TypeScript（改進js）
全部改進的js語言版本都面臨必須將代碼轉換成標準的js（就是所謂的轉譯，一種語言轉換成另外一種語言）
TypeScript是對javaScript 的擴展，提供了強大的類型檢查和麪向對象特性，是Ionic的主要語言
它的轉譯已經內置在Ionic編譯中

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

類定義：和大多數語言定義類似

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

Angular不少服務使用Observable而不使用promise，他能夠解決多個值的同步

Angular內置了模板引擎，使用`符號進行鏈接，
箭頭函數：簡化函數做用域和this關鍵字，能夠不用輸入function關鍵字、return關鍵字以及大括號
var multiply =(x,y)=>{return x*y};
箭頭函數一般用來數組操縱,數組就不須要定義了 var missions=[{},{}...];
console.log(mission.map(mission=>mission.flights));

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

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

第五章 Apache cordova

cordova開源框架容許使用HTML、CSS、JS建立針對各類移動設備的本地應用
它會將web應用渲染到原生的webView中，web view是一個原生的app組件
cordova將web app沒法訪問的電話號碼等信息經過插件都暴漏給開發者，插件提供了一個web app和設備原生能力的橋接層，說白了就是管理各類插件的集合，通常是經過第三方插件提供（NFC通訊、壓感觸控、推送通知）
如：Battery status監控設備電池狀態
雖然cordova爲開發者提供了大量的功能，可是缺乏一個重要的組件：用戶界面組件，所以最好的方法是使用第三方框架，如Ionic，這就是Ionic技術的底層

第六章 理解Ionic（這一章節還須要找項目查看，平安小區app就能夠）
ionic頁面組成：html文件（定義要顯示的組件）、Sass文件（定義組件的可視化樣式）、TypeScript文件（定義組件的自定義功能）它是基於web技術開發的，因此會用到不少傳統web app的技術
咱們只須要定義真正須要展現給用戶的組件，由於ionic頁面的html文件是在App容器中渲染，不須要像傳統的HTML頁面那樣定義body等初始標籤。
app.html:
<ion-split-pane>
<!-- logged user menu -->
<ion-menu id="loggedUserMenu"[content]="content">
<ion-header>
<ion-toolbar>
<ion-title>平安小區</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
個人相關
</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變量設置樣式，具體參看Ionic文檔
Ionic使用gulp這個構建工具來預編譯sass
page-app{
.content{

}
.toolbar-title-md{

}
.bar-button-default-md{

}
.content_{

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

}
ion-row{

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

TypeScript（編寫和頁面交互邏輯相關的Angular/TypeScript代碼，功能實現）文件後綴.ts

基本.ts前面已經寫過（省略177行）
平安小區的包含兩個ts文件，.module.ts和.ts
主要應用了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;
})
}
}

總結：學習了前面的Ionic、Angular、Cordova後，以及須要的插件，他們之間到底有什麼關係呢？
Ionic和Angular：
Ionic只是對Angular進行了擴展，利用Angular實現了不少符合移動端應用的組件，並搭建了很完善的樣式庫，是對Angular最成功的應用樣例。即便不使用Ionic，Angular也可與任意樣式庫，如Bootstrap、Foundation等搭配使用，獲得想要的頁面效果
混合開發中扮演的是不一樣的角色–Ionic/Angular負責頁面的實現，而Cordova負責將實現的頁面包裝成原生應用（Android:apk；iOS:ipa）
就像花生，最內層的花生仁是Angular，花生仁的表皮是Ionic，而最外層的花生殼則是Cordova。

Cordova插件的做用是提供一個橋樑供頁面和原生通訊，首先咱們的頁面不能直接調用設備能力，因此須要與可以調用設備能力的原生代碼（Android:Java；iOS:OC）通訊，此時就須要Cordova插件了。

Cordova插件可以再任何Cordova工程中使用，和使用什麼前端框架（如Ionic）無關。

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

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