如何使用 Ray 开发万能面板（万字全流程手把手教学）

最新推荐文章于 2025-09-22 14:28:26 发布

原创

最新推荐文章于 2025-09-22 14:28:26 发布 · 2.1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #iot #开发语言 #App #低代码 #ide #css

1. IoT 平台创建产品

面板作为 IoT 智能设备在 App 终端上的产品形态，创建产品之前，首先来了解一下什么是面板，以及和产品、设备之间的关系。

1.1 面板是什么？

面板 是运行在智能生活 App、OEM App（涂鸦定制 App） 上的界面交互程序，用于控制 智能设备 的运行，展示 智能设备 实时状态。
产品 将 面板 与 智能设备 联系起来，产品描述了其具备的功能、在 App 上面板显示的名称、智能设备拥有的功能点等。
智能设备 是搭载了 涂鸦智能模组 的设备，通常在设备上都会贴有一张 二维码，使用 智能生活 App 扫描二维码，即可在 App 中获取并安装该设备的控制 面板。

1.2 产品、面板、设备关系

下图描述了产品、面板和设备三者之间的关系

1.3 创建产品

由于产品定义了面板和设备所拥有的功能点，所以在开发一个智能设备面板之前，我们首先需要创建一个产品，定义产品有哪些功能点，然后面板中再根据这些功能点一一实现。

这部分我们在 IoT 平台上进行操作，注册登录 IoT 平台:

点击左侧产品菜单，产品开发，创建产品，以大家电为例，选择标准类目，选择大家电 -> 空调:

填写产品名称，输入"万能面板"，其余选项默认即可，点击创建产品按钮，完成产品创建。

2. 产品功能点定义

创建完成产品后，进入功能定义页面，这里列出了空调类目下可选的标准功能点，这里我们点击全部选择，点击确定完成产品初始功能点设置：

3. 小程序平台创建小程序

现在我们已经有了一个产品，并且功能点已设置完成，接下来就进入面板小程序的开发流程。前往注册登录涂鸦小程序开发者平台，创建我们的小程序项目。

点击新建，输入小程序名称"万能面板"，小程序类型选择 面板小程序，面板类型选择公版，点击确定完成创建：

4. 安装小程序 IDE 创建项目代码

安装并打开小程序 IDE 工具（前往下载小程序 IDE）

使用涂鸦 IoT 平台账号登录 IDE 后，使用智能生活 App 扫码授权 IDE：

4.1 创建项目代码

点击新建，输入项目名称：万能面板，关联智能小程序选择第 3 步小程序平台创建的小程序，关联产品选择第 1 步在 IoT 平台创建的产品：

点击下一步选择模版，选择 App 面板开发 Ray 应用（jotai），生成 Ray 面板项目（Ray 类似 Taro，是一个多端研发框架，编写一套代码编译到多端）

4.2 启动项目

创建后，点击工具栏在 vscode 打开项目代码：

涂鸦小程序 IDE 工具导入小程序后会自动安装依赖，并实时编译运行。

如果出现Error(MiniKit 不存在指定的版本 2.3.3)类似的错误，点击环境配置 -> Kit 管理，选择推荐的版本即可:

5. 小程序开发工作流程

面板小程序开发主要围绕 IoT 平台、小程序开发平台、小程序 IDE 之间进行，用一张图来概括整体流程：

6. 项目代码结构

以上完成了一个面板小程序的创建流程，下面进入到实际代码的开发教程。

6.1 代码目录结构

首先了解项目的目录结构：

6.2 页面路由配置

编写代码主要在 pages 文件夹中进行，创建你的页面代码，然后将路由地址配置到 src/routes.config.ts 文件中:

其他文件的说明，会在下文开发步骤中顺路提到。

7. 编写代码

7.1 使用 jotai 状态管理读取设备数据

在 IDE 中点击 在 vscode 打开 按钮，打开 vscode 编辑器，修改 src/pages/home/index.tsx 文件，清空内容，输入以下代码:

import React from "react";

import { useDevInfo } from "@ray-js/panel-sdk";
import { useAtomValue } from "jotai";
import { selectDpStateAtom } from "@/atoms";
import { View } from "@ray-js/ray";

export default () => {
  // 项目启动时，会自动拉取 IoT 平台 productId 对应的产品信息
  const devInfo = useDevInfo() || {};