跨平臺開發之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：https://code.aliyun.com/frontend-app/flutter_app.git
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：https://book.flutterchina.club/chapter1/flutter_intro.html 俱樂部電子書
- 2：https://flutterchina.club 中文俱樂部網站
- 3：https://www.flutter.cn 中文官網
- 4：https://pub.flutter-io.cn/flutter pub中心--類似npm
- 5：https://caijinglong.github.io/json2dart/index_ch.html json轉model工具
更多鏈接
總結
本篇總體來看有些零散，沒有重點，對于一個全新的開發語言Dart和跨平臺UI開發框架Flutter，本文主要是希望能夠幫助了解Flutter是什么，Flutter能做什么，Flutter做出來的東西怎么樣，以及如何快速入門等；
對于Flutter的未來個人比較看好，github star數已經達到了77K，Issues超過了5000，可見開發者活躍程度；
Flutter有優秀的性能，理論上跟原生沒有區別，就目前測試來看，iOS體驗比Android更優秀，幾乎全部達到60fps；
一套代碼多端使用，甚至后期的wap項目，UI層面能夠完全與原生剝離，后期維護成本低，開發效率高，測試效率高；
語言用的是Dart(跟其他面向對象語言差不多，入門很快)，本文沒有介紹，可自行網上查閱；
