【亲测免费】 Node-RED UI Builder 使用教程

1. 项目目录结构及介绍

Node-RED node-red-contrib-uibuilder 是一个用于创建自定义用户界面的插件。其基本目录结构如下：

uibuilder/
├── public/                # 存放前端资源（HTML, CSS, JS 等）
│   └── lib/                # 第三方库或自定义JS/CSS
├── tiddlywiki/             # 可选，如果要集成 TiddlyWiki
└── flows.json              # Node-RED 流程文件，其中包含了 uibuilder 的节点配置

• public: 这是你的前端应用的工作区，你可以在这里存放HTML页面，CSS样式表，JavaScript脚本以及任何其他前端资源。
• lib: 这个文件夹通常用于存储外部库或者你自己编写的JS和CSS文件，它们会被引入到你的前端应用中。
• tiddlywiki: 如果你需要集成 TiddlyWiki 到你的应用，这个文件夹将存储相关的数据。
• flows.json: 包含了整个 Node-RED 流程的信息，包括 uibuilder 节点的设置。

2. 项目的启动文件介绍

在 node-red-contrib-uibuilder 中，启动文件是通过 Node-RED 自动处理的。当你在 Node-RED 的编辑器中添加并配置了一个 uibuilder 节点时，你会指定一个前端模板文件，比如 public/index.html。这个文件就是你的前端应用的入口点。

当你在 Node-RED 中启动流并访问指定的端点（通常是 /uibuilder/<node-instance-name>），Node-RED 将加载你配置的 HTML 文件，并传递数据到前端，同时接收来自前端的事件和命令。

3. 项目的配置文件介绍

node-red-contrib-uibuilder 主要的配置是在 Node-RED 的图形界面进行的，而不是通过单独的配置文件。不过，你的前端代码可以与 Node-RED 通信，这需要配置以下几个关键点：

• Topic: 在 uibuilder 节点中设定，定义了从 Node-RED 发送到前端的消息主题，也可以作为前端向 Node-RED 发送消息的主题。
• Frontend URLs: 指定前端访问的URL路径，如 /uibuilder/test，这将在 Node-RED 中提供一个服务器接口供前端应用使用。
• Node.js to Frontend Variables: 可以设置变量，让 Node.js 数据可以在前端 JavaScript 中访问。

此外，如果你的前端应用需要特定的配置，你可以在 public/js/uibuilderfe.min.js 或 public/custom.js 文件中初始化这些配置，例如设置 WebSocket 连接的参数。

记得保存配置并在 Node-RED 中重新部署流，以便应用新的设置。

希望这份简短的教程能帮助你开始使用 node-red-contrib-uibuilder 创建自定义用户界面。更多详细信息，你可以参考 官方GitHub仓库 上的文档。