Hooks
Hooks 指的是一系列可能在您开发控制设备面板业务的时候需要用到的 React Hooks 方法集合,我们在 @ray-js/panel-sdk 中做了一层包装,帮助您更方便的开发智能产品。
如何使用
$ yarn add @ray-js/panel-sdk
# or
$ npm install @ray-js/panel-sdk
then
import {
usePanelConfig,
useScreenAlwaysOn,
useTopBarTitle,
useIsSigmeshGatewayConnected,
useProtocolRun,
} from '@ray-js/panel-sdk';
usePanelConfig
@ray-js/panel-sdk^1.12.0 版本开始加入
获取面板小程序运行时对应的产品配置信息,如定时功能配置、跳转链接配置、自定义配置等等。
如下图分别为:
- 图1:定时功能配置、跳转链接配置,对应返回值中的
panelConfig.bic
- 图2、3:自定义云能力配置入口及配置界面,对应返回值中的
panelConfig.fun
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。
代码演示
基础用法
import React from 'react';
import { View } from '@ray-js/ray';
import { usePanelConfig } from '@ray-js/panel-sdk';
import styles from './index.module.less';
export function Home() {
const panelConfig = usePanelConfig();
// App 基线 5.13.0 以前版本,由 hooks 内部异步获取,因此建议等待初始化完毕后再去使用
// App 基线 5.13.0 以后版本,设备面板初始化完毕时就已经注入完毕,可以去掉此段等待逻辑
if (!panelConfig.initialized) return null;
const renderTimer = React.useCallback(() => {
// ignore some code...
}, [])
return (
<View className={styles.view}>
{/* 在 IoT 产品配置云定时时,显示定时相关逻辑 */}
{panelConfig?.bic?.timer?.selected && renderTimer()}
</View>
);
}
API
const panelConfig = usePanelConfig();
Result
参数 | 说明 | 类型 |
---|---|---|
initialized | 是否初始化完毕 | boolean |
bic | 平台配置的云定时和跳转链接 | CloudConfig |
fun | 小程序自定义配置信息,目前仅开放给官方开发者 | FunConfig |
iot | 产品界面配置信息,仅公版面板支持,开发者可忽略 | IoTPublicConfig |
themeInfo | 小程序主题配置数据 | Record<string, any> |
CloudConfig
参数 | 说明 | 类型 |
---|---|---|
jump_url | 跳转链接配置,selected 说明是否开启 | { code: 'jump_url'; description: string; name: string; selected: boolean; } |
timer | 云定时配置,selected 说明是否开启 | { code: 'timer'; description: string; name: string; selected: boolean; } |
FunConfig
目前仅开放给官方开发者
参数 | 说明 | 类型 |
---|---|---|
tyabirysr4 | 背景色 | string |
tyabis5d9w | 主题色 | string |
[code: string] | 其他自定义配置项 | string |
IoTPublicConfig
仅公版面板支持,开发者可忽略
参数 | 说明 | 类型 |
---|---|---|
background | 背景图片配置项 | ThemeValue |
cloud | 云定时和跳转链接配置 | CloudConfig |
dps | 设备功能点相关配置项 | any |
fontColor | 字体颜色配置项 | ThemeValue |
global | 全局配置项 | GlobalConfig |
theme | 主题配置,暗色或亮色系 | 'default' 或 'light' |
themeColor | 主题色配置项 | ThemeValue |
themeImage | 主题图片配置项 | ThemeValue |
subUiId | 子界面 ID | string |
timestamp | 界面配置最近更新时间 | number |
other | 其他配置项 | Record<string, any> |
GlobalConfig
参数 | 说明 | 类型 |
---|---|---|
background | 背景配置 | string |
fontColor | 字体颜色配置 | string |
themeColor | 主题色配置 | string |
Params
无
返回示例
{
"initialized": true,
"bic": {
"jump_url": {
"code": "jump_url",
"description": "设置网页url跳转功能,可跳转商城、官网等网页。",
"name": "跳转网页",
"selected": false
},
"timer": {
"code": "timer",
"description": "涂鸦云提供的定时功能,可设置开关时间、周循环等功能。",
"name": "定时",
"selected": true
}
},
"fun": {
"tyabis5d9w": "#8874e3",
"tyabirysr4": "#2b4e1f",
"timestamp": "1719311027366",
"tyabis5d9w_app": "--app-M1",
"tyabif5cnr": "smart/ui_design_pkg_icon/xxx.png",
"tyabirysr4_app": "--app-B1"
},
"themeInfo": {
"--app-B1": "rgba(43, 78, 31, 1.00)",
"--app-M1": "rgba(136, 116, 227, 1.00)"
}
}
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。