Flutter JsonToDart 工具

時間 2020-04-30

標籤 flutter jsontodart 工具简体版

原文原文鏈接

JsonToDart 相關文章

作Flutter快1年半了，從開始的就是幹 html

到如今寫代碼也會注意規範，性能，註釋，各類細節。一個好的工具能提升咱們的工做效率，前端

此次更新 JsonToDart主要是如下考慮:git

以前開發的時候就是爲了方便開發，快速生成dart代碼，也沒有太注意dart的代碼規範。
以前的版本由於Flutter桌面的不完善，是經過go-flutter來最終生成產物的。Flutter sdk版本已經來到1.18，桌面功能進一步完善，是時候從新編譯來一波了
Github 在國內速度實在太慢，因而考慮安裝包和網頁版本移動到Gitee上面供你們使用

下載安裝

UWP 微軟商店我此次放微軟商店了，Windows10的窗戶小夥伴建議使用這個，若是更新也是自動的。點擊連接或者打開微軟商店搜索JsonToDart。 github
WPF for Windows 爲Windows7，8 的窗戶用戶準備了WPF版本的安裝包web
UWP for Windows10 若是微軟商店大姨媽了，你能夠直接在這裏下載安裝包，安裝方法能夠查看以前的文章macos
Flutter for Macos Flutter一波帶走全平臺，真香，爲馬克兒用戶提供的app，直接拖到應用程序裏面就行了json
Flutter for Web 懶得安裝？？好嘛，這裏還有網頁版本，不過建議仍是用其餘版本，js 無法區分double 和 int的問題，若是必定要用，建議到時候開啓數據類型全方位保護，具體請看後面windows

使用

左邊是json的輸入框以及最後Dart生成的代碼，右邊是生成的Json類的結構api

格式化

點擊格式化按鈕，將json轉換爲右邊可視化的json類結構數組

數據類型全方位保護

你們必定會有被服務端坑的時候吧？不按規定好了的數據類型傳值，致使json整個解析失敗。

打開這個開關，就會在獲取數據的時候加一層保護，代碼以下

T asT<T>(dynamic value) {
  if (value is T) {
    return value;
  }
  if (value != null) {
    final String valueS = value.toString();
    if (0 is T) {
      return int.tryParse(valueS) as T;
    } else if (0.0 is T) {
      return double.tryParse(valueS) as T;
    } else if ('' is T) {
      return valueS as T;
    } else if (false is T) {
      if (valueS == '0' || valueS == '1') {
        return (valueS == '1') as T;
      }
      return bool.fromEnvironment(value.toString()) as T;
    }
  }
  return null;
}
複製代碼

數組全方位保護

在循環數組的時候，一個出錯，致使json整個解析失敗的狀況，你們遇到過吧？

打開這個開關，將對每一次循環解析進行保護，代碼以下

void tryCatch(Function f) {
  try {
    f?.call();
  } catch (e, stack) {
    debugPrint("$e");
    debugPrint("$stack");
  }
}
複製代碼

遍歷數組次數

在服務器返回的數據中，有時候數組裏面不是每個item都帶有所有的屬性，

若是隻檢查第一個話，會存在屬性丟失的狀況

你能夠經過屢次循環來避免丟失屬性

選項有1，20，99

99就表明循環所有進行檢查

屬性命名

Dart 命名規範

屬性命名規範選項：

保持原樣
駝峯式命名小駝峯 josnToDart
帕斯卡命名大駝峯 JsonToDart
匈牙利命名下劃線 json_to_dart

Dart 官方推薦駝峯式命名小駝峯

屬性排序

對屬性進行排序

排序選項：

保持原樣
升序排列
降序排序

添加保護方法

是否添加保護方法。數據類型全方位保護/數組全方位保護這2個開啓的時候會生成方法。第一次使用的時候開啓就能夠了，你能夠方法提出去放一個dart文件裏面(而且在文件頭中加入引用)。後面生成的時候就不必再開啓了。

文件頭部信息

能夠在這裏添加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文件裏面

舉個栗子

好比說業務中，Person，有名字年齡

import 'dart:convert';
import 'util.dart';
part 'person_part.dart';

class Person {
  Person({
    this.age,
    this.name,
  });

  factory Person.fromJson(Map<String, dynamic> jsonRes) =>
      Person(age: asT<int>(jsonRes['age']), name: asT<String>(jsonRes['name']));

  final int age;
  final String name;

  Map<String, dynamic> toJson() => <String, dynamic>{
        'age': age,
        'name': name,
      };

  @override
  String toString() {
    return json.encode(this);
  }
}
複製代碼

如今前端有業務邏輯，須要知道這我的是小孩子，年輕人仍是老人。那麼咱們應該怎麼作？直接寫這個類裏面？

固然能夠，可是若是服務器之後變動這個數據模型，那麼咱們用工具直接生成代碼複製，那咱們的業務代碼是否是就會丟掉？

幸運的是

dart 爲咱們提供了擴展 extension，你須要

設置dart sdk >=2.6

environment:
  sdk: '>=2.6.0 <3.0.0'
複製代碼

Flutter項目根目錄建立一個analysis_options.yaml文件，而後添加如下內容到文件中。

analyzer:
    enable-experiment:
        - extension-methods
複製代碼

而後你能夠這樣作。

part of 'person.dart';

enum AgeType {
  baby,
  youth,
  old,
}

extension PersonE on Person {
  AgeType get ageType {
    if (age < 5) {
      return AgeType.baby;
    } else if (age < 50) {
      return AgeType.youth;
    }
    return AgeType.old;
  }

}
複製代碼

這樣任你Person元數據模型修改的時候，本來寫的業務邏輯也不會須要重寫，只須要再次運行工具便可。

不足

對於一些須要修改屬性的場景，用mixin混入或者乾脆把這個屬性設置爲可寫，仍是無法擺脫

mixin PersonMixin  {
   int currentAge;
}
複製代碼

在解析json的時候根據不一樣狀況解析不一樣的數據模型，就是常常你們問的，支不支持泛型。。話說。這個服務端同一個接口，返回不一樣的數據類型模型，不知道是業界常態仍是。。

最慘就是這些代碼寫元數據模型裏面了，下一次更新的時候只好手寫。簡單的模型還好，大的模型千把行，真的是醉了。

惋惜的是dart並無支持partial將類進行拆分，不得不說仍是我軟牛逼，C#牛逼。不知道dart何時會支持。

打包的過程

整個打包時在Flutter 1.18，也記錄一下過程。

Flutter for Windows

在windows機器上面用vscode打開項目，刪掉windows目錄，執行flutter create . 將從新生成windows文件夾(之前只能手動去官方複製)
Flutter也是與時俱進啊，要求Visual Studio 2019
執行flutter build windows,執行完畢以後將在build/windows/下面找到打包出來的exe

支持複製粘貼全選這些快捷鍵了，go-flutter能夠不用了。惟一的問題是我發現粘貼的時候會在前面加上一個亂碼。

悄悄說下，Flutter for UWP 應該快來了，不要問爲何，反正我就是知道。

Flutter for Macos

在mac機器上面用vscode打開項目，刪掉macos目錄，執行flutter create . 將從新生成macos文件夾,mac是官方支持最好的桌面端，無大問題。
執行flutter build macos,執行完畢以後將在build/macos/下面找到打包出來的app
這裏講一下怎麼修改app的圖標和名字 1.圖標在這裏，用本身的圖標替換掉

2.默認app名字是Flutter，用xcode打開runner.xcodeproj，在Build Settings選項中搜索product name修改便可，

Flutter for Web

用vscode打開項目，刪掉web目錄，執行flutter create . 將從新生成web文件夾，注意我index.html裏面有引用一個js，用來保存設置的
執行flutter build web,執行完畢以後將在build/web/下面找到打包出來的文件

格式化Dart代碼

以前一直沒有作這個事情，就是生成的代碼，我沒有作格式化，我想的是你能夠複製到項目裏面本身format。可是作，就要作的漂亮，完美。下面我分享下已知的幾種格式化方法:

使用終端格式化Dart文件

這是作註解路由( ff_annotation_route)的時候，低調大佬pr的,最終調用終端執行flutter format xxx.dart.

Future<void> formatFile(File file) async {
  if (file == null) {
    return;
  }

  if (!file.existsSync()) {
    print(red.wrap('format error: ${file?.absolute?.path} doesn\'t exist\n'));
    return;
  }

  processRunSync(
    executable: 'flutter',
    arguments: 'format ${file?.absolute?.path}',
    runInShell: true,
  );
}

void processRunSync({
  String executable,
  String arguments,
  bool runInShell = false,
}) {
  final ProcessResult result = Process.runSync(
    executable,
    arguments.split(' '),
    runInShell: runInShell,
  );
  if (result.exitCode != 0) {
    throw Exception(result.stderr);
  }
  print('${result.stdout}');
}
複製代碼

使用網絡請求格式化Dart文件

因爲作UWP的時候無法調用終端，因此我在羣裏問了下有沒有其餘方式。果真羣衆是牛逼的，保潔大佬發現了一個用網絡請求作dart格式化的方法。他跑去抓DartPad,不虧是前端大佬。

請求地址

國內https://dart-services.dartpad.cn/api/dartservices/v2/format
國外https://dart-services.appspot.com/api/dartservices/v2/format
使用post請求json {"source","dart代碼"},返回{"newstring","格式化以後的dart代碼"}

使用Dart Style

在我寫好UWP的dart 格式化的時候，保潔大佬又丟了一個連接，能夠直接用Dart Style來作format。

2行代碼，太簡單了！有一羣小夥伴真好。。

final DartFormatter formatter = DartFormatter();
result = formatter.format(result);
複製代碼

Github 太慢

最近使用github實在是太慢了，其實低調大佬很早就告訴我一個方法，就是把Github的庫同步到gitee上面，而後再從gitee上面下載，我一直懶沒有嘗試，最近實在受不了，試了一下，真香！

從github clone flutter倉庫
從gitee clone flutter倉庫
註冊，直接用github帳號登陸就行了
新建一個倉庫

拖動到最下面，導入已有倉庫
輸入github的倉庫地址，好比這裏是flutter

等待一分鐘(很快)，倉庫建立完畢

clone到本地便可

同步github的倉庫，倉庫名字右邊有一個刷新按鈕，能夠把github的倉庫同步過來

本地修改代碼更新到github

終端中輸入 git remote add github https://github.com/flutter/flutter

修改代碼commit以後輸入 git push github, 完美！

之後遇到難如下載的github倉庫必定記得用這個辦法，大大提升效率。

結語

要不是由於想偷懶，人類就不會發明工具。不是由於製造工具，也不會在這個過程當中學習到更多。歡迎加入Flutter Candies成爲工具人。 (QQ羣:181398081)

最最後放上Flutter Candies全家桶，真香。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。