OpenIM在线客服咨询聊天Html5_阿里百川云旺客服聊天实例下载

最近在研究阿里百川的云旺客服聊天系统，需要集成到App里面，如果用原生写的话得分别集成Android和IOS，还是很麻烦的，所以我的方案是写一个H5页面让App里面调用URL就好了，恰好云旺的客服也提供的H5的SDK，下面分享一下集成方法，和遇到的问题。问题主要有两个。

1、聊天气泡显示问题，显示会错位，然后行高也不对。

2、H5发送一条消息的时候会显示两条一模一样的消息。

1、引入JS SDK文件

<!-- IE8及以下支持JSON -->
<!--[if lt IE 9]>
	<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- 自动适配移动端与pc端 -->
<script src="https://g.alicdn.com/aliww/??h5.imsdk/2.1.5/scripts/yw/wsdk.js,h5.openim.kit/0.5.0/scripts/kit.js" charset="utf-8"></script>

2、初始化聊天系统

window.onload = function(){
    WKIT.init({
        uid: ´dwtedx´,//xinsuiyundong
        appkey: 23445443,
        credential: ´123456´,
        touid: ´雪灵菱´, // 在百川控制台设置的E客服账号
        sendMsgToCustomService: true,
        hideLoginSuccess: true,
        welcomeMsg: "你好，工都名车客服MM竭诚为您提供服务！",
        theme: ´orange´ //ruby, yellow, orange, green, lightgreen, blue, lightblue, purple, pink, red
    });
}

3、解决当前版本聊天气泡显示问题

<style>
    .wkit-msg-item{
        padding: .25rem .4rem;
        line-height: .8rem;
        margin-top: .4rem;
    }
    .wkit-arr {
        margin-top: .4rem;
    }
</style>

4、H5发送一条消息的时候会显示两条一模一样的消息

WKIT.init({
    uid: ´dwtedx´,//xinsuiyundong
    appkey: 23445443,
    credential: ´123456´,
    touid: ´雪灵菱´, // 在百川控制台设置的E客服账号
    sendMsgToCustomService: true,
    hideLoginSuccess: true,
    welcomeMsg: "你好，工都名车客服MM竭诚为您提供服务！",
    theme: ´orange´, //ruby, yellow, orange, green, lightgreen, blue, lightblue, purple, pink, red
    onMsgSent: function(data){
        console.dir(data);
        //修复消息重复，移除最后一条消息，非官方解决办法
        var wkits = document.getElementsByClassName("wkit-clear");
        var wkit = wkits[wkits.length - 1];
        var parent = document.getElementById("J_wkitMsgContent");
        parent.removeChild(wkit);//通过父节点移除wkit
    }
});

以上就是我在使用阿里百川的云旺客服聊天系统方法和遇到的问题以及问题是解决方案，我想，随着版本的更新，H5发送一条消息的时候会显示两条一模一样的消息的这个BUG肯定会被解决的，以后大家注释或删除相关代码就可以了。

阿里百川的云旺客服聊天系统实例源代码下载链接: 阿里百川的云旺客服聊天系统 密码: 7gah