跨平臺開發(fā)之Flutter
主要內(nèi)容：
- 跨平臺框架對比
- Flutter介紹
- Flutter快速入門向?qū)?/li>
- 必備插件介紹
- 仿牛牛搭首頁Demo
- Demo開發(fā)遇到的問題
- 性能
- 文檔資源
- 總結(jié)
跨平臺框架對比
H5+原生（Cordova、Ionic、微信小程序-目前是）
--混合(hybrid)開發(fā)，UI和業(yè)務(wù)邏輯都基于JavaScript
原理：WebView加載H5；Native提供功能接口(業(yè)務(wù)功能，硬件訪問...)；JSBridge通信-JsBridge原理
JS+原生渲染（React Native、Weex、快應(yīng)用）
--以RN為例
UI基于原生，業(yè)務(wù)邏輯基于JavaScript
原理：1：RN將虛擬DOM通過JsBridge映射為原生控件；2：原生控件渲染UI
自繪UI+原生(QT for mobile、Flutter)
框架自帶渲染引擎繪制UI，不依賴原生控件
RN 和 Flutter 架構(gòu)對比圖--來自網(wǎng)絡(luò)
Flutter介紹
這里介紹更詳細(xì)，直接貼鏈接 【原文地址】
Flutter快速入門向?qū)?/h3>
1、安裝和環(huán)境配置參考 【官方文檔】
2、擁有其他平臺開發(fā)經(jīng)驗快速指南---入門建議可以優(yōu)先看這里
給 React Native 開發(fā)者的 Flutter 指南
3、編寫第一個Flutter應(yīng)用參考 【官方文檔】
必備插件介紹
官方維護插件 【點擊這里】
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：編寫代碼 數(shù)據(jù)模型model，這里提供一個工具json轉(zhuǎn)model工具
step-3：根目錄命令輸入 生成 xxx.g.dart 文件
flutter pub run build_runner build 一次性生成 或者
flutter pub run build_runner watch 持續(xù)性生成代碼，后臺監(jiān)聽
3、本地數(shù)據(jù)存儲：shared_preferences，對應(yīng)Android的SharedPreferences，iOS的Userdefault
4、Android iOS 本地文件訪問 path_provider
5、url scheme自定義url，路由導(dǎo)航: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：本地數(shù)據(jù)存儲 shared_preferences
- 4：頁面跳轉(zhuǎn)
- 5：頁面狀態(tài)：加載中，加載成功，加載出錯(點擊重試)，列表空數(shù)據(jù)(TODO)
- 6：列表下拉刷新
- 7：拍照和錄像 image_picker
- 8：本地資源管理
麻雀雖小，五臟俱全!
Demo開發(fā)遇到的問題
- 刪除文件或者重命名文件 報錯
.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 執(zhí)行報錯
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 文件，重新執(zhí)行命令 flutter pub run build_runner watch
性能
3中模式：
debug：調(diào)試模式，熱重載，包體積很大--debug模式下app比較卡屬于正常
profile：分析模式--性能分析
release：生產(chǎn)模式--發(fā)布
基本上能夠達(dá)到60fps，iOS：絲滑般的體驗； Android：偶爾會掉幀，不如iOS順暢；
以下為iOS 和 Android 手機上快速滑動大圖列表的性能對比
性能對比圖
demo下載-僅提供Android，iOS體驗需要現(xiàn)場打包或者拿公司測試機
仿牛牛搭demo--打開應(yīng)用-點擊左上角-手機號登錄-不用輸入直接點擊登錄-返回到首頁
提供一些90%以上代碼用flutter開發(fā)的應(yīng)用：應(yīng)用市場自行搜索
化纖幫app(大刀現(xiàn)在公司開發(fā)的產(chǎn)品，沒有Native開發(fā)參與)
TODO 更多的案例
文檔資源
- 1：https://book.flutterchina.club/chapter1/flutter_intro.html 俱樂部電子書
- 2：https://flutterchina.club 中文俱樂部網(wǎng)站
- 3：https://www.flutter.cn 中文官網(wǎng)
- 4：https://pub.flutter-io.cn/flutter pub中心--類似npm
- 5：https://caijinglong.github.io/json2dart/index_ch.html json轉(zhuǎn)model工具
更多鏈接
總結(jié)
本篇總體來看有些零散，沒有重點，對于一個全新的開發(fā)語言Dart和跨平臺UI開發(fā)框架Flutter，本文主要是希望能夠幫助了解Flutter是什么，F(xiàn)lutter能做什么，F(xiàn)lutter做出來的東西怎么樣，以及如何快速入門等；
對于Flutter的未來個人比較看好，github star數(shù)已經(jīng)達(dá)到了77K，Issues超過了5000，可見開發(fā)者活躍程度；
Flutter有優(yōu)秀的性能，理論上跟原生沒有區(qū)別，就目前測試來看，iOS體驗比Android更優(yōu)秀，幾乎全部達(dá)到60fps；
一套代碼多端使用，甚至后期的wap項目，UI層面能夠完全與原生剝離，后期維護成本低，開發(fā)效率高，測試效率高；
語言用的是Dart(跟其他面向?qū)ο笳Z言差不多，入門很快)，本文沒有介紹，可自行網(wǎng)上查閱；
