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全家桶，真香。