智能小程序 Ray 开发面板 SDK —— Hooks SDK 汇总（一）

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 小程序开发。