环境准备与项目搭建

Android 平台的插件分为两部分：前端与后端。前端负责页面绘制与交互实现，后端负责数据保存与脚本生成。

技术栈

前端

TypeScript / JavaScript
Vue 2.6
SCSS / CSS
AUBO Design 组件库

后端

TypeScript
Node.js

开发环境

安装 >= 14.17.3 && <=24.19.0 版本的 Node.js
任意一款可以开发 Node.js 项目的 IDE，例如 Visual Studio Code、WebStorm

创建一个插件

确保你安装了符合要求版本的 Node.js ，在命令行中运行以下命令

shell

npm i -g @aubo/wcaps-builder

这会在你的电脑上全局安装一个插件构建器，使用此构建器即可完成创建插件项目、编译并打包操作。例如使用此命令可以创建一个插件项目，在执行之前请确保当前工作目录正是打算创建项目的目录。

shell

wcaps-builder create

创建过程会询问：

插件名称（kebab-case，如 my-plugin）: <your-project-name>
显示名称（默认 <your-project-name>）:
插件描述（默认空）: 
作者（默认空）: 
邮箱（默认空）: 
官网地址（默认空）: 
版本号（默认 0.1.0）:
是否为单节点/独占模式？(y/n): 
目标目录（默认 ./example）:
是否自动安装依赖？(y/n) :

其中插件名称会作为唯一标识使用，仅支持英文字母与非特殊字符。与其他插件或内置节点重名会导致加载异常，建议使用 your-project-name 格式，以插件功能为基准进行命名。显示名称可以使用任意语言、任意字符。以上各项在项目创建之后也可以在 package.json 中修改。

一个基础的插件项目文件结构如下：

├─ backend/
│  ├─ main.ts                     固定导出文件
│  ├─ webscope_cap.impl.ts        入口文件，后端实现类
│  ├─ installation/	              配置节点类
│  └─ program/ 			          程序节点类
├─ frontend/
│  ├─ public/                     构建时复制的静态文件
│  └─ src/
│     ├─ index.ts                 入口文件，前端实现类
│     ├─ installModules/          配置节点页面
│     ├─ programModules/          程序节点页面
│     ├─ globalModules/           全局组件
│     ├─ assets/                  图片等资源
│     └─ utils/globalConfig.ts    插件运行时信息
├── babel.config.json
├── package.json
├── README.md
├── tsconfig.backend.json
├── tsconfig.frontend.json
└── vue.config.js

通过以下步骤安装依赖并完成构建打包：

shell

cd <your-project-name>
npm install
wcaps-builder build

此命令会在项目根目录下为你的插件创建一个安装包<name>-<version>.zip。关于如何将安装包安装到 ARCS 中并运行的操作步骤详见《插件的加载与卸载》

至此你已经完成了项目的搭建，下一步可以根据需求开发插件的具体逻辑。

插件信息修改

插件源码的 package.json 同时承担 npm 项目配置和插件元信息来源的职责：

json

{
  "name": "<your-project-name>",
  "displayName": "<any-word>",
  "version": "x.x.x",
  "description": "this is an example",
  "author": {
    "name": "Your Name",
    "email": "you@example.com"
  },
  "license": "aubo",
  "exclusive_mode": false,
  "dependencies": {},
  "devDependencies": {
    "@aubo/wcaps": "~0.4.0",
    "@aubo/wcaps-builder": "~0.4.0"
  }
}

字段说明：

字段	说明
`name`	插件唯一标识，建议使用 kebab-case 格式
`displayName`	AuboStudio 页面中显示的名称
`version`	插件自身版本，建议遵循 SemVer
`exclusive_mode`	为 `true` 时，代表单节点模式
`dependencies`	后端运行时依赖，构建时打入安装包
`devDependencies`	编译、类型和前端开发依赖，不打入运行时依赖目录

开发时应遵守：

纯构建和类型依赖放入 devDependencies。
后端运行时确实需要的第三方包放入 dependencies。

版本规则

构建器会根据 devDependencies 中 @aubo/wcaps 与 @aubo/aubo_design 的版本生成安装包的 api_version。AuboStudio 在安装和加载时都会进行兼容性检查。
构建器会以插件源码 package.json 文件中的 version 字段作为安装包的版本号，你可以通过更新这个字段来完成版本管理。

Q&A

Q：什么是单节点/独占模式？

A：适用于不使用 AuboStudio 中任何内置的程序节点生成 lua 脚本的场景，单节点插件中需要有且仅有一个程序节点。加载“单节点”的插件后 AuboStudio 会隐藏“程序”页面，替换成插件中的程序节点页面。

环境准备与项目搭建 ​

技术栈 ​

开发环境 ​

创建一个插件 ​

插件信息修改 ​

版本规则 ​

Q&A ​

环境准备与项目搭建

技术栈

开发环境

创建一个插件

插件信息修改

版本规则

Q&A