侧边栏模块化-自定义卡片功能说明
侧边栏模块化-自定义卡片
功能概述
使用场景
接入指南
流程概述
接入步骤
1.
2.
3.
4.
后端服务器
接收code的后端接口
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| corp_id | str | 是 | 公司id |
| code | str | 是 | 信息兑换凭证 |
| origin | str | 是 | 请求源 |
自定义卡片模块创建和配置
创建自定义卡片模块
1.
1.
2.
1.
配置自定义卡片布局
修改卡片的间距和高度
1.
2.
3.
API列表
OpenAPI接口
获取当前员工和客户信息
前端sdk接口
功能概述
引入JS文件
<script src="https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/weiban-client-js-sdk.0.2.js"></script>
Copy刷新页面
wb.refresh()
Copy显示对话框
toast 类型
wb.showDialog("toast", toastType, message)
Copy| 参数 | 类型 | 说明 | ||||
|---|---|---|---|---|---|---|
| toastType | "success" \ | "warning" \ | "error" | 成功 \ | 警告 \ | 失败 |
| message | string | 弹出消息 |
全屏页面类型
wb.showDialog("page", url)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| url | string | 页面链接 |
抽屉类型
wb.showDialog("drawer", url, height)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| url | string | 页面链接 |
| height | number | 弹窗高度，设计稿对应750px |
变更卡片属性
设置卡片可见性
wb.changeCardProperty("visibility", value)
Copy| 参数 | 类型 | 说明 | ||
|---|---|---|---|---|
| value | "visible" \ | "hidden" | 可见 \ | 隐藏 |
设置卡片高度
wb.changeCardProperty("height", value)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| value | number | 卡片高度，设计稿对应750px |
设置卡片上边距
wb.changeCardProperty("marginTop", value)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| value | number | 卡片上边距，设计稿对应750px |
数据存取
获取数据
wb.getStorageData(scope,key,callback)
Copy| 参数 | 类型 | 说明 | ||
|---|---|---|---|---|
| scope | "session" \ | "target" \ | "global" | session:临时会话，页面刷新消失target:针对同一个聊天对象是持久化的，多次打开对应同一聊天对象的侧边栏时数据不会消失global:持久会话，所有聊天对象都可以访问，页面刷新不会消失 |
| key | string | 需要获取值的键 | ||
| callback | function | 回调方法，参数为获取到的值 |
赋值数据
wb.setStorageData(scope,key,value)
Copy| 参数 | 类型 | 说明 | ||
|---|---|---|---|---|
| scope | "session" \ | "target" \ | "global" | session:临时会话，页面刷新消失target:针对同一个聊天对象是持久化的，多次打开对应同一聊天对象的侧边栏时数据不会消失global:持久会话，所有聊天对象都可以访问，页面刷新不会消失 |
| key | string | 需要赋值的键 | ||
| value | string | 需要赋值的值 |
自定义事件
设置自定义事件监听器
wb.addCustomEventListener(eventName,handler)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| eventName | string | 事件名 |
| handler | function | 需要处理的回调函数 |
发送自定义事件
wb.sendCustomEvent(eventName,data)
Copy| 参数 | 类型 | 说明 |
|---|---|---|
| eventName | string | 事件名 |
| data | any | 传递的数据 |
发送消息到当前会话框
// 发送方式
wb.sendCustomEvent('WB_SEND_CHAT_MESSAGE',{data})
//监听发送消息的调用返回
wb.addCustomEventListener('WB_SEND_CHAT_MESSAGE',(res)=>{
console.log(res)
})| 参数 | 类型 | 说明 |
|---|---|---|
| eventName | WB_SEND_CHAT_MESSAGE | 指定事件名 |
| data | 如下介绍 | 传递的数据 |
代码demo
修改于 2023-06-05 07:25:52