術(shù)框架介紹

IONIC 3.5框架

IONIC 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。Ionic是一個(gè)專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺原生應(yīng)用的一個(gè)開發(fā)框架。Ionic框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用，基于PhoneGap的編譯平臺，可以實(shí)現(xiàn)編譯成各個(gè)平臺的應(yīng)用程序。

Ionic為性能而生-追求性能

在html5移動app開發(fā)中,速度是很重要的。Ionic在最新的移動設(shè)備中表現(xiàn)非常卓越，運(yùn)行非常流暢。 操作最少的 DOM，非 jQuery，和硬件加速過渡，讓您感覺到用html5開發(fā)的app也可以飛起來。

Ionic完美的融合下一代移動框架 AngularJS- AngularJS移動端解決方案

Ionic可以說是AngularJS移動端解決方案，Ionic 利用 AngularJS創(chuàng)造出一款最適合開發(fā)豐富而強(qiáng)大應(yīng)用的框架。 Ionic不僅如此優(yōu)秀，而且它的核心架構(gòu)也是為開發(fā)專業(yè)應(yīng)用創(chuàng)建，和AngularJS完美融合。

Ionic讓你看不出混合應(yīng)用和原生的區(qū)別-專注原生

Ionic以流行的原生移動開發(fā)SDK為藍(lán)本，使開發(fā)過原生iOS或安卓app的任何人都容易理解。開始只需書寫你的代碼，完成時(shí)通過PhoneGap發(fā)布。一次開發(fā)，處處運(yùn)行。

漂亮的設(shè)計(jì)讓你立馬愛上它

簡潔，簡單，而且實(shí)用。 Ionic為所有當(dāng)前移動設(shè)備而設(shè)計(jì)，并且呈現(xiàn)完美。伴隨眾多流行移動組件，結(jié)構(gòu)，交互規(guī)范，以及華麗的（且可擴(kuò)展）的主題，你可以更好的定制化APP應(yīng)用。

開發(fā)準(zhǔn)備

環(huán)境：

①下載安裝Node JS 版本6.0以上 安裝完成cmd輸入node -v 顯示對應(yīng)版本即安裝成功

②安裝ionic和Cordova

Cmd 輸入npm install -g ionic cordova 經(jīng)過漫長的等待，會提示安裝成功

③創(chuàng)建ionic項(xiàng)目

Cmd窗口 cd項(xiàng)目創(chuàng)建的目錄 輸入ionic start project_name [template]

template是內(nèi)置的模板類型：blank/sidemenu/tabs/（default）三種

Ionic3常用命令npm install -g cnpm --registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶） cnpm install -g cordova ionic（安裝cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看幫助） ionic -v（查看版本） ionic start myionictest blank（空項(xiàng)目） ionic start myionictest tabs（帶導(dǎo)航條） ionic start myionictest sidemenu（帶側(cè)滑菜單） ionic g page login(添加頁面)ionic g provider BaseService(添加服務(wù)端口)ionic platform add androidionic platform add android（添加android平臺） ionic platform remove android（移除android平臺） ionic build android（編譯項(xiàng)目apk） ionic emulate android（運(yùn)行項(xiàng)目apk 手機(jī)連接在手機(jī)運(yùn)行模擬器連接在模擬器運(yùn)行） ionic run android （相當(dāng)于build + emulate） ionic serve（開啟服務(wù)調(diào)試）

PS:

編輯工具：

WebStorm 2017.02

編譯環(huán)境：

Android：①JDK1.8 ②Android SDK (API25 具體看項(xiàng)目)

Ios：①Xcode ②Developer Program

項(xiàng)目目錄

按照官網(wǎng)命令ionic start創(chuàng)建項(xiàng)目后生成如下結(jié)構(gòu)樹：

hooks：編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中

node_modules ：node各類依賴包

resources ：android/ios 資源（更換圖標(biāo)和啟動動畫）

src：開發(fā)工作目錄，頁面、樣式、腳本和圖片都放在這個(gè)目錄下

www：文靜態(tài)件

platforms：生成android或者ios安裝包路徑（ platforms\android\build\outputs\apk：apk所在位置）

plugins：插件文件夾，里面放置各種cordova安裝的插件

config.xml: 配置文件

package.json: node安裝模塊時(shí)的依據(jù)

tsconfig.json: TypeScript項(xiàng)目的根目錄，指定用來編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)

tslint.json：格式化和校驗(yàn)typescript

src工作目錄：

app：應(yīng)用根目錄

assets：資源目錄（靜態(tài)文件（圖片，js框架。。。）各種需要放置在此文件夾內(nèi)，不然會出錯(cuò)，（尷尬。。。）

pages：頁面文件，放置編寫的頁面文件，包括：html，scss，ts。（搞事情的）

theme：主題文件，里面有一個(gè)scss文件，設(shè)置主題信息。

涉及的框架知識

Angular4 架構(gòu)詳解

官方架構(gòu)圖：

這個(gè)架構(gòu)圖展現(xiàn)了 Angular 應(yīng)用中的 8 個(gè)主要構(gòu)造塊：

· 模塊 (module)

· 組件 (component)

· 模板 (template)

· 元數(shù)據(jù) (metadata)

· 數(shù)據(jù)綁定 (data binding)

· 指令 (directive)

· 服務(wù) (service)

· 依賴注入 (dependency injection)

接下來我按順序并結(jié)合圖來講解一下。

1.模塊 (module)

Angular 或者 ionic 新建的項(xiàng)目，都會存在一個(gè)根模塊，默認(rèn)名是 AppModule。如果你使用了模塊化來創(chuàng)建應(yīng)用，包括 AppModule，每個(gè)都會存在一個(gè) @NgModule 裝飾器的類(雖然他很像 java 中的注解，但是他的官方命名叫裝飾器)。我們新建的頁面，如果不使用懶加載，都要在 @NgModule 中先聲明后使用。

下面舉個(gè)例子，簡單介紹一下 @NgModule 中的內(nèi)容

?imports 本模塊聲明的組件模板需要的類所在的其它模塊

?providers 服務(wù)的創(chuàng)建者，并加入到全局服務(wù)列表中，可用于應(yīng)用任何部分。

?declarations 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。

?exports declarations 的子集，可用于其它模塊的組件模板。

?bootstrap 指定應(yīng)用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設(shè)置 bootstrap 屬性。

PS：在圖中的意義：看圖左上角，模塊是用來接收一個(gè)用來描述模塊屬性元數(shù)據(jù)對象的。

2.組件 (component)、模板 (template)、元數(shù)據(jù) (metadata)

這次我們把這三點(diǎn)一起來講，先看一下這段代碼

Component組件是一個(gè)裝飾器，他能接受一個(gè)配置對象， Angular 會基于這些信息創(chuàng)建和展示組件及其視圖。

· selector：CSS 選擇器，它告訴 Angular 在父級 HTML 中查找 <hero-list> 標(biāo)簽，創(chuàng)建并插入該組件。

· templateUrl：組件 HTML 模板的模塊相對地址，如果使用 template 來寫的話是用"`"這個(gè)符號來直接編寫 HTML 代碼。

· providers：組件所需服務(wù)的依賴注入。

template模板就是那段 HTML 代碼，可以用 templateUrl 引入外面的，也可以用 template`` 直接寫。

metadata元數(shù)據(jù)裝飾器用類似的方式來指導(dǎo) Angular 的行為。 例如 @Input、@Output、@Injectable 等是一些最常用的裝飾器，用法就不在這里展開了。

PS：在圖中的意義：看圖中間那一塊，模板、元數(shù)據(jù)和組件共同描繪出這個(gè)視圖。

3.數(shù)據(jù)綁定 (data binding)

這里一共展示四種數(shù)據(jù)綁定，看一下示例代碼：

后臺ts：

可能大家對各種括號看的眼花了，總結(jié)一下：

1. 雙花括號是單向綁定，傳遞的是值。方向是組件 -> 模板。

2. 方括號是單向綁定，傳遞的是屬性。方向是父組件 -> 子組件。

3. 圓括號是事件綁定，處理點(diǎn)擊等活動（action）。

4. 方括號套圓括號是雙向綁定，方向是組件 <-> 模板。

PS：在圖中的意義：看圖中間那一塊，數(shù)據(jù)綁定給模板和組件提供數(shù)據(jù)交互的方式。

4.指令 (directive)

嚴(yán)格來說組件就是一個(gè)指令，但是組件非常獨(dú)特，并在 Angular 中位于中心地位，所以在架構(gòu)概覽中，我們把組件從指令中獨(dú)立了出來。我們這里提到的指令有兩種類型：結(jié)構(gòu)型 structural 指令和屬性 attribute 型指令。放一下原文證明一下組件確實(shí)算是一個(gè)指令：

While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.Two other kinds of directives exist: structural and attribute directives.

結(jié)構(gòu)型指令是 ngFor、ngIf 這種的，通過在 DOM 中添加、移除和替換元素來修改布局。

屬性型指令是 ngModel 這種的，用來修改一個(gè)現(xiàn)有元素的外觀或行為。

Angular 還有少量指令，它們或者修改結(jié)構(gòu)布局（例如 ngSwitch ）， 或者修改 DOM 元素和組件的各個(gè)方面（例如 ngStyle 和 ngClass）。

PS：在圖中的意義：看圖右上角那一塊，組件是一個(gè)帶模板的指令，只是擴(kuò)展了一些面向模板的特性。

5.服務(wù) (service)

官方文檔的概念：服務(wù)是一個(gè)廣義范疇，包括：值、函數(shù)，或應(yīng)用所需的特性。服務(wù)沒有什么特別屬于 Angular 的特性。Angular 對于服務(wù)也沒有什么定義，它甚至都沒有定義服務(wù)的基類，也沒有地方注冊一個(gè)服務(wù)。

這就像你在 iOS 或者 Android 里單獨(dú)建了一個(gè)類叫 httpService ，封裝了網(wǎng)絡(luò)請求服務(wù)一樣，不是具體的什么東西，就是一個(gè)概念了解下就行。

PS：在圖中的意義：看圖左下角角那一塊，服務(wù)是用來封裝可重用的業(yè)務(wù)邏輯。

6.依賴注入 (dependency injection)

依賴注入是提供類的新實(shí)例的一種方式，還負(fù)責(zé)處理類所需的全部依賴。大多數(shù)依賴都是服務(wù)。 Angular 使用依賴注入來提供新組件以及組件所需的服務(wù)。

比如我們要給某組件導(dǎo)入 ContactServiceProvider這個(gè)服務(wù)，看這段代碼：

這個(gè)constructor就是構(gòu)造函數(shù)，依賴注入在 constructor 中進(jìn)行。你也許會覺得前面寫上 private、public 之類的很怪，這是 TypeScript 語法比較特殊，習(xí)慣就好。

當(dāng) Angular 創(chuàng)建組件時(shí)，會首先為組件所需的服務(wù)請求一個(gè)注入器 injector。我們必須先用注入器 injector 為 ContactServiceProvider注冊一個(gè)提供商 provider。

看一下下面的代碼，

PS：在圖中的意義：看圖左下角角那一塊，依賴注入主要用來導(dǎo)入服務(wù)。

推薦一些學(xué)習(xí)資源

官方文檔，內(nèi)容很全，需要一定的時(shí)間進(jìn)行閱讀。

官方文檔，至少要把 TS 的基本語法要去掌握了。

根據(jù)官網(wǎng)翻譯，基本知識很全，需要掌握。

IONIC組件

我們?nèi)粘Ｉ钪校珹PP已經(jīng)和我們的吃喝住行息息相關(guān)。APP如此強(qiáng)大的功能來源于開發(fā)技術(shù)的一行行代碼。本文小猿圈HTML5前端開發(fā)講師和大家分享一起為什么要用HTML5開發(fā)APP軟件？

小猿圈HTML5前端開發(fā)講師簡述為什么用HTML5開發(fā)APP：

1、開源生態(tài)系統(tǒng)發(fā)達(dá)：

HTML5前端是開放的正反饋循環(huán)生態(tài)系統(tǒng)，大量的開源庫可以使用，開發(fā)應(yīng)用變得更輕松、更敏捷，當(dāng)然這也體現(xiàn)在了快速迭代和成本下降上。不過更重要的是，這種開放的正反饋循環(huán)生態(tài)系統(tǒng)未來的生命力是比原生生態(tài)系統(tǒng)更強(qiáng)勁的。

2、持續(xù)交付：

很多人有這樣的體會，一個(gè)原生應(yīng)用上線Appstore，突然有一個(gè)大bug，只好連夜加班修復(fù)，然后靜靜等待2周或更長時(shí)間的Apple審核，這2個(gè)星期被用戶的涂抹淹死，市場上一片差評，用戶大量流失。等新應(yīng)用被審核上線了，用戶已經(jīng)卸載了。但是，HTML5沒有這些問題，你可以實(shí)時(shí)更新，有問題立即響應(yīng)。

3、開放的數(shù)據(jù)交換：

HTML是以page為單元開放代碼的，它無需專門開發(fā)SDK，只要不混淆，就能與其他應(yīng)用交互數(shù)據(jù)。開發(fā)者可以讓手機(jī)搜索引擎很容易檢索到自己的數(shù)據(jù)， 也更容易通過跨應(yīng)用協(xié)作來滿足最終用戶需求。

以上就是小猿圈web視頻教程講師給大家介紹的為什么用HTML5開發(fā)APP一文。小猿圈是國內(nèi)唯一全站免費(fèi)的在線學(xué)習(xí)平臺，帶著過去多年的光榮與夢想，小猿圈再次啟航。我們堅(jiān)信技術(shù)推動世界發(fā)展，在技術(shù)進(jìn)步的背后是夢想不斷在驅(qū)動!我們歡迎每一位有激情、有夢想、熱愛技術(shù)的同學(xué)，通過小猿圈的舞臺創(chuàng)造出更加精彩的未來!You Make The Future!