oops-framework框架之 Excel转Json

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-plugin-excel-to-json

注：作者dgflash的oops-framework框架QQ群： 628575875

配置

作者dgflash在oops-framework的框架中，提供了关于Excel数据表转换为Json和TypeScript的插件。

大概步骤：

通过终端命令进入项目目录内
运行命令：

./update-oops-plugin-excel-to-json.sh

下载成功后，在项目目录的 extensions 中会出现一个 oops-plugin-excel-to-json 的文件夹
在CocosCreator编译器的 扩展管理器 中，打开已安装拓展，标记部分打开
打开项目设置，左侧标签选择 Excel to Json，配置Excel目录、Json输出目录、TypeScript输出目录

注： Excel数据表，一般不在编译器中使用，故此放在assets目录以外

注： PathJsonServer和PathTsServer主要应用于服务器使用

在框架的示例项目的excel目录下，有着现有的表，暂时先使用Language.xlsx多语言表

注：【key】不可取消，它被用于转换JSON的主要标记之一

编译器中，点击： 扩展 --> Oops Framework Excel to Json 会开始进行转换，转换成功后，控制台会生成类似日志：

客户端数据 生成成功 ../oopsFrameworkDemo/assets/resources/game/config/Language.json

在配置的Json和TypeScript的目录下，生成Language.json 和 TableLanguage.ts ，至此配置结束。

Excel表配置规则

增加下示例项目提供的RoleJob表
请添加图片描述

主要规则如下：

第一行为字段中文名
第二行为字段英文名，会生成为json数据的字段名
第三行为字段数据类型，只支持int、float、string、any类型
第四行标记输出服务器数据时，是否存在这个字段"server"为显示字段，"server_no"为删除字段
第五行标记输出客户端数据时，是否存在这个字段"client"为显示字段，"client_no"为删除字段

注：如果数据类型不满足需求，可通过oops-plugin-excel-to-json/dist/ExcelToJson.js进行修改

生成的Json字段:

{
  "1": {
    "armsName": "剑客",
    "weaponType": [1],
    "power": 8,
    "agile": 2
  },
  "5": {
    "armsName": "刺客",
    "weaponType": [10, 11, 12],
    "power": 5,
    "agile": 10
  },
  "9": {
    "armsName": "长弓手",
    "weaponType": [5],
    "power": 5,
    "agile": 8
  }
}

注： Json字段生成的格式类似于： {[“id”] = {}}

生成的TypeScript脚本：

export class TableRoleJob {
  static TableName: string = "RoleJob";
  private data: any;

  init(id: number) {
    var table = JsonUtil.get(TableRoleJob.TableName);
    this.data = table[id];
    this.id = id;
  }

  /** 编号【KEY】 */
  id: number = 0;

  /** 职业名 */
  get armsName(): string {
    return this.data.armsName;
  }
  /** 武器类型 */
  get weaponType(): any {
    return this.data.weaponType;
  }
  /** 力量 */
  get power(): number {
    return this.data.power;
  }
  /** 敏捷 */
  get agile(): number {
    return this.data.agile;
  }
}

注： TypeScript并非获取所有的数据，而是通过id获取Json配置表中的指定ID字段数据

JsonUtil

cocosCreator引擎支持对Json配置表的动态加载，主要示例代码：

resources.load('gameGiftJson', (err: any, res: JsonAsset) => {
  if (err) {
    return console.error(err.message);
  }
  // 获取到 Json 数据
  const jsonData: object = res.json!;
})

在 oops-framework的框架中，封装了Json数据表工具： JsonUtil，主要接口有：

接口	说明
load(name, callback)	通过名字加载Json数据表，资源加载完成调用回调
loadAsync(name)	通过名字异步加载Json数据表
get(name)	通过名字从缓存中获取Json数据
release(name)	通过名字释放资源

注：load或loadAsync的实现跟resources.load实现类似。

在框架将Excel表通过插件导出Json和TypeScript表后，获取的指定字段就是通过JsonUtil中获取的：

// TableRoleJob.ts
init(id: number) {
  var table = JsonUtil.get(TableRoleJob.TableName);
  this.data = table[id];
  this.id = id;
}

示例

应用Excel表中的数据，框架提供了多种的支持，以RoleJob表生成的Json和TypeScript为例：

// 引用
import { JsonUtil } from "../../../../../extensions/oops-plugin-framework/assets/core/utils/JsonUtil";
import { TableRoleJob } from "../../common/table/TableRoleJob";

方式1: 通过JsonUtil.load获取

let tableName = TableRoleJob.TableName;
JsonUtil.load(tableName, (jsonData) => {
  console.log("表数据:", jsonData);
})

方式2: 先在Loading页面进行异步加载，然后通过JsonUtil或者配合TableRoleJob的方式使用

// 在Loading页面提前加载, 参考LoadingViewComp.ts
private loadCustom() {
  return new Promise(async (resolve, reject) => {
    await JsonUtil.loadAsync(TableRoleJob.TableName);
    resolve(null);
  });
}

let roleJobId = "1";
// 使用JsonUtil的get方式获取
let data = JsonUtil.get(roleJobId);
// 使用生成的TypeScript来构建
let tableRole = new TableRoleJob();
tableRole.init(id);

方式3: 数据已经加载，想获取Json数据表，然后获取指定的数据字段

// 获取Json数据
let tableName = TableRoleJob.TableName;
let table = JsonUtil.get(tableName);
// 遍历，获取需要数据
for (let roleId in table) {
	let roleData = table[roleId];
	// ...
}
// 获取表长度，因数据结构类似于Map, 可这样：
let len = Object.keys(table).length;