跨平臺開發之Flutter
主要內容：
- 跨平臺框架對比
- Flutter介紹
- Flutter快速入門嚮導
- 必備外掛介紹
- 仿牛牛搭首頁Demo
- Demo開發遇到的問題
- 效能
- 文件資源
- 總結
跨平臺框架對比
H5+原生（Cordova、Ionic、微信小程式-目前是）
--混合(hybrid)開發，UI和業務邏輯都基於JavaScript 原理：WebView載入H5；Native提供功能介面(業務功能，硬體訪問...)；JSBridge通訊-JsBridge原理
JS+原生渲染（React Native、Weex、快應用）
--以RN為例 UI基於原生，業務邏輯基於JavaScript 原理：1：RN將虛擬DOM通過JsBridge對映為原生控制元件；2：原生控制元件渲染UI
自繪UI+原生(QT for mobile、Flutter)
框架自帶渲染引擎繪製UI，不依賴原生控制元件
RN 和 Flutter 架構對比圖--來自網路
Flutter介紹
這裡介紹更詳細，直接貼連結 【原文地址】
Flutter快速入門嚮導
1、安裝和環境配置參考 【官方文件】
2、擁有其他平臺開發經驗快速指南---入門建議可以優先看這裡
給 React Native 開發者的 Flutter 指南
3、編寫第一個Flutter應用參考 【官方文件】
必備外掛介紹
官方維護外掛 【點選這裡】
1、介面請求:dio
2、json解析:json_serializable dart不支援反射，所以就沒有類似java中的fastjson，jackjson，Gson等解析庫。json_serializable 使用步驟如下：
step-1:根目錄pubspec.yaml 新增一下依賴
dependencies:
json_annotation: ^3.2.2
dev_dependencies:
json_serializable: ^3.2.2
build_runner: ^1.7.1
複製程式碼step-2：編寫程式碼 資料模型model，這裡提供一個工具json轉model工具
step-3：根目錄命令輸入 生成 xxx.g.dart 檔案
flutter pub run build_runner build 一次性生成 或者
flutter pub run build_runner watch 持續性生成程式碼，後臺監聽
3、本地資料儲存：shared_preferences，對應Android的SharedPreferences，iOS的Userdefault
4、Android iOS 本地檔案訪問 path_provider
5、url scheme自定義url，路由導航:url_launcher
6、webview提供訪問h5能力 flutter_webview_plugin
7、微信分享能力：fluwx
仿牛牛搭首頁Demo
原始碼地址：阿里雲Code
SSH：git@code.aliyun.com:frontend-app/flutter_app.git
HTTPS：code.aliyun.com/frontend-ap…
Demo目前功能包含：仍然在不斷完善，介面地址test
- 1：介面請求封裝(登入+列表) dio
- 2：json解析方案 json_serializable
- 3：本地資料儲存 shared_preferences
- 4：頁面跳轉
- 5：頁面狀態：載入中，載入成功，載入出錯(點選重試)，列表空資料(TODO)
- 6：列表下拉重新整理
- 7：拍照和錄影 image_picker
- 8：本地資源管理
麻雀雖小，五臟俱全!
Demo開發遇到的問題
- 刪除檔案或者重新命名檔案 報錯
.dart were declared as an inputs, but did not exist. Check the definition of target:kernel_snapshot for errors
複製程式碼解決方法：刪除根目錄的 .dart_tool 資料夾
不行就：刪除 /Users/ybk/Library/Flutter/flutter/bin/cache/lockfile 檔案
- flutter pub run build_runner watch 執行報錯
Found 2 declared outputs which already exist on disk. This is likely because the`.dart_tool/build` folder was deleted, or you are submitting generated files to your source repository.
[SEVERE] Conflicting outputs were detected and the build is unable to prompt for permission to remove them. These outputs must be removed manually or the build can be run with `--delete-conflicting-outputs`. The outputs are: lib/module/login/model/login_res.g.dart
lib/http/model/base_res.g.dart
複製程式碼解決方法：刪除 所有 ***.g.dart 檔案，重新執行命令 flutter pub run build_runner watch
效能
3中模式：
debug：除錯模式，熱過載，包體積很大--debug模式下app比較卡屬於正常
profile：分析模式--效能分析
release：生產模式--釋出
基本上能夠達到60fps，iOS：絲滑般的體驗； Android：偶爾會掉幀，不如iOS順暢；
以下為iOS 和 Android 手機上快速滑動大圖列表的效能對比
效能對比圖
demo下載-僅提供Android，iOS體驗需要現場打包或者拿公司測試機
仿牛牛搭demo--開啟應用-點選左上角-手機號登入-不用輸入直接點選登入-返回到首頁
提供一些90%以上程式碼用flutter開發的應用：應用市場自行搜尋
化纖幫app(大刀現在公司開發的產品，沒有Native開發參與)
TODO 更多的案例
文件資源
- 1：book.flutterchina.club/chapter1/fl… 俱樂部電子書
- 2：flutterchina.club 中文俱樂部網站
- 3：www.flutter.cn 中文官網
- 4：pub.flutter-io.cn/flutter pub中心--類似npm
- 5：caijinglong.github.io/json2dart/i… json轉model工具
更多連結
總結
本篇總體來看有些零散，沒有重點，對於一個全新的開發語言Dart和跨平臺UI開發框架Flutter，本文主要是希望能夠幫助瞭解Flutter是什麼，Flutter能做什麼，Flutter做出來的東西怎麼樣，以及如何快速入門等； 對於Flutter的未來個人比較看好，github star數已經達到了77K，Issues超過了5000，可見開發者活躍程度； Flutter有優秀的效能，理論上跟原生沒有區別，就目前測試來看，iOS體驗比Android更優秀，幾乎全部達到60fps； 一套程式碼多端使用，甚至後期的wap專案，UI層面能夠完全與原生剝離，後期維護成本低，開發效率高，測試效率高； 語言用的是Dart(跟其他面嚮物件語言差不多，入門很快)，本文沒有介紹，可自行網上查閱；