前言
Flutter是Google推出的跨平臺App開發SDK,通過自己實現高性能引擎相較於RN和Weex的JS橋接方案有本質的性能優勢,具體原理對比可以閱讀此文移動端跨平臺開發的深度解析進一步瞭解。
筆者作爲一名iOS開發者對Flutter的高性能跨平臺方案有着濃厚的興趣,作爲學習目的,打算通過實現一些簡單的Demo的形式來分享自己學習的過程,希望同大家共同交流學習,共同進步。
Flutter爲什麼選擇Dart語言
兩個最主要的原因就是Dart有2個重要的特徵:JIT和AOT, 基於JIT的開發模式支持Hot Reload(熱加載),加速開發週期;AOT的編譯器可以生成更加高效的ARM代碼,可以快速啓動並擁有可預測的生產部署性能。Learn More
開發環境
- 機器:macbookPro macOS v10.14
- Flutter SDK: flutter_macos_v0.9.4-beta
- IDE: VSCode (Xcode Version 10.0)
- 測試平臺:iOS
開發環境配置
Flutter下載
點擊下載sdk flutter_macos_v0.9.4-beta.zip ,其他版本 點我前往
打開命令行,解壓sdk到指定路徑, 例如個人用戶目錄下自己創建的Flutter文件夾,也可以手動解壓
cd ~/Flutter
unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip
環境變量配置
在用戶根目錄下打開或者新建 .bash_profile 文件,添加以下配置:
# Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Flutter/flutter/bin:$PATH
其中前2行是專爲中國開發者配置的代理,第3行爲添加Flutter到PATH。要求爲存放'Flutter/bin'的路徑,筆者的路徑爲'~/Flutter/flutter/bin'
執行以下命令使.bash_profile的修改生效
source $HOME/.bash_profile
打印path,驗證flutter/bin是否在其中
echo $PATH
執行安裝Flutter依賴
flutter doctor
不出意外,到此爲止Flutter安裝成功。
注意: 如果你使用的是zsh,終端啓動時 ~/.bash_profile 將不會被加載,解決辦法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile
VSCode安裝配置
下載最新版VSCode
點擊去官網下載 解壓後拖到應用程序目錄即可直接運行VSCode
安裝Flutter插件
選擇Extensions,輸入Flutter 點擊Install安裝,安裝後需要點擊Reload方可加載插件,如下圖
驗證Flutter
依次點擊VSCode菜單欄 View->Command palette
然後輸入'doctor'選擇 'Flutter: Run Flutter Doctor'命令執行
創建第一個Flutter APP
命令行執行命令打開iOS模擬器
open -a Simulator
依次點擊VSCode菜單欄 View->Command palette
然後輸入'Flutter', 選擇'Flutter: New Project' 命令執行,然後輸入工程名字 'myapp' (工程名只能小寫)創建第一個Flutter APP
點擊Debug->Star Debugging 或者F5快捷鍵運行APP, (首次運行會提示選擇環境,選擇Dart&Flutter)
VSCode會自動編譯並運行到模擬器,如圖:
這是默認工程的APP, 顯示一行提示文案,按鈕點擊次數以及一個+按鈕,點擊按鈕後次數顯示數字將不斷增加。
Hot Reload
Flutter 提供熱加載功能,在Debugging狀態下編輯修改代碼直接保存後,便可以加載相應的修改,而並不需要重啓調試,大大提升開發速度。
注意:Debug模式下,啓用Dart的JIT模式,故支持Hot Reload;而Release模式下,啓用的是Dart的AOT模式,此模式會做一些優化故不支持Hot Reload。
修改lib/main.dart第93行提示文案爲:
'You have clicked the button this many times:',
然後保存,app上的文案就會直接更新,而不需要重新編譯運行。