@tcac/qinglian-embed v1.0.4

qinglian SDK

属性定义：

• client-id : string 连接方唯一标识
• action-type ?: string 打开的页面类型，可用值：dashboard | create-flow
• code ?: string 免登授权码
• params ?: string 应用附加参数，请使用 JSON.stringify 将参数 JSON 对象转换为字符串
  • 如果action-type设置为create-flow，则 params 必须包含 templateId 字段，例如: {"templateId":1}
• dev ?: boolean 是否打开调试模式
• Any other HTML attributes...

使用方法：

UMD 模式

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

<script src="..."></script>

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

<div style="height: 600px; width: 1000px;">
  <qinglian-embed client-id="xxx" />
</div>

React

安装：

npm install @tcac/qinglian-embed -S

import '@tcac/qinglian-embed';

export default function App() {
  return (
    <div>
      <h1>Hello Qinglian</h1>
      <div style={{ width: '1000px', height: '600px' }}>
        <qinglian-embed client-id="xxx" />
      </div>
    </div>
  );
}

Vue

<template>
  <div>
    <h1>Hello Qinglian</h1>
    <div style="width: 1000px, height: 600px">
      <qinglian-embed client-id="xxx" />
    </div>
  </div>
</template>

<script>
import '@tcac/qinglian-embed';

export default {
  components: {

  },
  props: {

  },
  data() {

  },
  // ...
}

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

Methods

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

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

如：

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

Events

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

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

JavaScript:

const embed = document.querySelector('qinglian-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>
    <qinglian-embed ref={ref} ... />
  </div>
);

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

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