第一个插件

现在，开始创建你的第一个插件。

在 uTools 里创建插件是非常容易的事情，并不需要你具备复杂的开发知识，跟随下面的指引，创建指定名字的文件夹或者文件，将内容复制到对应的文件中，然后 uTools 开发者工具 中运行即可。

注册插件

uTools 开发者工具 是一个插件的起源，因为在 uTools 中，每个插件必须对应一个自己的 插件 ID，而这部分必须借助 uTools 开发者工具 完成。

uTools 开发者工具 的具体介绍与下载，请点击此处。

WARNING

在使用 uTools 开发者工具 前，请保证你已经在 个人中心 登录 uTools 账号。

启动开发者工具

在 uTools 中搜索 开发者工具 ，并选择对应图标。

进入后，可以看到开发者工具的主界面，目前我们还没有任何项目。

新建项目

点击开发者工具左下侧 新建项目 按钮，即可弹出新建项目相关的配置界面。

根据表单的字段要求，分别填写对应内容。

勾选 "同意 uTools 开发者协议" ，点击右下角的确定，完成插件的创建。

关于表单的字段，需要理解以下内容：

插件应用名称: 插件的名称可以是任意的，但是为了保证插件能够被 Web端的插件市场正确收录，请尽量：不包含空格，不要使用特殊的符号，比如操作系统不支持的文件名符号以及 emoji 等。
插件应用描述：可以帮助其他用户快速的了解插件包含的功能，尽量简洁且清晰。
运行平台：插件可以支持的操作系统平台，在默认情况下是全选的，这也是推荐的，当你的插件功能仅对特定操作系统支持时，才需要改动。
开发者名称：发布后的插件会自动关联到开发者名称。
插件应用所属团队：可选字段，对应当前插件应用专属团队。

TIP

关于团队版的更多信息，可以前往团队版官网进行深入了解。

插件文件夹

uTools 插件是以文件夹为单位进行管理的，在开发插件前，要先创建一个属于插件的文件夹。

新建文件夹

目前，我们可以通过两种方式创建文件夹：

通过 uTools 开发者工具 内置的 “新建React+Vite工程”/“新建Vue+Vite工程”按钮，根据步骤自动创建。
用户手动创建。

TIP

文件夹的名字可以是任意的，但是我们尽量保证跟插件有一定关联性以及尽量使用英文。比如你的第一个插件名字可能是“第一个插件”，文件夹名字可以是“my-first-plugin”。

文件夹下的内容

在插件文件夹下，将会存放许多文件，有些文件是必不可少的，请参考官方推荐的文件目录结构。

我们应该先把logo文件以及页面对应的html入口文件放入插件的项目文件夹下，然后添加必不可少的plugin.json 文件。

假设我们的logo文件名字是logo.png ，html入口文件名字是 index.html，则我们的 plugin.json 文件中至少应该有以下内容：

plugin.json

{
  "logo": "logo.png",
  "main": "index.html",
  "features": [
    {
      "code": "test",
      "cmds": [
        "第一个插件"
      ],
      "explain": "第一个插件"
    }
  ]
}

TIP

关于 plugin.json 更多信息，请查看配置文件介绍。

编写插件

要让你的插件展示任何内容，必须借助刚刚提前创建好的 “index.html” 文件，因为 uTools 插件本身借助了 Web 网页的界面来实现了界面的绘制，这对有 Web 开发经验的开发者来说，是相对简单易上手的方式。

现在，为你的插件输出最基础的内容，一行 hello world 。

index.html

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个插件</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

TIP

在深入编写插件的过程中，你可能会慢慢运用到 uTools 提供的各种 api，比如：

或者你需要自己定制更强大的系统交互能力，那么可以考虑为你的项目加入 preload.js，并尝试在其中使用 nodejs api。

运行插件

选择工程「plugin.json」文件

现在需要将你的插件跟文件夹进行关联，而这需要用到 plugin.json 文件。

当你还未选择 plugin.json 文件时，可以点击插件详情界面的 “选择工程「plugin.json」文件夹” 按钮。

选择对应 plugin.json 文件后，开发者工具就会根据此文件，访问相对路径下的资源，比如 logo 、 main 以及 preload。

此时点击 接入开发，你的插件将在 开发模式 下被启动。

现在，让我们点击 打开。

很好🎉，现在你可以看到你的插件的界面了。

停止插件

完全退出你的插件或者让正在运行的插件退出到后台，并回到开发者工具，点击 停止开发 即可让插件不再显示在 uTools 的主面板。

第一个插件 ​

注册插件 ​

启动开发者工具 ​

新建项目 ​

插件文件夹 ​

新建文件夹 ​

文件夹下的内容 ​

编写插件 ​

运行插件 ​

选择工程「plugin.json」文件 ​

停止插件 ​