单页H5-对接文档

## 页面链接
http://192.168.50.5:16040/chat

## 一、H5 页面加载完成通知 APP (H5 -> APP)

当 H5 页面加载完成后，将主动调用原生方法通知 APP

#### Android / HarmonyOS

```javascript
injectedObject.webViewPageReady();
```

#### iOS

```javascript
window.webkit?.messageHandlers?.ocWkMethod?.postMessage({
    method: 'webViewPageReady'
});
```

---

## 二、原生 APP 发送数据到 H5 (APP -> H5)

### 调用示例

```javascript
sendDataToWeb(NativePayload);
```

**说明**：

1. 在原生接收到 `webViewPageReady` 方法后，使用 `type: 'user'`、`type: 'room'`、`type: 'device'`、`type: 'scene'` 同步对应的用户、房间、设备、场景信息给 H5。APP 可以先发起 `type: 'user'`，但无需等待 H5 完成用户同步，其他三类数据可以继续发送。H5 对接收顺序没有要求：如果先收到房间、设备或场景数据，H5 会先缓存，等用户信息与后台同步并取得 `userCode` 后再依次同步。
2. 在打开页面后，并且完成同步后，如果场景信息有变更，则调用 `type: 'scene_delete'` 或者 `'scene_update'`.
3. 发送给H5时  **NativePayload被 JSON 序列化后作为一个字符串参数传入**

### NativePayload 数据结构说明

根据传输内容的不同，根据不同 `type` 发送数据：

```typescript
type NativePayload =
  | { type: 'user'; data: UserInfoType }
  | { type: 'room'; data: RoomListType }
  | { type: 'device'; data: DeviceListType }
  | { type: 'scene'; data: SceneListType }
  | { type: 'scene_delete'; data: { id: string; sceneName?: string } }
  | { type: 'scene_update'; data: SceneListType }
```

具体定义为：

**1. 用户信息 (`UserInfoType`)**

```typescript
type UserInfoType = {
  username: string;    // 用户名
  hostToken: string;   // 主机ID 
  phone: string;       // 手机号码/邮箱
}
```

*示例：*

```json
{
  "username": "xly",
  "hostToken": "0102030405060708",
  "phone": "15012345678"
}
```

**2. 房间列表 (`RoomListType`)**

```typescript
type RoomListType = Array<{
  areaId: string;      // 区域/房间ID
  areaName: string;    // 区域/房间名称
  parentId: string;  
  areaType: number;    // 区域类型
}>
```

*示例：*

```json
[
  {
    "areaId": "r0200",
    "areaName": "客厅",
    "parentId": "",
    "areaType": 1
  }
]
```

**3. 设备列表 (`DeviceListType`)**

```typescript
type DeviceListType = Array<{
  deviceId: string;       // deviceId
  hostId: string;         // 主机ID
  deviceName: string;     // 设备名称
  online: number;         // 在线状态 (1: 在线)
  areaId: string;         // 所属房间
  deviceTypeInt: number;  // 功能号
  versionNo: number;      // 版本
  param: string;             // 设备参数
  status: string;         // 状态
  statusData: string;     // 状态值
}>
```

*示例：*

```json
[
  {
    "deviceId": "012535edffff6b1b-a200ffffffff00ff",
    "hostId": "012535edffff6b1b",
    "deviceName": "卧室灯带-2",
    "online": 1,
    "areaId": "r0200",
    "deviceTypeInt": 2,
    "versionNo": 33,
    "param": "",
    "status": "01",
    "statusData": "0400"
  }
]
```

**4. 场景信息 (`SceneListType`)**  同步场景和更新场景

```typescript
type SceneListType = Array<{
  sceneName: string;   // 场景名称
  roomId: string;      // 所属房间
  id: string;          // 场景ID（必填，字符串类型）
  devices: Array<{     // 设备列表
    deviceId: string;
    deviceName: string;
    deviceTypeInt: number;
    versionNo: number;
    delay: number;     // 延时时间(ms)
    cmd: string;   
    cmdData: string;  
  }>
}>
```

*示例：*

```json
[
  {
    "sceneName": "回家场景",
    "roomId": "r0200",
    "id": "123",
    "devices": [
      {
        "deviceId": "012535edffff6b1b-a200ffffffff00ff",
        "deviceName": "门口灯",
        "deviceTypeInt": 1,
        "versionNo": 0,
        "delay": 0,
        "cmd": "02",
        "cmdData": "01"
      }
    ]
  }
]
```

**5. 删除场景**

*示例：*

```json
{ "type": "scene_delete", "data": {"id":"123","sceneName":"场景名称"}}
```

---

## 三、H5发送场景配置回传给原生 (H5 -> APP)

在 H5 发送场景数据给到APP ，需要APP 进行对应处理。

### 添加/编辑

#### Android / HarmonyOS

**参数被 JSON 序列化后作为一个字符串参数传入**

```javascript
injectedObject.webViewSceneConfig(params);
```

#### iOS

```javascript

window.webkit?.messageHandlers?.ocWkMethod?.postMessage({
    method: 'webViewSceneConfig',
    ...params 
});
```

**params 示例：**
如果下方的json 中存在 **id** 字段，则表示是编辑场景信息。

```json
{
  "type": "edit",
  "data": {
    "sceneName": "回家场景",
    "roomId": "0",
    "id": "1", // 当 type 为 edit 时，id 为字符串；type 为 create 时，不存在 id 字段
    "devices": [
      {
        "deviceId": "012535edffff6b1b-0100ffffffff00ff",
        "deviceName": "客厅灯",
        "deviceTypeInt": 1,
        "versionNo": 33,
        "delay": 0,
        "actionDescription": "打开", // 对场景数据无用，可忽略
        "cmd": "02"
      },
      {
        "deviceId": "012535edffff6b1b-0100ffffffff01ff",
        "deviceName": "客厅筒灯",
        "deviceTypeInt": 1,
        "versionNo": 33,
        "delay": 0,
        "actionDescription": "打开",
        "cmd": "02"
      }
    ]
  }
};
```

### 删除

**参数被 JSON 序列化后作为一个字符串参数传入**

#### Android / HarmonyOS

```javascript
injectedObject.webViewSceneDelete(params);
```

#### iOS

```javascript

window.webkit?.messageHandlers?.ocWkMethod?.postMessage({
    method: 'webViewSceneDelete',
    ...params 
});
```

**params 示例：**
实际发送时是Json 字符串。
删除场景时，**id** 字段必须是字符串类型。

```json
{
  "type": "delete",
  "id": "11"
}
```

## 四、H5 关闭页面

#### Android / HarmonyOS

```javascript
injectedObject.webViewClose();
```

#### iOS

```javascript

window.webkit?.messageHandlers?.ocWkMethod?.postMessage({
   method: 'webViewClose'
});
```

## 五、设备控制

#### Android / HarmonyOS

```javascript
injectedObject.deviceConfig(params);
```

*示例：*

```json
[
  { 
    "deviceId": "012535edffff6b1b-a200ffffffff00ff",
    "cmd": "02",
    "cmdData": "01"
  }
]

```

#### iOS

```javascript

window.webkit?.messageHandlers?.ocWkMethod?.postMessage({
   method: 'deviceConfig',
   data: params
});
```

## 管理后台地址
http://192.168.50.5:16041/login