Flutter 出來(lái)也已經(jīng)有點(diǎn)時(shí)日了，相對(duì)于RN的跨平臺(tái)開(kāi)發(fā)的方案，筆者更喜歡Flutter的理念。

搭建個(gè)環(huán)境先
（Xcode, Andoird studio等開(kāi)發(fā)工具可以提前安裝好）

Flutter-Using in China
Flutter中文網(wǎng)

Flutter對(duì)國(guó)內(nèi)開(kāi)發(fā)者算友好，鏡像啥的也都考慮到了，配置環(huán)境的流程就不再贅述了，不出問(wèn)題的話，參考這兩個(gè)網(wǎng)址就足夠了。

由于前段時(shí)間重裝過(guò)系統(tǒng)，電腦只安裝了iOS相關(guān)工具(如CocoaPods)和Android Studio, VS Code等IDE，還算純凈吧?!。

以下為官網(wǎng)給出的通過(guò)git倉(cāng)庫(kù)的方式安裝Flutter的方式:

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

以下為填坑記錄

git倉(cāng)庫(kù)clone失敗

這是官網(wǎng)給出的配置Flutter的方式，在clone庫(kù)的時(shí)候，因?yàn)榫W(wǎng)絡(luò)等因素可能會(huì)導(dǎo)致多次失敗，這是正常現(xiàn)象，也可以嘗試借助【科xue】方式。
（帥氣的筆者也多次嘗試后才clone成功，在公司的一個(gè)網(wǎng)段下一直失敗，回家后一次成功）

PATH 配置錯(cuò)誤導(dǎo)致的各種問(wèn)題

筆者在進(jìn)行到flutter doctor時(shí)，報(bào)出了不能識(shí)別flutter命令的錯(cuò)誤。后發(fā)現(xiàn)筆者的PATH配置有問(wèn)題，系統(tǒng)并未正確的找到flutter的路徑，參考官網(wǎng)鏈接中更新環(huán)境變量部分來(lái)配置PATH

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

這里要注意，PATH_TO_FLUTTER_GIT_DIRECTORY 是flutter的路徑，每個(gè)人安裝的位置不同，例如筆者的安裝路徑就在“~/Users/用戶名/”下。
可筆者設(shè)置好后并未見(jiàn)效，且按照文檔上使用(source $HOME/.bash_profile)的刷新當(dāng)前終端窗口時(shí)，又報(bào)錯(cuò)了...所以問(wèn)題集中到了bash_profile這個(gè)文件配置上。

.bash_profile的配置問(wèn)題

筆者的電腦重裝過(guò)，配置PATH后始終不成功，且在home目錄下沒(méi)有“.bash_profile”。那就手動(dòng)創(chuàng)建配置一個(gè):

1. 打開(kāi)終端
2. "$ cd ~":跳轉(zhuǎn)到根目錄
3. "$ touch .bash_profile":創(chuàng)建.bash_profile文件
4. "$ open -e .bash_profile":以編輯的方式打開(kāi).bash_profile文件
5. 將我們需要的配置添加進(jìn)來(lái):

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

(再次注意: PATH_TO_FLUTTER_GIT_DIRECTORY是flutter的安裝路徑)

6. "$ source .bash_profile" 刷新當(dāng)前終端窗口

筆者到這一步系統(tǒng)就能夠調(diào)用flutter相關(guān)命令了。

一個(gè)小插曲:
在這一步出現(xiàn)過(guò)，flutter命令無(wú)效，且其他命令(如pod)系統(tǒng)全部不能識(shí)別，打印PATH為空! 嚇得我立刻重置PATH。
($ export PATH=/bin:/usr/bin:/usr/local/bin)
重置后，除flutter外的命令都恢復(fù)正常，筆者重復(fù)更新PATH的步驟后恢復(fù)正常，具體原因已無(wú)從查證。

“flutter doctor”命令報(bào)出的各種錯(cuò)誤和警告

運(yùn)行"flutter doctor"命令后，系統(tǒng)會(huì)檢測(cè)flutter的開(kāi)發(fā)環(huán)境還缺啥東西。

flutter doctor 檢測(cè)

如圖所示，還有很多東西沒(méi)配置好，也給出了具體的命令與方法。分別照著提示做就行:

[iOS] : 照著給出的命令一行一行運(yùn)行(沒(méi)安brew的先安裝)

[Android] : 提示Flutter插件沒(méi)有安裝，解決方法直接打開(kāi)Android Studio 在 configure的plugins里面搜索Flutter,搜索出來(lái)直接安裝(install)就好。

[VS Code] : 直接進(jìn)入提示的網(wǎng)址，安裝的時(shí)候會(huì)自動(dòng)打開(kāi)本地的VS Code.

“No devices available”

這個(gè)警告不用管它。
表示當(dāng)前的設(shè)備，在開(kāi)發(fā)過(guò)程中，選擇模擬器或真機(jī)都行。筆者在VS Code中選好調(diào)試模擬器后，這個(gè)警告就變正常了。

打完收工

在flutter doctor檢測(cè)成功后，筆者照著文檔在VS Code中創(chuàng)建了個(gè)應(yīng)用，運(yùn)行效果如下:

效果圖

當(dāng)然也可以使用Android Studio來(lái)開(kāi)發(fā)，看個(gè)人愛(ài)好。

其他問(wèn)題記錄

1）Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = XXXXXXXXXX”

描述: 在iOS模擬器、iOS真機(jī)、Andorid真機(jī)均可正常運(yùn)行，但在Android模擬器上一直報(bào)此錯(cuò)誤。
解決: 因筆者的模擬器是最新的“Andorid9.+”，在將模擬器系統(tǒng)降為9.0正式版后恢復(fù)正常。
Tips: 在查閱資料的過(guò)程中發(fā)現(xiàn)此問(wèn)題不一定是系統(tǒng)版本引發(fā)，其他原因可通過(guò)嘗試重啟模擬器和IDE，關(guān)閉網(wǎng)絡(luò)代理、關(guān)閉wifi調(diào)試等方式修復(fù)。

2）Could not install build/ios/iphoneos/Runner.app on xxxxxxxxxxxxxxx.Try launching Xcode and selecting "Product > Run" to fix the problem:open ios/Runner.xcworkspace

描述: 在iOS真機(jī)調(diào)試時(shí)報(bào)出此錯(cuò)誤導(dǎo)致無(wú)法真機(jī)運(yùn)行，提示中讓使用Xcode運(yùn)行調(diào)試。
解決: 每次都使用Xcode太麻煩，而我們報(bào)錯(cuò)時(shí)，真機(jī)上已經(jīng)安裝好了應(yīng)用，此時(shí)只需要在iOS設(shè)備的“設(shè)置->通用->設(shè)備管理”中信任我們應(yīng)用的開(kāi)發(fā)者就可以直接運(yùn)行，不用使用Xcode.
Tips: 這個(gè)問(wèn)題是因?yàn)樽髡咴赬code中配置BundleID時(shí)用的是自己的賬號(hào)(未付費(fèi))，權(quán)限操作與企業(yè)證書類似，需要在真機(jī)信任開(kāi)發(fā)者。