Android 和 IOS 美洽多客服系统，即时通信插件

Android 和 IOS 美洽客服插件

一、 使用插件前准备

• 1.首先要到美洽客服官网 https://www.meiqia.com申请一个帐号;
• 2.登录后，到设置-> SDK ->移动应用 SDK 界面下，有一个 AppKey, 如果没有，要先创建一个应用。
• 3.获得 appkey 后，在uniapp 项目中，勾选云端插件时，需要填写这个AppKey来进行打包。 

二、插件方法介绍

三、实例化插件

复制代码const plug=uni.requireNativePlugin("Html5app-Meiqia");

四、打开默认客服对话框

复制代码plug.open();

五、打开带有参数设置的对话框

• 打开带有预发送内容的对话框

  复制代码plug.open({"text":"我是预发送的内容"});

• 打开绑定用户自定义ID的对话框

  复制代码plug.open({"customizedId":"userid123456"});

• 打开绑定美洽顾客 ID的对话框

  复制代码plug.open({"clientId":"9eb5dd3525229ea1eb9fd325ea135ae7"});

• 打开指定客服ID 的对话框

  复制代码plug.open({"agentId":"9eb5dd3525229ea1eb9fd325ea135ae7"});

• 打开指定客服组 ID 的对话框

  复制代码plug.open({"groupId":"9eb5dd3525229ea1eb9fd325ea135ae7"});

需要多少时以上参数可以组合写在一起

六、打开带有用户自定义信息的对话框

• 打开带有用户信息默认客服对话框

  复制代码    plug.openUser({
      "name":"富坚义",
      "avatar":"https://s3.cn-north-1.amazonaws.com.cn/pics.meiqia.bucket/1dee88eabfbd7bd4",
      "gender":"男",
      "tel":"13422929123"
      });

• 用户信息包含以下的字段， 以下字段是美洽定义好的，开发者可通过上方提到的接口，直接对下方的字段进行设置：

七、打开留言页面

复制代码plug.openMessage();

八、获取未读消息数量

复制代码plug.getCount(ret=>{
    if(ret.code==1)
    {
       ret.count;
    }
});

九、设置让当前用户上线

复制代码plug.setCurrentClientOnline(ret=>{

});

十、设置让当前用户离线

复制代码plug.setClientOffline();

十一、绑定美洽 id 并设置上线

复制代码plug.setClientOnlineWithClientId({clientId:"userid"},ret=>{

});

十二、监听接收新消息

• 在未开启【离线消息推送】的情况下，可以通过registerReceiver 方法来监听，是否有新的消息，

复制代码plug.registerReceiver(ret=>{

});

十三、取消监听接收新消息

复制代码plug.unregisterReceiver();

十四、获取未读消息列表

复制代码plug.getMessageList(function(e){

});

十五、更新消息，阅读状态

• messageId 消息id
• isRead 将替换的状态, true 或 false

复制代码plug.updateMessage({messageId:"",isRead:true});

十六、获取当前 SDK 版本号

复制代码let v=plug.getMeiqiaSDKVersion();

十七、配置信息

复制代码plug.Config({
"titleGravity":"left",
"isVoice":false,
"isAvatar":true,
"isSound":true,
"enableEvaluationButton":false,
"navTitleColor":"#ffffff",
"navBarTintColor":"#ffffff",
"navBackgroundColor":"#000000" 
"rightMsgTextColor":"#000000",
"rightBubbleColor":"#99999",
"leftMsgTextColor":"#000000",
"leftBubbleColor":"#509ee1"
});

参数说明

1.苹果 IOS 聊天界面 UI 颜色风格自定义配置 , 以下参数只对IOS 有效果

复制代码plug.Config({
"navTitleColor":"#E6E6EA",
"navBarTintColor":"#ffffff",
"navBackgroundColor":"#6C9EFC" 
"rightMsgTextColor":"#ffffff",
"rightBubbleColor":"#0BB9B6",
"leftMsgTextColor":"#000000",
"leftBubbleColor":"#E6E6EA"
});

参数说明

安卓 Android 聊天对话框 UI 颜色配置, 是一个xml 文件，填写好

放在项目插件的android/res/values/ 目录下, 详情请下载右上角，示例项目参考。

复制代码<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--通过覆盖资源id的形式自定义美洽UI START-->

    <!--标题栏背景颜色-->
    <color name="mq_titleBackground">#6C9EFC</color>

    <!--标题栏字体颜色-->
    <color name="mq_titleTextColor">#E6E6EA</color>

    <!--聊天界面左边气泡背景颜色-->
    <color name="mq_leftChatBubbleColor">#E6E6EA</color>

    <!--聊天界面左边气泡文字颜色-->
    <color name="mq_leftChatTextColor">#000000</color>

    <!--聊天界面右边气泡背景颜色-->
    <color name="mq_rightChatBubbleColor">#0BB9B6</color>

    <!--聊天界面右边气泡文字颜色-->
    <color name="mq_rightChatTextColor">#ffffff</color>

    <!--通过覆盖资源id的形式自定义美洽UI END-->
</resources>

安卓 Android 扫一扫 下载 demo 体验