npm package: @inficloud/infishow
Description: Infishow SDK
Latest version: 0.0.29

# Infishow

## 一. Infishow

Infishow 是思为云创提供的 SDK，用于调用微沙盘的能力和监听相关事件。

### 1.1 安装

```shell
npm i @inficloud/infishow
```

### 1.2 快速使用

与微沙盘在同一页面使用

```ts
import Infishow from "@inficloud/infishow";

Infishow.init(); // 初始化
// 监听页面切换
Infishow.$after("page:change", (event) => {
  console.log(event.data);
});
// 监听VR场景切换
Infishow.$on("after:page:subpage:change", (event) => {});
```

与微沙盘在不同页面，微沙盘在 iframe 内部

```ts
const iframeDOM = document.querySelector("iframe");
Infishow.init(iframeDOM);
```

## 二. 事件系统

Infishow 采用 发布订阅 的设计模式，可以使用订阅函数，订阅相关的事件。当事件发生时，会执行订阅所定义的回调。

### 2.1 事件标识

得益于 TS 类型系统的支持，在引入 SDK 时，使用 SDK 可以获取智能提示
![标识提示](https://inficloud.ideamake.cn/data_inficloud/upload_file_prod/4g0vk_code_example1.jpeg)

| 模块   | 事件                             | 事件标识                |
| ------ | -------------------------------- | ----------------------- |
| 页面   | 页面切换                         | page:change             |
| 页面   | 页面新增(切换到带返回按钮的页面) | page:new                |
| 页面   | 页面返回                         | page:back               |
| 页面   | 子页面切换(全景场景切换)         | page:subpage:change     |
| 全景   | 热点点击                         | page:hotspot:click      |
| 全景   | 图层点击                         | page:layer:click        |
| 全景   | 缩略图点击                       | page:thumb:click        |
| 全景   | 热点分组点击                     | page:hotspotgroup:click |
| H5     | 详情点击                         | page:detail:click       |
| H5     | 总览点击                         | page:overview:click     |
| H5     | H5 菜单点击                      | page:menu:click         |
| H5     | H5 按钮点击                      | page:button:click       |
| 微沙盘 | 辅助按钮点击                     | button:click            |
| 微沙盘 | 菜单点击                         | menu:click              |
| 微沙盘 | 加载成功                         | sandbox:load            |
| 微沙盘 | 带看开始                         | sandbox:vrview:start    |
| 微沙盘 | 带看结束                         | sandbox:vrview:end      |

### 2.2 事件回调

监听框架的回调都会返回 `EventResonse` , 可以根据 `EventResonse` 中的数据，进行自定义操作

```ts
interface EventResponse {
  data: Object; // 相关事件的数据
  preventDefault: () => void; // 可阻止默认事件
  type: string; // 事件类型标识
}
```

针对不同的事件标识，返回值会进行不一样的提示

![返回提示](https://inficloud.ideamake.cn/data_inficloud/upload_file_prod/k9pug_code_example2.jpeg)

### 2.3 相关方法

#### 1. $on

监听具体事件，回调参数中包含相关数据和阻止默认行为的方法

- `eventCode` 事件标识
- `callback` 事件回调

```ts
Infishow.$on('before:menu:click', function(event) {
    event.preventDefault() // 可阻止默认行为
    console.log(event.data) // 获取事件的数据
})

Infishow.$on('after:menu:click', function(event) {
    console.log(event.data)
}
```

#### 2. $off

取消事件监听

- `eventCode` 事件标识
- `callback` 事件回调

```ts
Infishow.$off("before:menu:click", eventHandler);
```

#### 3. $before

事件前钩子,等同于$on('before:< eventCode >', eventHandler)

- `eventCode` 事件标识
- `callback` 事件回调

```ts
Infishow.$before("menu:click", eventHandler);
```

#### 4. $after

事件后钩子, 等同于$on('after:< eventCode >', eventHandler)

- `eventCode` 事件标识
- `callback` 事件回调

```ts
Infishow.$after("menu:click", eventHandler);
```

#### 5. $emit

主动分发事件

- `eventCode` 事件标识
- `data` 事件数据(可选)

```ts
Infishow.$emit("after:menu:click", {});
```

SDK支持在多个JS中引入SDK,用SDK进行相互通行

## 三. 模块

> 实验性 🧪，API 可能会变动

Infishow 提供多种模块，可以使用不同的模块，调用微沙盘的系统能力，得到模块相关的信息。

### 3.1 page

`page` 模块提供页面操作的能力，可以通过该模块获取页面数据，执行切换页面等操作

### 3.2 sandbox

`sandbox` 模块提供沙盘的相关能力，可以获取微沙盘的相关信息

### 3.3 vr

`vr` 模块提供全景物料的操作能力，可以获取全景相关的数据

### 3.4 menu

`menu` 模块提供菜单的相关能力，可以对菜单进行显示隐藏，获取菜单的数据

### 3.5 button

`button` 模块提供按钮的相关能力，可以获取按钮相关的数据

### 3.6 constant

`constant` 模块包含了 Infishow 的相关枚举，例如皮肤枚举，按钮类型枚举

### 3.7 consultant

`constant` 模块提供置业顾问模块的操作能力