Web Notes

主题

微组件-客服中心/插件中心等接入及使用 ​

一、如何加载微组件 ​

二、客服中心功能介绍 ​

  • 如何加载客服中心微组件
javascript
const serviceCenter = await loadMicroComponent({
    component: 'serviceCenter',
})

1、websocket模块 ​

javascript
const socketInstance = await serviceCenter.useSocketCenter({
    onEvent: ({event, data}) => {
        //event：状态 socketStatus、消息 socketData
    }
})
//发送消息
socketInstance.socketSend(e)

2、电话模块，已对接北恩话机、易星ip话机、电信云呼、阿里云呼 ​

javascript
const callInstance = await serviceCenter.useCallCenter({
    onEvent: ({event, data}) => {
        //event：状态 callStatus、消息 callData、通话号码 callPhone
    }
})
//打开拨打电话的弹框
callInstance.makeCall({
    name,//String，姓名
    phone,///String，电话号码 
    encrypt,//Boolean，是否加密，默认false
    isDevice,//Boolean，是否是设备，默认false
    handler,//Function，通话事件
    beforeCall,//Function，点击拨打按钮前事件
    beforeHangup//Function，点击挂断按钮前事件
})
//其他API待补充...

3、智能设备模块，已对接小度智能屏 ​

javascript
const smartInstance = await serviceCenter.useSmartCenter({
    onEvent: ({event, data}) => {
        //event：状态 smartStatus、消息 smartData
    }
})
//打开拨打电话的弹框
smartInstance.makeCall({
    type,//设备类型 1 小度智能屏
    deviceId//设备id
})

三、插件中心功能介绍 ​

  • 如何加载插件中心微组件
javascript
const pluginCenter = await loadMicroComponent({
    component: 'pluginCenter'
})

1、IC卡读卡器/扫码枪模块 ​

javascript
// 使用此模块
const scanCard = pluginCenter.useScanCard()
javascript
// 开始读卡，scanType为读卡类型:
// 1 通用读卡器读通用卡 
// 2 卡联读卡器读卡联的卡  
// 3 通用读卡器读卡联的卡 
// 4 扫码枪扫描条形码
const r = await scanCard.openScan(scanType)
// 返回结果示例-正常
{
    "data": "123",
    "type": 0,
    "status": true,
    "messgae": "执行成功"
}
// 返回结果示例-异常
{
    "type": 1,
    "status": false,
    "messgae": "主动关闭"
}
javascript
//开启扫码/读卡模式
scanCard.startScan({
    success: (r) => {
        console.log(r) 
    }
})
//返回结果示例
{
    "data": "123",
    "status": true,
    "messgae": "执行成功"
}

//关闭扫码/读卡模式
scanCard.endScan()

2、身份证读卡器模块 ​

javascript
// 使用此模块
const scanIdentity = pluginCenter.useScanIdentity()
javascript
// 开始读卡，scanType为读卡器类型：
// 1 旧读卡器 仅可读到姓名和身份证
// 2 新读卡器 可读身份证详细信息
const r = await scanIdentity.doScan(scanType)

四、摄像头播放器功能介绍 ​

  • 如何加载摄像头播放器微组件
javascript
const videoPlayer = await loadMicroComponent({
    component: 'videoPlayer',
    container //挂载节点元素，如#micro-video-player
})
  • 页面卸载时需销毁微组件
javascript
videoPlayer.destoryMicroComponent()

1、初始化，已对接乐橙云、萤石云、海康h5player ​

javascript
await videoPlayer.init({
    deviceIds, //Array 摄像头设备id列表
    pollingInterval, //Number 轮询间隔时间，默认5*60秒
    screenDisplay, //Number 画面显示，默认4个
    change //Function 分页切换事件
})

2、重置尺寸 ​

javascript
videoPlayer.resize()