為什么選擇Flutter

在使用Flutter開發(fā)之前，我是一個標(biāo)準(zhǔn)的iOS開發(fā)人員。我至今認(rèn)為蘋果的整個體系，甚至整個技術(shù)框架都是業(yè)內(nèi)最牛逼，最完善的，你甚至挑不出太多毛病。尤其在蘋果發(fā)布Swift并宣布開源后，蘋果的整個技術(shù)生態(tài)體系已到頂峰（Swift甚至可以用來做Web后端的開發(fā)，并且被谷歌人工智能團(tuán)隊所采取作為首選語言）。但是，iOS開發(fā)中也有一些不足之處：

• 在Swift發(fā)布之前，所有的蘋果體系都是采用Objective-C，C，C++作為開發(fā)語言，尤其OC語法繁瑣，開發(fā)效率極低；
• 平臺限制嚴(yán)重，你需要準(zhǔn)備以下必要設(shè)備：Mac電腦，iPhone手機(jī)，Apple開發(fā)者賬號（99美刀），一套組合拳下來大致需要2W人民幣；
• 崗位需求逐年降低，大部分的iOS開發(fā)都轉(zhuǎn)到了后端或者跨平臺開發(fā)。

基于以上原因，我嘗試了學(xué)習(xí)一些跨平臺的技術(shù)，最終確定了Flutter，著實讓人驚艷，以下為我學(xué)習(xí)中最直觀的感受：

• 你甚至可以完全不懂Android和iOS即可進(jìn)行開發(fā)；
• Flutter SDK的分層架構(gòu)清晰，入門簡單，上手快；
• 參考了React的狀態(tài)管理設(shè)計，只用關(guān)注用戶界面和業(yè)務(wù)邏輯，不用花功夫在狀態(tài)維護(hù)上；
• 第三方插件，組件豐富，90%以上的開發(fā)需求都能在Flutter插件&組件市場找到；

舒適區(qū)待的太久，災(zāi)難降臨時，你已無從躲避。作為一個移動開發(fā)人員，你應(yīng)該掌握一項必殺技，對我而言，Flutter是一個不錯的選擇。

本篇解決問題

如果以下問題都知道，可跳過本文檔。

• 對原生開發(fā)，Hybrid了解有多少？
• Flutter不同版本（Stable，Beta，Dev，Master）的特點？
• flutter doctor命令是做什么用的？
• 配置Android Studio還需要額外下載SDK嗎？為什么？
• 如何在Win上配置Flutter和Android環(huán)境變量？

原生開發(fā)、Hybrid、Flutter對比

在Flutter出現(xiàn)之前，App開發(fā)一般就兩種形式：純原生以及混合（Hybrid）開發(fā)。隨著Flutter在2018年發(fā)布第一個預(yù)覽版本后，儼然形成了三分天下的局面。

/ 原生開發(fā) /

原生開發(fā)特指一套代碼跑在單獨的一個操作系統(tǒng)上，比如可以使用Java或者Kotlin開發(fā)Android平臺應(yīng)用，使用Objective-C或者Swift開發(fā)iOS平臺應(yīng)用，目前移動操作系統(tǒng)基本被Android和iOS瓜分。原生開發(fā)的顯著特點就是，可以通過代碼直接使用平臺所提供的SDK（軟件開發(fā)工具包，是一整套功能豐富的API集合），兩個平臺的工具集分為Android SDK與Cocoa Touch。

原生開發(fā)的優(yōu)勢：

• 無障礙訪問平臺所有功能，如藍(lán)牙，錄音，定位，傳感器等；
• 因為直接訪問原生API，所以運行速度快，性能高，可以實現(xiàn)非常復(fù)雜的動畫效果和交互。

原生開發(fā)的缺點：

• 平臺特定，一套代碼只能在一端運行，所以對于企業(yè)而言，開發(fā)及維護(hù)成本相對較高；
• 原生開發(fā)，一旦有功能變動，需要重新打包發(fā)布，動態(tài)下發(fā)能力（熱更新）差。

/ Hybrid /

如今，移動互聯(lián)網(wǎng)逐漸成熟，純原生開發(fā)已經(jīng)很難應(yīng)對各種變態(tài)需求。針對開發(fā)成本，動態(tài)內(nèi)容的問題，衍生了一些基于前端技術(shù)棧的一些跨平臺框架。

• H5 + 原生
• JavaScript開發(fā) + 原生渲染

H5 + 原生的開發(fā)形式，目前是混合開發(fā)的主流。使用原生技術(shù)搭建APP框架，使用H5動態(tài)下發(fā)內(nèi)容。由于H5代碼只需要一次開發(fā)，就能同時在Android和iOS兩個平臺運行，這也可以減小開發(fā)成本。也就是說，H5部分功能越多，開發(fā)成本就越小。我們稱這種H5+原生的開發(fā)模式為混合開發(fā) ，采用混合模式開發(fā)的APP我們稱之為混合應(yīng)用或Hybrid APP ，如果一個應(yīng)用的大多數(shù)功能都是H5實現(xiàn)的話，我們稱其為Web APP 。混合開發(fā)的技術(shù)難點主要是原生和H5之間的交互。一般情況下，我們稱H5與原生交互的方式叫JSBridge。

JavaScript開發(fā) + 原生渲染的開發(fā)方式目前特指Facebook開源的React Native以及阿里開源的Weex。其核心技術(shù)點就是：把DOM樹映射會原生的控件樹。框架會把DOM樹自動的轉(zhuǎn)化為不同平臺的控件樹，其最終還是調(diào)用的原生API來繪制。

混合開發(fā)的優(yōu)點：

• 社區(qū)龐大，開發(fā)成本低；
• 使用前端技術(shù)框架，原生渲染，性能尚可；
• 支持熱更新；（目前iOS端有風(fēng)險，熱更新應(yīng)用禁止上架App Store）。

混合開發(fā)的缺點：

• 因為要和原生通信，難以勝任復(fù)雜的繪制和動畫工作；
• JS為腳本語言，解釋執(zhí)行，性能和原生開發(fā)編譯后運行，有一定差距；
• 調(diào)用系統(tǒng)硬件功能非常麻煩。

/ Flutter /

鑒于Hybrid的一些缺點，谷歌開源了Flutter框架。Flutter是Google發(fā)布的一個用于創(chuàng)建跨平臺、高性能移動應(yīng)用的框架。Flutter使用自繪引擎，使用自身的布局、繪制系統(tǒng)。

Flutter的優(yōu)點：

• 生態(tài)活躍，目前GitHub的Flutter項目Star高達(dá)84.5K;
• 大廠支持；
• 采用Dart語言開發(fā)（后面會講一些Dart的特點，及Flutter中需要知道的Dart知識）；
• 開發(fā)效率高，Flutter同時支持JIT（解釋執(zhí)行，開發(fā)模式下）和AOT（編譯后執(zhí)行，生產(chǎn)環(huán)境）兩種運行模式。

盜用一個表格，三種開發(fā)方式的高下立判：

上表中開發(fā)語言主要指UI的開發(fā)語言。而開發(fā)效率，是指整個開發(fā)周期的效率，包括編碼時間、調(diào)試時間、以及排錯、兼容時間。動態(tài)化主要指是否支持動態(tài)下發(fā)代碼和是否支持熱更新。值得注意的是Flutter的Release包默認(rèn)是使用Dart AOT模式編譯的，所以不支持動態(tài)化，但Dart還有JIT或snapshot運行方式，這些模式都是支持動態(tài)化的。官方文檔中有一張F(tuán)lutter框架圖示，我覺得非常清晰的描述了整個框架的層級：

從上到下依次為：

• Flutter Framework是純Dart語言實現(xiàn)的SDK，是開發(fā)中用到的基礎(chǔ)庫，一般只接觸到此層級，封裝了很多常用的控件和動畫效果（類似于前端的各種元素標(biāo)簽，甚至連布局系統(tǒng)都參考的Flex布局）；
• Flutter Engine是一個純C++實現(xiàn)的SDK，其中包括Skia引擎（二維繪圖引擎，Android底層繪圖引擎也是這玩意兒），Dart運行時，文字排版引擎等；調(diào)用Flutter Framewrok中的控件時，最終會走到Engine層，實現(xiàn)真正的繪制邏輯（該層已經(jīng)是框架底層實現(xiàn)，除非PR，否則接觸不到）

從圖可以看出Flutter框架有良好的分層設(shè)計，實際開發(fā)中只用關(guān)注上層框架，大大節(jié)省開發(fā)時間。該部分只需要對Flutter有個大致認(rèn)識即可。

開發(fā)系統(tǒng)與工具選擇

工欲善其事必先利其器。Flutter同時支持Windows和Mac OS，具體差別如下：

• Windows價格親民，但是無法開發(fā)iOS
• Mac價格較高，能同時開發(fā)iOS和Android

經(jīng)濟(jì)條件允許的情況下推薦使用Mac進(jìn)行開發(fā)。操作系統(tǒng)定下來后，還需要選擇一款開發(fā)工具，這里直接推薦使用Andorid Studio，優(yōu)點如下：

• Android開發(fā)利器；
• Google官方推薦的Flutter開發(fā)IDE；調(diào)試，開發(fā)支持最全。

環(huán)境搭建

由于Flutter會同時構(gòu)建Android和IOS兩個平臺的發(fā)布包，所以Flutter同時依賴Android SDK和iOS SDK，在安裝Flutter時也需要安裝相應(yīng)平臺的構(gòu)建工具和SDK。

/ Win下Flutter開發(fā)環(huán)境配置 /

由于Win下不支持iOS應(yīng)用開發(fā)，所以Win下只需要配置好Android和Flutter的開發(fā)環(huán)境即可：

配置IDE

一共分為兩個步驟：

• 安裝Android Studio（Android Studio國內(nèi)下載鏈接）；
• 為Android Studio安裝Flutter和Dart插件。

首先通過上面鏈接進(jìn)入官網(wǎng)進(jìn)行下載，安裝過程為下一步安裝法，無腦下一步即可：

注意：Android開發(fā)需要配置JDK，但是Android Studio已經(jīng)內(nèi)置了JDK，所以額外安裝JDK是可選的（如果需要安裝，強(qiáng)烈建議安裝JDK8.0，JDK11刪除了一些Jar包，如果全局配置了JAVA_HOME，版本為11的情況下，可能導(dǎo)致Flutter運行出現(xiàn)一些不必要的錯誤）。

安裝Flutter和Dart插件

打開Android Studio，打開File->Settings->Plugins，如下圖所示



安裝完成后，需要重新啟動Android Studio。開發(fā)工具安裝完畢后，需要配置Flutter開發(fā)環(huán)境。
Flutter開發(fā)環(huán)境的配置依賴以下工具：

• Windows Power Shell（win10內(nèi)置，非win10可通過此鏈接進(jìn)行下載）
• git（git for win下載地址）

設(shè)置鏡像

由于國內(nèi)訪問Flutter可能會受到限制，Flutter官方為中國開發(fā)者搭建了臨時鏡像，大家可以將如下環(huán)境變量加入到系統(tǒng)環(huán)境變量中：
PUB_HOSTED_URL=https://pub.flutter-io.cn

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

win下具體配置步驟：右鍵我的電腦->選擇屬性->選擇高級系統(tǒng)設(shè)置->選擇環(huán)境變量，如下圖所示：

1、點擊高級系統(tǒng)設(shè)置

2、點擊環(huán)境變量

3、新建系統(tǒng)變量

4、添加此變量

5、另一個變量也添加上

添加完畢后，記得全部點確定，方可生效。

設(shè)置Android SDK的環(huán)境變量

當(dāng)我們安裝完Android Studio后，Android SDK已經(jīng)隨著AS一起安裝了，可以通過如下步驟查看Android SDK的路徑：打開Android Studio->File->Setting，搜索SDK，點擊后就可查看SDK的安裝路徑，如果沒有也可以重新進(jìn)行安裝，如圖所示：

和設(shè)置鏡像的環(huán)境變量一樣，設(shè)置如下變量到系統(tǒng)變量中：
ANDROID_HOME=${Andorid SDK路徑}

如下圖所示：

另外需要額外添加Andorid SDK模擬器路徑以及工具路徑到Path環(huán)境變量中：

配置完成后，重啟電腦，然后打開cmd，輸入adb，如果打印以下信息，說明Android的環(huán)境變量配置成功：

如果運行出錯，請仔細(xì)核對Android SDK路徑是否配置錯誤。

安裝Flutter，配置Flutter環(huán)境變量

在Win下Flutter下載進(jìn)行Flutter的安裝，本文檔使用的是1.9版本，更低版本不保證能穩(wěn)定運行：

下載完成后，將安裝包zip解壓到你想安裝Flutter SDK的路徑，路徑層級不要過深，也不要放在需要高用戶權(quán)限的路徑下，推薦放在系統(tǒng)盤根目錄下。在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行，接下來，你就可以在Flutter命令行運行flutter命令了。

每次通過啟動文件來啟動非常繁瑣，可以吧flutter命令配置在系統(tǒng)環(huán)境變量Path下，如圖：

配置完成后，重啟電腦，在cmd中輸入flutter，運行如下信息，則flutter環(huán)境變量配置成功：

以上就是Android和Flutter環(huán)境配置的全部內(nèi)容，接下來創(chuàng)建第一個Flutter項目。

通過Android Studio創(chuàng)建第一個Flutter項目

如圖操作即可：




點擊Finish后就創(chuàng)建了第一個Flutter項目。

Flutter不同版本的特點

Flutter SDK有多個分支，如beta、dev、master、stable，其中stable分支為穩(wěn)定分支（日后有新的穩(wěn)定版本發(fā)布后可能也會有新的穩(wěn)定分支，如1.0.0），dev和master為開發(fā)分支，安裝flutter后，你可以運行flutter channel查看所有分支，帶"*"號的分支即你本地的Flutter SDK 跟蹤的分支，要切換分支，可以使用flutter channel beta或flutter channel master，Flutter官方建議跟蹤穩(wěn)定分支，但你也可以跟蹤master分支，這樣可以查看最新的變化，但這樣穩(wěn)定性要低的多。

作者 / Swift

四年軟件開發(fā)經(jīng)驗，熟悉Objective-C/Swift/JavaScript/Java，對iOS開發(fā)有深入研究，目前從事前端和Flutter工作，歡迎QQ交流805433115。

/ 團(tuán)隊介紹 /

我們是一家以信息數(shù)據(jù)研發(fā)和互聯(lián)網(wǎng)應(yīng)用研發(fā)為主的互聯(lián)網(wǎng)公司。我們的核心服務(wù)目標(biāo)，是助力企業(yè)級主體使用互聯(lián)網(wǎng)信息化模式改善企業(yè)效率和互聯(lián)網(wǎng)上云方式企業(yè)全面數(shù)據(jù)化，并在小程序以及PC端應(yīng)用開發(fā)和融媒體運營兩個核心需求上，提供從策劃、運營、開發(fā)、執(zhí)行、反饋全部整體解決方案。

總結(jié)

以上是生活随笔為你收集整理的【2020年APP-Flutter混合开发之路】01 - Flutter的初步思考和开发部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。