H5KIT聊天集成

查看新版文档

接入方式

在页面中加入如下代码 ：

<!--[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.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js" charset="utf-8"></script>
<script>
    window.onload = function(){
        WKIT.init(options);
    }
</script>

如果想要强制使用pc端的kit

<!--[if lt IE 9]>
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- 强制使用pc版本的kit -->
<!--<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js?pc=1" charset="utf-8"></script>-->

如果想要强制使用移动端的kit

<!--[if lt IE 9]>
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- 强制使用移动端版本的kit -->
<!--<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js?mobile=1" charset="utf-8"></script>-->

函数

init

初始化方法;
接收一个object, 具体见初始化参数, 请参考 示例1

sendMsg

发送消息方法，只能在init之后才能调用;
接受一个object，请参考 示例10

resize

当聊天窗口的容器宽高变化时，可以调用此方法，重新计算聊天窗口的大小;
如果未传container或者container为body时，不需要调用此方法，程序内部会自动调用此方法;
接收一个object，传入width/height, 请参考示例6

switchTouid

当WKIT已经初始化完后，需要修改聊天对象（touid）/ 聊天对象的头像(toAvatar)，可以调用此方法，修改touid , toAvatar
接收一个object，具体请参考示例9

destroy

销毁（解绑事件，停止接受消息等) 请参考 示例8

初始化参数

必填项

uid:         [String]          需要登录的用户nick
appkey:      [Int]             appkey
credential:  [String]          需要登录的用户密码( 就是通过 [taobao.openim.users.add] (//open.taobao.com/doc2/apiDetail.htm?apiId=24164)导入的password字段)
touid:       [String]          需要聊天的nick

选填项

容器及大小配置参数

container: [DOM Object]    渲染容器;  默认值: document.body
width:     [Int]           渲染容器的宽度 默认: container的宽度
height:    [Int]           渲染容器的高度 默认: container的高度

注意:

1. 当你未传container时，推荐使用window.open('你们的聊天窗口地址', '窗口名字随便取', 'toolbar=no, status=no,scrollbars=0,resizable=0,menubar＝0,location=0,width=700,height=500');的方式打开聊天窗口，这样可以保证在不同页面点击聊天按钮，不会打开多个聊天窗口
2. 如果你在初始化的时候，传入的container是隐藏(display:none)的，请务必传入width/height，否则计算的width/height会不准确；或者可以使用visibility:hidden来隐藏container

展示效果配置参数

logo:           [String]        左上角logo,  移动端设置无效
avatar:         [String]        登录用户的头像
toAvatar:       [String]        对方用户的头像
theme:          [String]        主题名称
themeBgColor:   [String]        主题背景色，示例: #f60, #dc2a2e
themeColor:     [String]        主题文字颜色 默认值: #fff
msgBgColor:     [String]        消息背景色 默认值: themeBgColor
msgColor:       [String]        消息文字颜色 默认值: #4a4a4a
titleBar:       [Boolean]       是否显示顶部title条, PC端设置无效 默认值: true
title:          [Boolean]       展示的title PC默认值: touid，移动默认值: false
imgUploader:    [Boolean]       是否显示上传图片按钮 默认值: true
sendBtn:        [Boolean]       是否显示发送按钮 默认值: false
pluginUrl:      [String]        左侧自定义区域url, 移动端设置无效, 如果不传左侧将隐藏 ，示例：http://www.taobao.com/market/seller/openim/plugindemo.php
customUrl:      [String]        右侧自定义区域url, 如果不传相应的区域将隐藏，示例：pc端：http://www.taobao.com/market/seller/openim/customdemo.php，移动端：http://www.taobao.com/market/seller/openim/mitem.php
placeholder:    [String]        输入框默认文案 默认值: 说点什么吧    
welcomeMsg:   [String]    显示在对方消息位置的默认欢迎文案，一般用在客服聊天时，用户登录后，在客服方的消息位置显示欢迎文案

注意

1. logo传入的尺寸推荐[20x20]px
2. avatar传入的尺寸在pc端推荐[40x40]px, 在移动端推荐[2x2]rem（1rem = 屏幕宽度/320*20）
3. toAvatar传入的尺寸在pc端推荐[150 x 134]px, 在移动端推荐[2.5x2.5]rem
4. 内部集成了10种主题，theme可选值ruby, yellow, orange, green, lightgreen, blue, lightblue, purple, pink, red, 请参考示例2
5. 关于themeBgColor与theme的优先级, 如果同时设置了这2个参数，会以themeBgColor为准
6. 只有设置了themeBgColor，themeColor、msgBgColor、 msgColor才会生效
7. （0.2.8版本之前） 如果设置了title，title最终显示的效果为 title + '-' + touid, 如果在PC端不想显示默认的在线客服，可以设置title 为’ ’(空格)
8. （0.2.8版本及之后） 如果设置了title，title最终显示的效果为 title , 如果在PC端不想显示默认的在线客服，可以设置title 为’ ’(空格)
9. pluginUrl和customUrl的页面推荐尺寸PC端[150 x height], 尽量不要出现滚动条; customUrl移动端推荐尺寸[12 x 2.5]rem

消息相关参数

autoMsg:                [String]        登录后自动给touid发送的消息内容，默认不发送
autoMsgType:            [Int]           autoMsg的消息类型，默认值: 0
sendMsgToCustomService: [Boolean]       使用客服模式, 默认值: false
groupId:                [String]        客服模式, 可以传入分组id, 默认为空
customData:             [Object]        上传自定义数据, 在千牛插件中显示

注意

1. autoMsgType可选的值有0, 1; 0表示文本消息; 1表示图片消息, autoMsg直接填写图片url; url必须是通过发送图片接口后得到的url，否则在其他端或者对方收到的消息都无法正常展示图片，只会以文本的方式展示
2. 使用sendMsgToCustomService前, 需要先去百川控制台设置下E客服, 绑定E客服账号, touid传入在控制台绑定的E客服账号
3. 目前customData只支持上传item宝贝相关的数据，并且需要去百川控制台, 设置接口地址, 该接口需要支持获取宝贝详情; 当发送第一条消息时, 同时会将此数据通过不同的接口发送出去, 具体请参考示例7

回调

onLoginSuccess:                 [Function]      登录成功后的回调
onLoginError:                   [Function]      登录失败后的回调
onMsgReceived:                  [Function]      收到消息后的回调
onMsgSent:                      [Function]      消息发送后的回调
beforeImageUploaderTrigger:     [Function]      接管上传图片按钮的点击
onUploaderSuccess:              [Function]      上传图片成功回调, 返回图片地址
onUploaderError                 [Function]      上传图片失败回调, 返回上传错误原因
onBack:                         [Function]      移动端点击返回的回调 默认值: false
onAudioReceived:            [Function]      当收到语音消息时，可以通过这个回调，修改消息中显示的DOM，默认语音消息不展示，详见示例10

注意

1. beforeImageUploaderTrigger主要用在移动端, 某些app的webview中, 点击input[type=file]元素无效, 无法弹出图片选择器, 可以用此回调, 接管点击事件, 通过你们自己的native的能力, 打开图片选择器, 并将图片转换成base64后, 再上传, 具体参考示例5
2. 只有设置了onBack, 才会在顶部条上出现返回按钮
3. 通常来说语音在web端无法播放，如果你有办法能够播放，那么可以使用这个回调讲语音消息展示出来

代码示例

示例1: 正常初始化

// 页面内展示
WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
    pluginUrl: 'http://www.taobao.com/market/seller/openim/plugindemo.php'
});

// 全屏展示
WKIT.init({
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
    pluginUrl: 'http://www.taobao.com/market/seller/openim/plugindemo.php'
});

示例2: 设置主题或者自定义颜色

// 设置内置主题
WKIT.init({
    container:  document.getElementById('J_demo'),
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    theme: 'pink'
});

// 设置自定义主题
WKIT.init({
    container: document.getElementById('J_demo'),
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    themeBgColor: '#2db769',
    themeColor: '#fff',
    msgBgColor: '#2db769',
    msgColor: '#fff'
});

示例3: 开启客服模式

WKIT.init({
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: '你的e客服主账号',
    sendMsgToCustomService: true
});

示例4: 登录自动发送消息

WKIT.init({
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    autoMsg: 'http://interface.im.taobao.com/mobileimweb/fileupload/downloadPriFile.do?type=1&fileId=4673fff65033c1a8636cb046e62c4691.jpg&suffix=jpg&width=420&height=420&wangxintype=1&client=ww',
    autoMsgType: 1
});

示例5: 接管上传图片按钮

WKIT.init({
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    beforeImageUploaderTrigger: function(event, uploadFn){
        // 打开native的文件选择器
        var file = Native.openFileSelector();

        // 把文件转换成base64后的字符串
        var base64Img = Native.base64(file);
        // 获得文件的类型 png || jpg
        var ext = getFileExt(file);
        uploadFn({
            ext: ext,
            base64Img: base64Img
        });
    },
    onUploaderSuccess: function(url){
        console.log(url);
    },
    onUploaderError: function(error){
        console.log(error);
    }
});

示例6: 重新计算聊天窗口的大小

WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2'
});

// 手动传入大小
setTimeout(function(){
    var demo = document.getElementById('J_demo');
    demo.style.width = '500px';
    demo.style.height = '300px';

    WKIT.resize({
        width: 500,
        height: 300
    });
}, 3000);

// 自动计算大小
setTimeout(function(){
    var demo = document.getElementById('J_demo');
    demo.style.width = '500px';
    demo.style.height = '300px';

    WKIT.resize();
}, 3000);

示例7: 上传宝贝id，以便在千牛端显示（需要服务端支持获取宝贝详情的接口）

WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    customData: {
        item: {
            id: 宝贝id
        }
    }
});

示例8: 销毁聊天窗口

WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2'
});

setTimeout(function(){
    WKIT.destroy();
    var demo = document.getElementById('J_demo');
    demo.parentNode.removeChild(demo);
}, 1000)

示例9：切换聊天对象

WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2'
});

setTimeout(function(){
    WKIT.switchTouid({
            touid: 'visitor3',
            hasPrefix: false, // 选填
            groupid: 1111, // 选填
            sendMsgToCustomService: false // 选填
        });
}, 3000)

setTimeout(function(){
    WKIT.switchTouid({
            touid: 'iwangxinvisitor5',
            toAvatar: 'https://xxxx.image.com/xx.png',
            hasPrefix: true, // 选填
            groupid: 1111, // 选填
            sendMsgToCustomService: false // 选填
        });
}, 6000)

示例10：收到语音消息后展示

WKIT.init({
    container: document.getElementById('J_demo'),
    width: 700,
    height: 500,
    uid: 'ww1',
    appkey: 23015524,
    credential: '123456',
    touid: 'ww2',
    onAudioReceived: function(content){
         return '<audio src="' + content + '"  controls="controls"></audio>';
     },
});

FAQ

云旺 h5集成 js登录频繁出现timeout

H5集成是否可以同时在多台设备登录

好友管理