@tcac/ssp-app-embed v1.0.8

SSP SDK

属性定义：

• app : string 应用连接方唯一标识
• action-type ?: string 打开的页面类型，可用值：dashboard | flow-list | create-flow | edit-flow | view-flow | template
• params ?: string 应用附加参数，请使用 JSON.stringify 将参数 JSON 对象转换为字符串
  • 如果action-type设置为create-flow，则 params 必须包含 templateId 字段，例如: {"templateId":1}
  • 如果action-type设置为edit-flow | view-flow，则 params 必须包含 flowId 和 version 字段，例如: {"flowId": xxxx, "version": 1}
• theme ?: string<light|dark> 风格设置，目前仅支持 light
• dev ?: boolean 是否打开调试模式
• Any other HTML attributes...

使用方法：

UMD 模式

1. 在页面适当位置，引入对应版本的 sdk 文件

<script src="//hiflow.tencent.com/embed/v1.0/ssp.umd.js"></script>

2. 在 HTML 指定的容器中，直接使用 ssp-app-embed 即可

<div style="height: 600px; width: 1000px;">
  <ssp-app-embed app="xxx" />
</div>

React

安装：

npm install @tcac/ssp-app-embed -S

import '@tcac/ssp-app-embed';

export default function App() {
  return (
    <div>
      <h1>Hello SaaS Solution Platform</h1>
      <div style={{ width: '1000px', height: '600px' }}>
        <ssp-app-embed app="xxx" />
      </div>
    </div>
  );
}

Vue

<template>
  <div>
    <h1>Hello SaaS Solution Platform</h1>
    <div style="width: 1000px, height: 600px">
      <ssp-app-embed app="xxx" />
    </div>
  </div>
</template>

<script>
import '@tcac/ssp-app-embed';

export default {
  components: {

  },
  props: {

  },
  data() {

  },
  // ...
}

通过上面的简单配置，即可满足绝大部分应用场景。

Methods

页面向 SSP 传送数据是通过 post(eventName: string, eventData: any) 方法来实现的：

• eventName：事件名称
• eventData：向 SSP 发送的数据

如：

embed.post('whoami', {
  name: 'zhangsan',
  age: 18,
});

Events

SSP 向页面传输数据是通过事件通知来实现的，ssp-app-embed 支持的事件通知如下：

• inited：组件初始化完毕后触发
• propsChanged：组件属性变化后触发
• pageEnter：页面切换时触发
• 自定义：自定义事件名称

JavaScript:

const embed = document.querySelector('ssp-app-embed');

embed.addEventListener('pageEnter', e => {
  console.log(e.detail);
});

React:

const ref = React.useRef(null);
React.useLayoutEffect(() => {
  ref.current.addEventListener('pageEnter', e => {
    console.log(e.detail);
  });
}. []);

return (
  <div>
    <ssp-app-embed ref={ref} ... />
  </div>
);

有了上面的方法和事件，我们可以双向处理页面与 SSP 之间的交互，下面例子的作用是，页面通过 post() 方法主动向 SSP 发送消息，为了接收 SSP 的响应数据，我们为 ssp-app-embed DOM 绑定了所要监听的事件：

embed.addEventListener('whoami', e => {
  console.log('iam', e.detail);
});
embed.post('whoami', {
  name: 'zhangsan',
  age: 18,
});