ray开发面板小程序如何监听dp点上报事件

[xww]

ray开发面板小程序如何监听dp点上报事件，有个需求是当某个dp点上报了数据之后，再执行操作。请问如何获得上报的dp点数据（该dp点上报的数据可能始终是一样的数据）

[xuanyi]

我们提供了面板小程序中 api 文档，可以参照 https://developer.tuya.com/cn/miniapp/p ... ata-change

类组件示例：

Code: Select all

import React from 'react';
import { onDpDataChange, offDpDataChange, registerDeviceListListener } from '@ray-js/api';
export default class Demo extends React.Component {
  componentDidMount() {
     // 如果在 app.tsx 中已经调用过 initPanelEnvironment 方法，下面一行可以不用。如果没有调用initPanelEnvironment，则需要先调用 registerDeviceListListener
     // registerDeviceListListener({deviceIdList:[deviceId]})
    onDpDataChange(this.handleOnDpDataChange);
  }
  handleOnDpDataChange = (data) => {
    const { deviceId } = data;
    if (deviceId === currentDeviceId) {

}
  }
  componentWillUnmount(){
    offDpDataChange(this.handleOnDpDataChange)
  }
  render() {
    ...
  }
}

函数组件示例：

Code: Select all

import { onDpDataChange, offDpDataChange, registerDeviceListListener } from '@ray-js/api';
import React from 'react';

export default function Demo() {
  const handleDpDataChange: DpDataChangeHandler = data => {
    console.log('=== onDpDataChange', data);
  };

  React.useEffect(() => {
    // 如果在 app.tsx 中已经调用过 initPanelEnvironment 方法，下面一行可以不用。如果没有调用initPanelEnvironment，则需要先调用 registerDeviceListListener
    registerDeviceListListener({deviceIdList: [deviceId]});
    onDpDataChange(handleDpDataChange);
    return () => {
      offDpDataChange(handleDpDataChange);
    };
  }, []);
}