<rt id="o2kek"><small id="o2kek"></small></rt>
<acronym id="o2kek"></acronym>

深圳市致宇天承科技有限公司

移動混合開發APP技術

2020-11-11 14:30 來自于 Dreamtizen

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



標簽,創建并插入該組件。 · templateUrl:組件 HTML 模板的模塊相對地址,如果使用 template 來寫的話是用"`"這個符號來直接編寫 HTML 代碼。 · providers:組件所需服務的依賴注入。 template模板就是那段 HTML 代碼,可以用 templateUrl 引入外面的,也可以用 template`` 直接寫。 metadata元數據裝飾器用類似的方式來指導 Angular 的行為。 例如 @Input、@Output、@Injectable 等是一些最常用的裝飾器,用法就不在這里展開了。 PS:在圖中的意義:看圖中間那一塊,模板、元數據和組件共同描繪出這個視圖。  這里一共展示四種數據綁定,看一下示例代碼:  后臺ts:  可能大家對各種括號看的眼花了,總結一下: 1. 雙花括號是單向綁定,傳遞的是值。方向是組件 -> 模板。 2. 方括號是單向綁定,傳遞的是屬性。方向是父組件 -> 子組件。 3. 圓括號是事件綁定,處理點擊等活動(action)。 4. 方括號套圓括號是雙向綁定,方向是組件 <-> 模板。 PS:在圖中的意義:看圖中間那一塊,數據綁定給模板和組件提供數據交互的方式。  嚴格來說組件就是一個指令,但是組件非常獨特,并在 Angular 中位于中心地位,所以在架構概覽中,我們把組件從指令中獨立了出來。我們這里提到的指令有兩種類型:結構型 structural 指令和屬性 attribute 型指令。放一下原文證明一下組件確實算是一個指令: 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. 結構型指令是 ngFor、ngIf 這種的,通過在 DOM 中添加、移除和替換元素來修改布局。 屬性型指令是 ngModel 這種的,用來修改一個現有元素的外觀或行為。 Angular 還有少量指令,它們或者修改結構布局(例如 ngSwitch ), 或者修改 DOM 元素和組件的各個方面(例如 ngStyle 和 ngClass)。 PS:在圖中的意義:看圖右上角那一塊,組件是一個帶模板的指令,只是擴展了一些面向模板的特性。  官方文檔的概念:服務是一個廣義范疇,包括:值、函數,或應用所需的特性。服務沒有什么特別屬于 Angular 的特性。Angular 對于服務也沒有什么定義,它甚至都沒有定義服務的基類,也沒有地方注冊一個服務。 這就像你在 iOS 或者 Android 里單獨建了一個類叫 httpService ,封裝了網絡請求服務一樣,不是具體的什么東西,就是一個概念了解下就行。 PS:在圖中的意義:看圖左下角角那一塊,服務是用來封裝可重用的業務邏輯。  依賴注入是提供類的新實例的一種方式,還負責處理類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新組件以及組件所需的服務。 比如我們要給某組件導入 ContactServiceProvider這個服務,看這段代碼:  這個constructor就是構造函數,依賴注入在 constructor 中進行。你也許會覺得前面寫上 private、public 之類的很怪,這是 Type 語法比較特殊,習慣就好。 當 Angular 創建組件時,會首先為組件所需的服務請求一個注入器 injector。我們必須先用注入器 injector 為 ContactServiceProvider注冊一個提供商 provider。 看一下下面的代碼,                          
免费毛片a在线观看67194,性欧美videofree高清潮喷,ai换脸 女明星 福利网站,欧美变态videossex