Flutter 出來也已經(jīng)有點(diǎn)時日了，相對于RN的跨平臺開發(fā)的方案，筆者更喜歡Flutter的理念碘饼。
搭建個環(huán)境先
（Xcode, Andoird studio等開發(fā)工具可以提前安裝好）
Flutter-Using in China
Flutter中文網(wǎng)
Flutter對國內(nèi)開發(fā)者算友好，鏡像啥的也都考慮到了，配置環(huán)境的流程就不再贅述了但壮，不出問題的話冀泻，參考這兩個網(wǎng)址就足夠了。
由于前段時間重裝過系統(tǒng)蜡饵，電腦只安裝了iOS相關(guān)工具(如CocoaPods)和Android Studio, VS Code等IDE弹渔，還算純凈吧?!。
以下為官網(wǎng)給出的通過git倉庫的方式安裝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倉庫clone失敗
這是官網(wǎng)給出的配置Flutter的方式溯祸，在clone庫的時候肢专，因?yàn)榫W(wǎng)絡(luò)等因素可能會導(dǎo)致多次失敗，這是正辰垢ǎ現(xiàn)象博杖，也可以嘗試借助【科xue】方式。
（帥氣的筆者也多次嘗試后才clone成功筷登，在公司的一個網(wǎng)段下一直失敗剃根，回家后一次成功）
PATH 配置錯誤導(dǎo)致的各種問題
筆者在進(jìn)行到flutter doctor時，報出了不能識別flutter命令的錯誤前方。后發(fā)現(xiàn)筆者的PATH配置有問題狈醉，系統(tǒng)并未正確的找到flutter的路徑，參考官網(wǎng)鏈接中更新環(huán)境變量部分來配置PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
這里要注意镣丑，PATH_TO_FLUTTER_GIT_DIRECTORY 是flutter的路徑舔糖，每個人安裝的位置不同，例如筆者的安裝路徑就在“~/Users/用戶名/”下莺匠。
可筆者設(shè)置好后并未見效金吗，且按照文檔上使用(source $HOME/.bash_profile)的刷新當(dāng)前終端窗口時，又報錯了...所以問題集中到了bash_profile這個文件配置上趣竣。
.bash_profile的配置問題
筆者的電腦重裝過摇庙，配置PATH后始終不成功，且在home目錄下沒有“.bash_profile”遥缕。那就手動創(chuàng)建配置一個:
- 打開終端
- "$ cd ~":跳轉(zhuǎn)到根目錄
- "$ touch .bash_profile":創(chuàng)建.bash_profile文件
- "$ open -e .bash_profile":以編輯的方式打開.bash_profile文件
- 將我們需要的配置添加進(jìn)來:
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的安裝路徑)
- "$ source .bash_profile" 刷新當(dāng)前終端窗口
筆者到這一步系統(tǒng)就能夠調(diào)用flutter相關(guān)命令了卫袒。
一個小插曲:
在這一步出現(xiàn)過，flutter命令無效单匣，且其他命令(如pod)系統(tǒng)全部不能識別夕凝，打印PATH為空! 嚇得我立刻重置PATH。
($ export PATH=/bin:/usr/bin:/usr/local/bin)
重置后户秤，除flutter外的命令都恢復(fù)正常码秉，筆者重復(fù)更新PATH的步驟后恢復(fù)正常，具體原因已無從查證鸡号。
“flutter doctor”命令報出的各種錯誤和警告
運(yùn)行"flutter doctor"命令后转砖，系統(tǒng)會檢測flutter的開發(fā)環(huán)境還缺啥東西。
如圖所示鲸伴，還有很多東西沒配置好府蔗，也給出了具體的命令與方法晋控。分別照著提示做就行:
[iOS] : 照著給出的命令一行一行運(yùn)行(沒安brew的先安裝)
[Android] : 提示Flutter插件沒有安裝，解決方法直接打開Android Studio 在 configure的plugins里面搜索Flutter,搜索出來直接安裝(install)就好姓赤。
[VS Code] : 直接進(jìn)入提示的網(wǎng)址赡译，安裝的時候會自動打開本地的VS Code.
“No devices available”
這個警告不用管它。
表示當(dāng)前的設(shè)備模捂，在開發(fā)過程中捶朵，選擇模擬器或真機(jī)都行蜘矢。筆者在VS Code中選好調(diào)試模擬器后狂男，這個警告就變正常了。
打完收工
在flutter doctor檢測成功后品腹，筆者照著文檔在VS Code中創(chuàng)建了個應(yīng)用岖食，運(yùn)行效果如下:
當(dāng)然也可以使用Android Studio來開發(fā)，看個人愛好舞吭。
其他問題記錄
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模擬器上一直報此錯誤蔑穴。
解決: 因筆者的模擬器是最新的“Andorid9.+”，在將模擬器系統(tǒng)降為9.0正式版后恢復(fù)正常惧浴。
Tips: 在查閱資料的過程中發(fā)現(xiàn)此問題不一定是系統(tǒng)版本引發(fā)存和，其他原因可通過嘗試重啟模擬器和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)試時報出此錯誤導(dǎo)致無法真機(jī)運(yùn)行，提示中讓使用Xcode運(yùn)行調(diào)試柿顶。
解決: 每次都使用Xcode太麻煩茄袖，而我們報錯時，真機(jī)上已經(jīng)安裝好了應(yīng)用嘁锯，此時只需要在iOS設(shè)備的“設(shè)置->通用->設(shè)備管理”中信任我們應(yīng)用的開發(fā)者就可以直接運(yùn)行宪祥，不用使用Xcode.
Tips: 這個問題是因?yàn)樽髡咴赬code中配置BundleID時用的是自己的賬號(未付費(fèi))，權(quán)限操作與企業(yè)證書類似家乘，需要在真機(jī)信任開發(fā)者蝗羊。
