智能小程序 Ray 开发面板 SDK 智能设备模型通用能力——设备支持状态使用指南

使用

ℹ️ 当前 Support 能力 SDK 针对以下能力做了抽象：

• 设备类型判断
• dp支持情况判断
• 其他能力支持判断

起步

通过以下示例代码片段（以 SmartSupportAbility 为例），您可以快速了解如何在面板应用开发中通过基础 JS 或 Ray & SDM 接入通用能力：

基础用法

以下为基础 JS 的接入示例：

import { SmartSupportAbility } from '@ray-js/panel-sdk';
 
// 创建一个 Support 实例
const support = new SmartSupportAbility();
support.init()； // 注意必须这样调用init
 
/**
 * 设备类型判断
 */
// 判断是否是 WiFi Device
support.isWifiDevice(); // false/true
// 判断是否是 Zigbee Device
support.isZigbeeDevice(); // false/true
// 判断是否是 SigMesh Device
support.isSigMeshDevice(); // false/true
// 是否是蓝牙设备
support.isBleDevice(); // false/true
// 是否是 Matter 设备
support.isMatterDevice(); // false/true
// 是否是涂鸦 Matter 设备
support.isTuyaMatterDevice(); // false/true
// 是否是第三方 Matter 设备
support.isTripartiteMatter(); // false/true
// 判断是否是群组设备
support.isGroupDevice(); // false/true
 
/**
 * dp 支持情况判断
 */
// 检查给定的 dpCode 是否支持
support.isSupportDp('colour_data'); // false/true
// 判断是否支持白光亮度
support.isSupportBright(); // false/true
// 判断是否支持色温
support.isSupportTemp(); // false/true
// 判断是否支持彩光
support.isSupportColour(); // false/true
// 判断是否支持云端定时
support.isSupportCloudTimer(); // false/true
 
/**
 * 其他能力支持判断
 */
// 判断设备是否已添加到网关下(仅限于单设备)
support.isInGateway(); // false/true
 

Ray & SDM

以下为 Ray 及 SDM 的接入示例，通过 SDM 接入，您可以更好地享受 TS 类型提示及搭配 React Hooks 带来的开发体验：

src/devices/index.ts

import { SmartDeviceModel, SmartSupportAbility } from '@ray-js/panel-sdk';
 
const options = {
  abilities: [new SmartSupportAbility()],
};
 
const devices = {
  sensor: new SmartDeviceModel<SmartDeviceSchema, { support: SmartSupportAbility }>(options)
};

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。  

src/app.tsx

import React from 'react';
import 'ray';
import '@/i18n';
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
 
const { initPanelEnvironment } = kit;
 
interface Props {
  children: React.ReactNode;
}
 
initPanelEnvironment({ useDefaultOffline: true });
 
export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }
 
  render() {
    return (
      <SdmProvider value={devices.sensor}>{this.props.children}</SdmProvider>
    );
  }
}

src/pages/home.tsx

import React from 'react';
import { View } from '@ray-js/ray';
import { SmartSupportAbility } from '@ray-js/panel-sdk';
 
const support = new SmartSupportAbility();
support.init();
 
function PageSdmSupport() {
  const { isSigMeshDevice, isMatterDevice, isGroupDevice, isSupportDp, isSupportCloudTimer, isInGateway  } = support;
 
  return (
    <View>
      <Text>{`isSigMeshDevice: ${isSigMeshDevice()}`}</Text>
      <Text>{`isMatterDevice: ${isMatterDevice()}`}</Text>
      <Text>{`isGroupDevice: ${isGroupDevice()}`}</Text>
 
      <Text>{`isSupportDp('colour_data'): ${isSupportDp('colour_data')}`}</Text>
      <Text>{`isSupportCloudTimer: ${isSupportCloudTimer()}`}</Text>
 
      <Text>{`isInGateway: ${isInGateway()}`}</Text>
    </View>
  );
}

使用场景

产品功能点自适配

一些照明类的产品，可能会有白光、彩光、色温等功能，但是并不是所有的产品都会有这些功能，这时候就需要根据产品的功能点来做一些自适配。

如上图所示，该照明面板同时展示了白光的亮度滑动条及色温滑动条，它们分别对应控制的是 bright_value 和 temp_value 功能点，那么如果我们期望在一个面板小程序中兼容这俩功能点，就可以通过 Support 能力 SDK 来做一些自适配，比如在 isSupportBright 为 false 的时候隐藏亮度条，在 isSupportTemp 为 false 的时候隐藏色温条。

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。