Ray开发指南——微信小程序设备管理开发详细步骤

设备管理

涂鸦微信小程序 SDK 提供了与设备进行交互必要的 API，开发者可以做到向设备下发 DP 数据，接收设备上报的 dp 数据，监听设备的在离线状态，移除设备等功能。

获取设备列表

在微信小程序中需要先获取设备列表，才能初始化设备：

import { getDeviceList } from '@ray-js/wechat';
 
const List = () => {
  const [list, setList] = useState([]);
  useEffect(() => {
    const res = await getDeviceList();
    setList(res);
  }, [])
 
  return (
    <View>
        {list.map(item => {
            return <View key={item.id}>{item.name}</View>
        })}
    </View>
  )
};

获取设备详细

设备入网后，获取到设备列表后，我们就可能通过设备 ID 获取到设备的详细信息：

import { getDeviceInfo } from '@ray-js/api';
 
const detail = await getDeviceInfo({ deviceId: 'xxxx' });

获取到设备详细信息后，即可根据业务需要做设备信息的展示及控制了。

  👉 立即免费领取开发资源

向设备发送 DP

在设备入网后，同时设备在线的情况下，开发者可以通过 publishCommands 或 publishDps API 向设备发送 dp 功能数据。

注意: 微信小程序中当前只支持 dp 标准指令集和状态集

import { publishCommands, publishDps } from '@ray-js/api';
 
// 使用 publishCommands
publishCommands({
  deviceId: 'xxxx',
  dps: {
    switch: true,
  },
});
 
// 使用 publishDps
 
publishDps({
  deviceId: 'xxxx',
  dps: {
    1: true,
  },
});

在微信中 publishDps API 也可以使用 publishCommands 的传参方式

 

监听设备上报 DP

在设备入网后，同时设备在线的情况下(云端在线或者蓝牙在线)，开发者可以通过 onDpDataChange API 向注册监听设备端上报的 DP 状态变化情况，然后进行视图更新。

import { onDpDataChange } from '@ray-js/api';
 
// 当前设备id
const devId = 'xxxxx';
 
// 使用 publishCommands
onDpDataChange((data) => {
  const { deviceId, dps } = data;
  // 判断是否为当前设备的上报
  if (devId === deviceId) {
    // 处理业务
  }
});

修改设备名称

可以使用 API renameDeviceName 进行设备名称修改

import { renameDeviceName } from '@ray-js/api';
 
const updateName = async () => {
  await renameDeviceName({
    deviceId: 'xxxxxx',
    name: 'test',
  });
};

连接蓝牙设备

可使用 API connectBLEDevice 进行连接蓝牙设备，不需要连接时使用 disconnectBLEDevice 断开连接

注意： 目前微信小程序中只支持单点蓝牙及涂鸦 Beacon 1.0 设备

import { connectBLEDevice, disconnectBLEDevice } from '@ray-js/api';
 
useEffect(() => {
  // 连接蓝牙
  connectBLEDevice({ deviceId: 'xxxxxx' }).then(() => {
    // 连接成功
  }).catch(err => {
    // 连接失败
  })
  return () => {
    // 退出时断开连接
    disconnectBLEDevice({ deviceId: 'xxxxxx' });
  };
}, []);

移除设备

可以使用 API removeDevice 进行移除设备

import { removeDevice } from '@ray-js/api';
 
const remove = () => {
    await removeDevice({
        deviceId: 'xxxxxx',
    });
}

恢复出厂设置

可以使用 API resetFactory 进行将设备恢复出厂设置

import { resetFactory } from '@ray-js/api';
 
const reset = () => {
    await resetFactory({
        deviceId: 'xxxxxx',
    });
}

设备 OTA

由于微信小程序中没有 APP 中的 native 页面，所以在微信小程序中需要开发者实现这个页面，实现这个页面需要有以步骤：

1. 获取设备固件列表

import { getOTAInfo } from '@ray-js/wechat';
import React, { useState, useEffect } from 'react';
import { Button,View } from '@ray-js/components';
 
 
 
const OTAPage: FC<{ deviceId: string }> = ({ deviceId }) => {
  const [list, setList] = useState([]);
 
  useEffect(() => {
    /**
     * upgradeStatus 为当前 OTA 状态，// 0-不需要升级 1-硬件准备就绪,2-升级中,3-升级完成,4-升级异常
     * moduleList 为固件列表
     */
    const { upgradeStatus, moduleList } = await getOTAInfo({ deviceId: 'xxxx' });
    setList(moduleList);
  }, []);
 
 
    const renderButton = (item: any, onUpgrade: (item: any) => void) => {
    if (item.upgradeStatus > 0) {
        if (item.upgradeStatus === 1) {
        return (
            <Button className={styles.upgradeBtn} onClick={() => onUpgrade(item)}>
            更新
            </Button>
        );
        }
        if (item.upgradeStatus === 2) {
        return <View className={styles.upgradeDesc}>更新中</View>;
        }
    }
    return <View className={styles.upgradeDesc}>已最新</View>;
    };
 
  return <View>
    {list.map((item, i) => {
        return <View key={i}>
            {item.moduleDesc}：V{item.currentVersion}
            {renderButton(item, onUpgrade)}
        </View>
    })}
  </View>
};
 

2. 当前是否正在升级 在进入页面获取列表后，需要检查当前是否正在升级

import { checkOTAUpgrading } from '@ray-js/wechat';
import { showLoading } from '@ray-js/ray';
 
......
 
if (checkOTAUpgrading({ deviceId: 'xxxx' })) {
  // 处理正在升级逻辑
  showLoading({
    title: '更新中',
  });
}
 
......

3. 用户选择升级

当存在待升级的固件时，用户可以点击升级

import { upgradeOTAInfo } from '@ray-js/wechat';
 
const upgrade = (otaInfo) => {
  upgradeOTAInfo({
    deviceId: 'xxxx',
    otaInfo,
  });
};

4. 监听升级完成

import { onOTAUpgradeStatus, offOTAUpgradeStatus } from '@ray-js/wechat';
 
useEffect(() => {
  const handleStatus = (data) => {
    // 判断是否为当前设备的升级状态变更
    if (data.deviceId === 'xxxxx') {
      if (data.status === 3) {
        // 升级成功
      } else if (data.status === 4) {
        // 升级失败
      }
    }
  };
  onOTAUpgradeStatus(handleStatus);
 
  return () => {
    offOTAUpgradeStatus(handleStatus);
  };
}, []);

 👉 立即免费领取开发资源，体验小程序设备管理开发。