移動混合開發(fā)APP技術

 IONIC 3.5框架  IONIC 是目前有潛力的一款 HTML5 手機應用開發(fā)框架。通過 SASS 構(gòu)建應用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強大的應用。 它使用 Java MVVM 框架和 AngularJS 來增強應用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。Ionic是一個專注于用WEB開發(fā)技術，基于HTML5創(chuàng)建類似于手機平臺原生應用的一個開發(fā)框架。Ionic框架的目的是從web的角度開發(fā)手機應用，基于PhoneGap的編譯平臺，可以實現(xiàn)編譯成各個平臺的應用程序。   在html5移動app開發(fā)中,速度是很重要的。Ionic在較新的移動設備中表現(xiàn)非常卓越，運行非常流暢。 操作少的 DOM，非 jQuery，和硬件加速過渡，讓您感覺到用html5開發(fā)的app也可以飛起來。   Ionic可以說是AngularJS移動端解決方案，Ionic 利用 AngularJS創(chuàng)造出一款適合開發(fā)豐富而強大應用的框架。 Ionic不僅如此優(yōu)秀，而且它的核心架構(gòu)也是為開發(fā)專業(yè)應用創(chuàng)建，和AngularJS完美融合。   Ionic以流行的原生移動開發(fā)SDK為藍本，使開發(fā)過原生iOS或安卓app的任何人都容易理解。開始只需書寫你的代碼，完成時通過PhoneGap發(fā)布。一次開發(fā)，處處運行。   簡潔，簡單，而且實用。 Ionic為所有當前移動設備而設計，并且呈現(xiàn)完美。伴隨眾多流行移動組件，結(jié)構(gòu)，交互規(guī)范，以及華麗的（且可擴展）的主題，你可以更好的定制化APP應用。   ①下載安裝Node JS 版本6.0以上 安裝完成cmd輸入node -v 顯示對應版本即安裝成功 ②安裝ionic和Cordova Cmd 輸入npm install -g ionic cordova 經(jīng)過漫長的等待，會提示安裝成功 ③創(chuàng)建ionic項目 Cmd窗口 cd項目創(chuàng)建的目錄 輸入ionic start project_name [template] template是內(nèi)置的模板類型：blank/sidemenu/tabs/（default）三種 Ionic3常用命令npm install -g cnpm --registry=鏡像源指向淘寶） cnpm install -g cordova ionic（安裝cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看幫助） ionic -v（查看版本） ionic start myionictest blank（空項目） ionic start myionictest tabs（帶導航條） ionic start myionictest sidemenu（帶側(cè)滑菜單） ionic g page login(添加頁面)ionic g provider BaseService(添加服務端口)ionic platform add androidionic platform add android（添加android平臺） ionic platform remove android（移除android平臺） ionic build android（編譯項目apk） ionic emulate android（運行項目apk 手機連接在手機運行模擬器連接在模擬器運行） ionic run android （相當于build + emulate） ionic serve（開啟服務調(diào)試） PS:  WebStorm 2017.02  Android：①JDK1.8 ②Android SDK (API25 具體看項目) Ios：①Xcode ②Developer Program  按照官網(wǎng)命令ionic start創(chuàng)建項目后生成如下結(jié)構(gòu)樹：  hooks：編譯cordova時自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中 node_modules ：node各類依賴包 resources ：android/ios 資源（更換圖標和啟動動畫） src：開發(fā)工作目錄，頁面、樣式、腳本和圖片都放在這個目錄下 www：文靜態(tài)件 platforms：生成android或者ios安裝包路徑（ platformsandroiduildoutputsapk：apk所在位置） plugins：插件文件夾，里面放置各種cordova安裝的插件 config.xml: 配置文件 package.json: node安裝模塊時的依據(jù) tsconfig.json: Type項目的根目錄，指定用來編譯這個項目的根文件和編譯選項 tslint.json：格式化和校驗type src工作目錄：  app：應用根目錄 assets：資源目錄（靜態(tài)文件（圖片，js框架。。。）各種需要放置在此文件夾內(nèi)，不然會出錯，（尷尬。。。） pages：頁面文件，放置編寫的頁面文件，包括：html，scss，ts。（搞事情的） theme：主題文件，里面有一個scss文件，設置主題信息。  Angular4 架構(gòu)詳解 官方架構(gòu)圖：  這個架構(gòu)圖展現(xiàn)了 Angular 應用中的 8 個主要構(gòu)造塊： · 模塊 (module) · 組件 (component) · 模板 (template) · 元數(shù)據(jù) (metadata) · 數(shù)據(jù)綁定 (data binding) · 指令 (directive) · 服務 (service) · 依賴注入 (dependency injection) 接下來我按順序并結(jié)合圖來講解一下。  Angular 或者 ionic 新建的項目，都會存在一個根模塊，默認名是 AppModule。如果你使用了模塊化來創(chuàng)建應用，包括 AppModule，每個都會存在一個 @NgModule 裝飾器的類(雖然他很像 java 中的注解，但是他的官方命名叫裝飾器)。我們新建的頁面，如果不使用懶加載，都要在 @NgModule 中先聲明后使用。 下面舉個例子，簡單介紹一下 @NgModule 中的內(nèi)容  ?imports 本模塊聲明的組件模板需要的類所在的其它模塊 ?providers 服務的創(chuàng)建者，并加入到全局服務列表中，可用于應用任何部分。 ?declarations 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。 ?exports declarations 的子集，可用于其它模塊的組件模板。 ?bootstrap 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置 bootstrap 屬性。 PS：在圖中的意義：看圖左上角，模塊是用來接收一個用來描述模塊屬性元數(shù)據(jù)對象的。  這次我們把這三點一起來講，先看一下這段代碼  Component組件是一個裝飾器，他能接受一個配置對象， Angular 會基于這些信息創(chuàng)建和展示組件及其視圖。 · selector：CSS 選擇器，它告訴 Angular 在父級 HTML 中查找