当前位置：首页 > article >正文

HarmonyOS NEXT应用开发实战：一分钟写一个网络接口，JsonFormat插件推荐

article 2025/1/5 7:24:34

在开发鸿蒙操作系统应用时，网络接口的实现往往是一个繁琐且重复的过程。为了提高开发效率，坚果派(nutpi.net)特别推出了一个非常实用的插件——JsonFormat。这款插件的主要功能是将JSON格式的数据直接转换为arkts的结构定义，让我们在编写接口时能够更加轻松快捷。

JsonFormat插件介绍

JsonFormat插件可以极大地简化鸿蒙应用开发中的数据处理过程。通过这个插件，开发者只需简单操作，即可将JSON转化为对应的鸿蒙ets类，减少手动编写代码的时间，提高工作效率。

插件地址：JsonFormat插件

如何安装JsonFormat插件

通过Jetbrains Marketplace安装
1. 打开DevEco Studio，导航至Settings/Preferences > Plugins > Marketplace。
2. 在搜索框中输入“JsonFormat”，然后进行安装。
本地jar安装

如果在Marketplace中无法找到该插件，可以选择手动安装：
1. 在Settings/Preferences > Plugins > Setting中，选择Install plugin from Disk。
2. 选择下载的插件jar文件并进行安装。

如何使用JsonFormat插件

使用JsonFormat插件，将JSON数据转换为鸿蒙ets类的过程非常简单，具体步骤如下：

1. Json2ets

步骤：
1. 手动新建一个类文件，如User.ets。
2. 调用Generate，选择Json2ets。
3. 在弹出的输入框中粘贴对应的JSON，确认后即可生成对应的ets model文件。

2. Json2etsFile

步骤：
1. 在指定目录上右键，选择Convert Json to Ets。
2. 在弹出的输入框中粘贴对应的JSON，并填写ets文件的名字，确认后即可生成相应的ets文件。

3. JavaBean2ets

步骤：
1. 在指定的JavaBean类（以.java结尾的文件）上右键。
2. 从弹出的菜单中选择JavaBean2ets。
3. 在二级菜单中选择对应操作：保存到文件、复制到剪贴板、在编辑框中修改任意操作。

通过以上简单的步骤，就可以快速完成从JSON到鸿蒙ets文件的转换，大大节省了开发时间。

一分钟写完接口使用举例

假如有以下接口:

### 开发者列表获取
POST https://openatom.atomgit.com/api/developer/recommend_list
Content-Type:application/json
X-ATOMGIT-POP-COMMUNITY:openatom

{
    "pageSize": 2,
    "pageNum": 1,
    "isSelected": 0
}

如何在DevStudio中, 用时一分钟写完这个接口呢?
首先拿到该接口响应的json报文:

{
  "code": 200,
  "msg": "成功",
  "data": {
    "records": [
      {
        "nickname": "shetianlang",
        "photo": "https://file.atomgit.com/uploads/user/default.png",
        "userId": "677024fa328a782f18201665",
        "username": "shetianlang",
        "profile": "",
        "jump": "https://atomgit.com/shetianlang",
        "isFocus": false,
        "focusButtonDisabled": false,
        "warehouseList": []
      },
      {
        "nickname": "zhangzz0123",
        "photo": "https://file.atomgit.com/uploads/user/default.png",
        "userId": "676d18a2ade4166a13b033af",
        "username": "zhangzz0123",
        "profile": "",
        "jump": "https://atomgit.com/zhangzz0123",
        "isFocus": false,
        "focusButtonDisabled": false,
        "warehouseList": []
      }
    ],
    "total": 462,
    "size": 2,
    "current": 1,
    "pages": 231
  }
}

然后打开devstudio,新建一个UserList.ts 文件,再使用这个插件:
在这里插入图片描述
自动生成了以下定义:

export interface UserListResp {
  code: number;
  msg: string;
  data: UserListRespData;
}
export interface UserListRespDataRecords {
  nickname: string;
  photo: string;
  userId: string;
  username: string;
  profile: string;
  jump: string;
  isFocus: boolean;
  focusButtonDisabled: boolean;
  warehouseList: object[];
}
export interface UserListRespData {
  records: UserListRespDataRecords[];
  total: number;
  size: number;
  current: number;
  pages: number;
}

接下来就可以写接口啦:

import { UserListResp } from '../bean/UserList';
// 获取开发者列表
export const getUserList = (pageNum:number,pageSize:number): HttpPromise<UserListResp> => axiosClient.post({url:'/developer/recommend_list',data:{pageSize:pageSize,pageNum:pageNum}});