:移動開發(fā)簡介

一、什么是原生開發(fā)：

原生應(yīng)用程序是指某一個移動平臺（比如iOS或安卓）所特有的應(yīng)用，使用相應(yīng)平臺支持的開發(fā)工具和語言，并直接調(diào)用系統(tǒng)提供的SDK API。

如：

Android：使用Java或Kotlin語言調(diào)用系統(tǒng)提供的SDK API

iOS：通過Objective-C或Swift語言直接調(diào)用iOS SDK開發(fā)的應(yīng)用程序

二、原生與H5相比較的優(yōu)勢和劣勢

優(yōu)勢：

1.可訪問平臺全部功能（GPS、攝像頭）；

2.速度快、性能高、可以實現(xiàn)復(fù)雜動畫及繪制，整體用戶體驗好；

動畫體驗：IOS >?Android? >? H5

劣勢：

3.內(nèi)容固定，動態(tài)化弱，大多數(shù)情況下，有新功能更新時只能發(fā)版；

4.開發(fā)成本高；不同平臺必須維護(hù)不同代碼

三、原生與H5相結(jié)合的產(chǎn)物：Hybrid

Hybrid框架主要原理就是將APP的一部分需要動態(tài)變動的內(nèi)容通過H5來實現(xiàn)，通過原生的網(wǎng)頁加載控件WebView (Android)或WKWebView（iOS）來加載，H5部分是可以隨時改變而不用發(fā)版，滿足動態(tài)化需求?；旌峡蚣芤话愣紩谠a中預(yù)先實現(xiàn)一些訪問系統(tǒng)能力的API， 然后暴露給WebView以供JavaScript調(diào)用，這樣一來，WebView就成為了JavaScript與原生API之間通信的橋梁，主要負(fù)責(zé)JavaScript與原生之間傳遞調(diào)用消息，而消息的傳遞必須遵守一個標(biāo)準(zhǔn)的協(xié)議，它規(guī)定了消息的格式與含義，我們把依賴于WebView的用于在JavaScript與原生之間通信并實現(xiàn)了某種消息傳輸協(xié)議的工具稱之為WebView JavaScript Bridge, 簡稱?JsBridge，它也是混合開發(fā)框架的核心。

例子：Js調(diào)用Native需要對WebView設(shè)置@JavascriptInterface注解

Hybrid分類：

Hybrid-web：一次編碼，到處運(yùn)行

Cordova:? ?老牌框架Cordova，也是一個比較重的框架,? 它的性能瓶頸就是在于webview的性能，如果像Android 4.1以下的webview性能并不是很好。

Ionic：Ionic的UI比Cordova要好的多的，很控件都封裝好了用起來非常方便。但I(xiàn)onic最后打包還是用的Cordova打包的，其基于angularjs，之前處于一個不穩(wěn)定的狀態(tài)，更新?lián)Q代的兼容問題

Hybrid-Native:?

react-native 所有的標(biāo)簽都不是真實控件，JS代碼中所寫控件的作用，類似 Map 中的 key 值。JS端通過這個 key 組合的 Dom ，最后Native端會解析這個 Dom ，得到對應(yīng)的Native控件渲染，如 Android 中標(biāo)簽對應(yīng)ViewGroup 控件（react和react-native兩者主要的區(qū)別React中虛擬DOM最終會映射為瀏覽器DOM樹，而RN中虛擬DOM會通過 JavaScriptCore 映射為原生控件樹。）

缺點：

官方說得很隱晦：learn once, write anywhere。人家可沒說run anywhere。目前很多ui組件只有ios的實現(xiàn)，android的需要自己實現(xiàn)。如SliderIOS，SwitchIOS..等等這些控件，也就是很可能針對不同的平臺會需要寫多套代碼。

小程序派&快應(yīng)用：Taro、WePY 、uni-app 、 mpvue 、 chameleon

以上解決方案的缺點：

1.渲染時需要JavaScript和原生之間通信，在有些場景如拖動可能會因為通信頻繁導(dǎo)致卡頓。

2.JavaScript為腳本語言，執(zhí)行時需要JIT(Just In Time)，執(zhí)行效率和AOT(Ahead Of Time)代碼仍有差距。

注：目前，程序主要有兩種運(yùn)行方式：靜態(tài)編譯與動態(tài)解釋。靜態(tài)編譯的程序在執(zhí)行前全部被翻譯為機(jī)器碼，通常將這種類型稱為AOT?（Ahead of time）即 “提前編譯”；而解釋執(zhí)行的則是一句一句邊翻譯邊運(yùn)行，通常將這種類型稱為JIT（Just-in-time）即“即時編譯”。AOT程序的典型代表是用C/C++開發(fā)的應(yīng)用，它們必須在執(zhí)行前編譯成機(jī)器碼，而JIT的代表則非常多，如JavaScript、python等

3.由于渲染依賴原生控件，不同平臺的控件需要單獨維護(hù)，并且當(dāng)系統(tǒng)更新時，社區(qū)控件可能會滯后；除此之外，其控件系統(tǒng)也會受到原生UI系統(tǒng)限制

主角flutter：自繪UI+原生

Flutter是Google發(fā)布的一個用于創(chuàng)建跨平臺、高性能移動應(yīng)用的框架。Flutter沒有使用原生控件，相反都實現(xiàn)了一個自繪引擎，使用自身的布局、繪制系統(tǒng)。

優(yōu)勢：

1.跨平臺自繪引擎

1.1 Flutter與用于構(gòu)建移動應(yīng)用程序的其它大多數(shù)框架不同，因為Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。 相反，F(xiàn)lutter使用自己的高性能渲染引擎來繪制widget。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對原生控件依賴而帶來的限制及高昂的維護(hù)成本。

1.2 Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函數(shù)庫，包含字型、坐標(biāo)轉(zhuǎn)換，以及點陣圖都有高效能且簡潔的表現(xiàn)，Skia是跨平臺的，并提供了非常友好的API，目前Google Chrome瀏覽器和Android均采用Skia作為其繪圖引擎。

2.高性能

2.1 首先，F(xiàn)lutter APP采用Dart語言開發(fā)。Dart在 JIT（即時編譯）模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當(dāng)以 AOT模式運(yùn)行時，JavaScript便遠(yuǎn)遠(yuǎn)追不上了。速度的提升對高幀率下的視圖數(shù)據(jù)計算很有幫助

2.2?其次，F(xiàn)lutter使用自己的渲染引擎來繪制UI，布局?jǐn)?shù)據(jù)等由Dart語言直接控制，所以在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，這在一些滑動和拖動的場景下具有明顯優(yōu)勢，因為在滑動和拖動過程往往都會引起布局發(fā)生變化，所以JavaScript需要和Native之間不停的同步布局信息

注：

底下兩層（Foundation和Animation、Painting、Gestures）在Google的一些視頻中被合并為一個dart UI層，對應(yīng)的是Flutter中的dart:ui包，它是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪制能力。

Rendering層，這一層是一個抽象的布局層，它依賴于dart UI層，Rendering層會構(gòu)建一個UI樹，當(dāng)UI樹有變化時，會計算出有變化的部分，然后更新UI樹，最終將UI樹繪制到屏幕上，這個過程類似于React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分，它除了確定每個UI元素的位置、大小之外還要進(jìn)行坐標(biāo)變換、繪制(調(diào)用底層dart:ui)。

Widgets層是Flutter提供的的一套基礎(chǔ)組件庫，在基礎(chǔ)組件庫之上，F(xiàn)lutter還提供了 Material 和Cupertino兩種視覺風(fēng)格的組件庫。而我們Flutter開發(fā)的大多數(shù)場景，只是和這兩層打交道。

三、搭建Flutter開發(fā)環(huán)境

1.系統(tǒng)要求：

1.1操作系統(tǒng): macOS (64-bit)

1.2.磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.

1.3.工具: Flutter 依賴下面這些命令行工具：bash、mkdir、rm、git、curl、unzip、which

2.獲取Flutter SDK

注意：

1.去flutter官網(wǎng)下載其最新可用的安裝包，官網(wǎng)地址：https://flutter.io/sdk-archive/#macos

2.解壓安裝包到你想安裝的目錄

3.打開.bash_profile文件：

open -e .bash_profile

//由于在國內(nèi)訪問Flutter可能會受到限制，F(xiàn)lutter官方為中國開發(fā)者搭建了臨時鏡像exportPUB_HOSTED_URL=https://pub.flutter-io.cn

exportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

exportPATH=${PATH}:/Users/liangshuo/development/flutter/bin:$PATH

source .bash_profile

終端直接輸入 flutter，沒有提示該命令找不到，則配置成功

運(yùn)行flutter doctor：在Flutter命令行運(yùn)行如下命令來查看是否還需要安裝其它依賴，如果需要，安裝它們：

準(zhǔn)備工作：

Xcode

1.安裝Xcode 9.0或更新版本??蘋果應(yīng)用商店

2.配置Xcode命令行工具以使用新安裝的Xcode版本

3.確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令sudo xcodebuild -license同意過了

Cocoapods: IOS的包管理工具? ? ?坑套著坑，各種版本兼容性問題

坑1:??最新的pod版本和ruby的版本兼容性有問題, 所以必須先升級ruby, 才能升級pod成功

坑2：ruby升級不上去，查詢地址：githubusercontent.com?的IP地址， sudo vim /etc/hosts

坑3：rvm ===> \curl -sSL https://get.rvm.io | bash -s stable? ?類似于NVM的版本管理工具

。。。。。。

os x 10.11或以上:?sudo gem install -n /usr/local/bin cocoapods

安裝成功如下圖：

四、Dart語言簡介

Dart的設(shè)計目標(biāo)應(yīng)該是同時借鑒了Java和JavaScript。Dart在靜態(tài)語法方面和Java非常相似，如類型定義、函數(shù)聲明、泛型等，而在動態(tài)特性方面又和JavaScript很像，如函數(shù)式特性、異步支持等。除了融合Java和JavaScript語言之所長之外，Dart也具有一些其它具有表現(xiàn)力的語法，如可選命名參數(shù)、..（級聯(lián)運(yùn)算符）和?.（條件成員訪問運(yùn)算符）以及??（判空賦值運(yùn)算符）。其實，對編程語言了解比較多的讀者會發(fā)現(xiàn)，在Dart中其實看到的不僅有Java和JavaScript的影子，它還具有其它編程語言中的身影，如命名參數(shù)在Objective-C和Swift中早就很普遍，而??操作符在PHP 7.0語法中就已經(jīng)存在了，因此我們可以看到Google對Dart語言給予厚望，是想把Dart打造成一門集百家之所長的編程語言。

1.變量聲明:? var（不可變類型）,? ?dynamic和Object（基類，可變）,?final和const（常量）

2.函數(shù)：Dart是一種真正的面向?qū)ο蟮恼Z言，所以即使是函數(shù)也是對象，并且有一個類型Function。這意味著函數(shù)可以賦值給變量或作為參數(shù)傳遞給其他函數(shù)，這是函數(shù)式編程的典型特征。

3.異步支持?Future（類似promise：Future.then，F(xiàn)uture.catchError，F(xiàn)uture.whenComplete，F(xiàn)uture.wait），Async/await，Stream（可以接收多個異步操作的結(jié)果：常用于會多次讀取數(shù)據(jù)的異步任務(wù)場景，如網(wǎng)絡(luò)內(nèi)容下載、文件讀寫）

VSCODE

1.安裝插件

Dart和Flutter

2.創(chuàng)建flutter項目

flutter create my_app

3.鏈接IOS模擬器

open -a Simulator

4.運(yùn)行?flutter run啟動flutter應(yīng)用程序。

flutter run

my_app

1.示例代碼講解

在Flutter中幾乎所有的對象都是一個Widget，不僅可以表示UI元素，也可以表示一些功能性的組件如：用于手勢檢測的?GestureDetector?widget、用于APP主題數(shù)據(jù)傳遞的Theme等等，而原生開發(fā)中的控件通常只是指UI元素。

2.路由

3.包管理

4.資源管理

5.調(diào)試

print、debugPrint、flutter logs