---
name: "usePanelConfig"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.12.0" }
title: "usePanelConfig - 获取面板小程序运行时对应的产品配置信息，如面板小程序主题配置数据、定时功能配置、跳转链接配置、自定义配置等等"
summary: "获取面板小程序运行时产品配置的 Hook，包括主题、云定时、跳转链接、自定义配置等。"
questions:
  - "usePanelConfig 返回的 bic 字段中如何判断云定时功能是否开启？"
  - "usePanelConfig 的 initialized 字段在 App 基线 5.13.0 前后行为有什么区别？"
  - "usePanelConfig 返回的 fun 字段中 tyabirysr4 和 tyabis5d9w 分别代表什么配置？"
  - "为什么 usePanelConfig 不能在 App 根组件中直接使用？"
  - "usePanelConfig 的 themeInfo 字段如何获取小程序主题配置数据？"
  - "如何通过 panelConfig.bic.timer.selected 判断是否渲染定时功能？"
  - "usePanelConfig 从 @ray-js/panel-sdk 哪个版本开始支持？"
  - "CloudConfig 中的 jump_url 和 timer 配置项分别控制什么功能？"
  - "IoTPublicConfig 的 theme 字段支持哪些主题模式？"
  - "usePanelConfig 内部依赖页面的哪个事件来完成初始化？"
---

## usePanelConfig

> [VERSION] @ray-js/panel-sdk >= 1.12.0

### 描述

获取面板小程序运行时对应的产品配置信息，如定时功能配置、跳转链接配置、自定义配置等等。

### 参数

无


### 返回值

类型: `Config`

Config 对象，包含 iot（IoT 公版配置）、fun（功能配置）、bic（云定时/跳转链接）、themeInfo（主题 CSS 变量）和 initialized（是否加载完毕）

##### Config

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `initialized` | `boolean` | 是否初始化完毕 |
| `iot` | `IoTPublicConfig` | IoT 的产品配置信息，仅公版面板支持 |
| `fun` | `FunConfig` | IoT 的功能配置信息 |
| `bic` | `CloudConfig` | IoT 平台配置的云定时和跳转链接 |
| `themeInfo` | `Record<string, any>` | 小程序主题配置数据 |

### 引用对象

##### `interface` IoTPublicConfig

| 属性 | 类型 | 废弃 | 描述 |
| --- | --- | --- | --- |
| `background` | `ThemeValue` | - | 背景图片配置项 |
| `cloud` | `CloudConfig` | 是: 请使用顶层 `bic` 字段 | IoT 平台配置的云定时和跳转链接 |
| `dps` | `any` | - | 和设备功能点相关的配置项 |
| `fontColor` | `ThemeValue` | - | 字体颜色配置项 |
| `global` | `GlobalConfig` | - | 全局配置项 |
| `theme` | `"default" \| "light"` | - | 主题配置，暗色或亮色系 |
| `themeColor` | `ThemeValue` | - | 主题色配置项 |
| `themeImage` | `ThemeValue` | - | 主题图片配置项 |
| `subUiId` | `string` | - | 子 UI ID，只有公版面板支持 |
| `timestamp` | `number` | - | 界面配置最近更新时间 |
| `other` | `Record<string, any>` | - | 其他配置项 |

##### `interface` FunConfig

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `tyabirysr4` | `string` | 背景色，当前仅涂鸦官方小程序支持 |
| `tyabirysr4_app` | `"follow" \| "--app-B1"` | 背景色跟随策略，follow 代表跟随 App，否则代表要替换的 App 变量路径，当前仅涂鸦官方小程序支持 |
| `tyabis5d9w` | `string` | 主题色，当前仅涂鸦官方小程序支持 |
| `tyabis5d9w_app` | `"follow" \| "--app-M1"` | 主题色跟随策略，follow 代表跟随 App，否则代表要替换的 App 变量路径，当前仅涂鸦官方小程序支持 |

##### `interface` CloudConfig

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `jump_url` | `JumpUrlConfig` | 跳转链接配置 |
| `timer` | `TimerConfig` | 云定时配置 |

##### `interface` ThemeValue

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `rangeType` | `"bool" \| "enum" \| "blank"` | 主题值范围类型 |
| `type` | `string` | 主题值类型 |
| `value` | `Object` | 主题值初始化 |

##### `interface` GlobalConfig

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `background` | `string` | 背景配置 |
| `fontColor` | `string` | 字体颜色配置 |
| `themeColor` | `string` | 主题色配置 |

##### `interface` JumpUrlConfig

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `code` | `"jump_url"` | 跳转链接配置代码 |
| `description` | `string` | 跳转链接配置描述 |
| `name` | `string` | 跳转链接配置名称 |
| `selected` | `boolean` | 跳转链接配置是否选中 |

##### `interface` TimerConfig

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `code` | `"timer"` | 云定时配置代码 |
| `description` | `string` | 云定时配置描述 |
| `name` | `string` | 云定时配置名称 |
| `selected` | `boolean` | 云定时配置是否选中 |

##### `type` ThemeValue.value

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `initialize` | `string` | 主题配置的默认初始值 |


### 示例代码

#### 示例

```tsx
import { usePanelConfig } from '@ray-js/panel-sdk';

function ThemeProvider({ children }) {
  const config = usePanelConfig();

  if (!config.initialized) {
    return <Loading />;
  }

  const bgColor = config.iot?.global?.background;
  return <View style={{ backgroundColor: bgColor }}>{children}</View>;
}
```


### 常见问题

#### Q：为什么在 App 根组件下使用会出现异常崩溃

A：`usePanelConfig` 内部实现依赖页面的 `ready` 事件，请勿在 App 根组件下直接使用该 hooks，此时页面还没有初次渲染完毕。

#### Q：面板小程序运行时的产品配置来源在哪里

如下图分别为：

- 图1：定时功能配置、跳转链接配置，对应返回值中的 `panelConfig.bic`
- 图2、3：自定义云能力配置入口及配置界面，对应返回值中的 `panelConfig.fun`

<Image src="/images/panel/panel-config1.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />
<Image src="/images/panel/panel-config2.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />
<Image src="/images/panel/panel-config3.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />