前面做了C#版本的JsonToDart,支援Windows和Web。很多小夥伴問怎麼沒有Mac版本的,其實在做C#版本的時候就考慮過用Flutter來下實現flutter-desktop 和flutter-web,但是考慮到自己熟悉的技術以及flutter-desktop和flutter-web現在只是個小白鼠階段就沒有優先考慮。在完成C#版本之後,花了些時間轉換成了Dart版本,進而開啟了flutter-desktop和flutter-web的填坑之路。。
入坑相關東東
其實最近發現很多大佬都入坑了, flutter-desktop 和flutter-web,之前光是看大佬們說,自己沒動手做做。
我是mac小白,完全不懂配置,所以看了入坑指南低調大佬,從配置環境到放棄,Flutter Desktop Mac版 和Flutter Web 評測,這是低調大佬寫的攻略,只要按照步驟走就可以了。
坑
-
flutter-desktop 沒有提供打包方式,全部都是debug版本,所以會出現黃色溢位警告(有誰知道怎麼禁止這個警告,請告訴下,感恩)
-
flutter-desktop mac產出未知,也許是因為我不夠了解吧。windows是exe,微軟粉輕鬆找到。
-
flutter-desktop 不支援快捷鍵,比如Ctrl+C,Ctrl+V。後面只有靠go-flutter打包來解決這個問題。如何使用go-flutter打包
-
flutter-web 本地執行沒問題,打包釋出網頁顯示異常。 在windows上面打包的時候,注意在cmd/PowerShell裡面執行 webdev build。別像我一樣用git執行,提示命令找不到
-
flutter-desktop 和flutter-web沒有完整的生命週期, 沒法知道程式關閉的時機,導致我加了一個儲存配置按鈕(感覺隨變隨存不太好,特別是有輸入框)
一頓操作下來,感覺flutter-desktop 和flutter-web確實只是小白鼠階段,不過用go-flutter打出來的mac版本,已經足夠使用了。
JsonToDart 指南
功能最全面的Json轉換Dart的工具,支援Windows,Mac,Web以及Linux。
相關:
Flutter Candies qq群181398081
下載
平臺 | 語言 | 描述 | 程式碼/安裝包地址 |
---|---|---|---|
windows | C# | uwp構建,執行環境windows10,x86/x64 | windows-uwp.zip |
windows | C# | wpf構建,執行環境windows10/windows8/widnows7,x86/x64 | windows-wpf.zip |
windows | dart | flutter構建,使用官方方式編譯,x64 ,debug版本 | windows-x64-flutter.zip |
windows | dart | flutter構建, 使用go-flutter編譯,x64 ,debug版本 | windows-x64-go-flutter.zip |
mac | dart | flutter構建, 使用go-flutter編譯(官方方式,未找到產物) | mac-go-flutter.zip |
web | C# | silverlight構建, 需要安裝silverlight外掛,有瀏覽器限制 | 網頁地址和帶字型檔案網頁地址 |
web | dart | flutter-web構建, 只支援本地執行,打包部署網頁報錯 | 程式碼地址 |
linux | dart | flutter構建, 使用官方方式編譯,(沒有環境測試,假裝可以用) | 程式碼地址 |
安裝
UWP(Windows10)
Windows10 使用者
考慮到應用商店經常大姨媽,就沒有上傳到商店了。
下載好安裝包,解壓。
第一次安裝,需要安裝證書,請按照下圖,使用PowerShell開啟Add-AppDevPackage.ps1,一路接受就安裝完畢
後面如果工具有更新,可以下載最新的,然後點選FlutterCandiesJsonToDart_x.0.x.0_x86_x64.appxbundle 安裝
WPF(Windows7/Windows8)
Windows7/Windows8 使用者
下載解壓,點選setup.exe安裝
Silverlight(Web)
帶字型檔案是因為可能有亂碼,由於中文字型問題,包含了中文字型檔案,第一次會比較久,請耐心等待
首先需要安裝Silverlight
Mac的使用者下載Mac的,Windows使用者下載Windows的
然後就是瀏覽器問題了,因為支援Silverlight的瀏覽器是有限的,除了Internet Explorer支援,以下版本的瀏覽器也支援.
Mac Firefox這個版本能使用
Flutter(Mac)
go-flutter生成的產物是二進位制程式,執行為exec,可以雙擊開啟, 後由低調大佬測試打包DMG,安裝即可,注意在安全性與隱私中同意安裝,具體如何打包可以檢視Go Flutter Desktop (二) go 二進位制程式打包為 mac app(dmg)
Flutter(Windows_x64)
flutter官方產物或者go-flutter產物為exe,點選exe啟動
使用
左邊是json的輸入框以及最後Dart生成的程式碼,右邊是生成的Json類的結構
格式化
點選格式化按鈕,將json轉換為右邊視覺化的json類結構
更多設定
設定會全部自動儲存(flutter版本除外,需要手動儲存),一次設定終身受益
資料型別全方位保護
大家一定會有被服務端坑的時候吧? 不按規定好了的資料型別傳值,導致json整個解析失敗。
開啟這個開關,就會在獲取資料的時候加一層保護,程式碼如下
dynamic convertValueByType(value, Type type, {String stack: ""}) {
if (value == null) {
debugPrint("$stack : value is null");
if (type == String) {
return "";
} else if (type == int) {
return 0;
} else if (type == double) {
return 0.0;
} else if (type == bool) {
return false;
}
return null;
}
if (value.runtimeType == type) {
return value;
}
var valueS = value.toString();
debugPrint("$stack : ${value.runtimeType} is not $type type");
if (type == String) {
return valueS;
} else if (type == int) {
return int.tryParse(valueS);
} else if (type == double) {
return double.tryParse(valueS);
} else if (type == bool) {
valueS = valueS.toLowerCase();
var intValue = int.tryParse(valueS);
if (intValue != null) {
return intValue == 1;
}
return valueS == "true";
}
}
複製程式碼
陣列全方位保護
在迴圈陣列的時候,一個出錯,導致json整個解析失敗的情況,大家遇到過吧?
開啟這個開關,將對每一次迴圈解析進行保護,程式碼如下
void tryCatch(Function f) {
try {
f?.call();
} catch (e, stack) {
debugPrint("$e");
debugPrint("$stack");
}
}
複製程式碼
遍歷陣列次數
在伺服器返回的資料中,有時候陣列裡面不是每一個item都帶有全部的屬性,
如果只檢查第一個話,會存在屬性丟失的情況
你可以通過多次迴圈來避免丟失屬性
選項有1,20,99
99就代表迴圈全部進行檢查
屬性命名
屬性命名規範選項:保持原樣,駝峰式命名小駝峰,帕斯卡命名大駝峰,匈牙利命名下劃線
Dart 官方推薦 駝峰式命名小駝峰
屬性排序
對屬性進行排序
排序選項: 保持原樣,升序排列,降序排序
新增保護方法
是否新增保護方法。資料型別全方位保護/陣列全方位保護 這2個開啟的時候會生成方法。第一次使用的時候開啟就可以了,你可以方法提出去,後面生成Dart就沒有必要每個檔案裡面都要這2個方法了。
檔案頭部資訊
可以在這裡新增copyright,improt dart,建立人資訊等等,支援[Date yyyy MM-dd]來生成時間,Date後面為日期格式。
比如[Date yyyy MM-dd] 會將你生成Dart程式碼的時間按照yyyy MM-dd的格式生成對應時間
屬性訪問器型別
點選格式化之後,右邊會顯示視覺化的json類結構,在右邊一列,就是屬性訪問器型別設定
選項:預設,Final,Get,GetSet
頂部設定修改,下面子項都會修改。你也可以單獨對某個屬性進行設定。
修改json類資訊
點選格式化之後,右邊會顯示視覺化的json類結構。
第一列為在json中對應的key
第二列為屬性型別/類的名字。如果是類名,會用黃色背景提示
第三列是屬性的名字
輸入選項如果為空,會報紅提示
生成Dart
做好設定之後,點選生成Dart按鈕,左邊就會生成你想要的Dart程式碼,並且提示“Dart生成成功,已複製到剪下板”,可以直接複製到你的Dart檔案裡面
是不是很方便很人性化,歡迎Start,Fork,666三連。
最後放上 Josn To Dart,如果你有什麼不明白或者對這個方案有什麼改進的地方,請告訴我,歡迎加入Flutter Candies,一起生產可愛的Flutter 小糖果(QQ群:181398081)
再次邀請,有心為Flutter生態做貢獻的小夥伴加入Flutter Candies,一起開心地寫bug。
最最後放上Flutter Candies全家桶,真香。