@inficloud/infishow v0.0.29

Infishow

一. Infishow

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

1.1 安装

npm i @inficloud/infishow

1.2 快速使用

与微沙盘在同一页面使用

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 内部

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

二. 事件系统

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

2.1 事件标识

得益于 TS 类型系统的支持，在引入 SDK 时，使用 SDK 可以获取智能提示

2.2 事件回调

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

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

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

2.3 相关方法

1. $on

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

• eventCode 事件标识
• callback 事件回调

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 事件回调

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

3. $before

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

• eventCode 事件标识
• callback 事件回调

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

4. $after

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

• eventCode 事件标识
• callback 事件回调

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

5. $emit

主动分发事件

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

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 模块提供置业顾问模块的操作能力