注意：以下文档只适用于TOP接口，请谨慎使用！
注意：以下文档只适用于TOP接口，请谨慎使用！
1、当前H5的IM版本。我们提供了带UI的单聊接口，帮助开发者快速集成。
2、如果您只是体验IM功能，可以点击快速体验。此外我们提供了H5 Kit版本集成，推荐您使用该版本进行集成。
3、在这个集成教程中，我们使用已创建的测试应用（IM测试帐号：test0~test9，密码：123456），向您展示如何快速地集成IM服务(Html5版本)。
4、一般地，您需要入驻开发者并且创建应用后，才能集成OpenIM并且发布您的App。
| 技术支持 |
|
| 开发者技术交流群 |
|
1、跳转链接拼接。默认完成登录后会自动打开单聊页面。如果只集成jssdk，请往下看。
2、参数说明
| 参数 |
说明 |
示例值 |
| appkey |
您应用的appkey |
23018936 |
| uid |
IM登录用户userid，通过服务端创建 |
test3 |
| credential |
IM登录密码，通过服务端创建 |
123456 |
| toAppkey | 发送给哪个应用，目前需要跟appkey保持一致 | 23018936 |
| touid |
聊天对方的userid，通过服务端创建 |
test4 |
| tonick |
聊天对方显示昵称（中文需要编码） |
%E7%BE%8E%E5%A5%B3 |
| tokenFlag |
登录方式，设置64 |
64 |
| csspath |
自定义样式（链接需要编码） |
http%3A%2F%2Fg.alicdn.com%2Faliww%2Fh5-openim%2F0.0.1%2Fstyles%2Ftheme.debug.css |
3、注意：当您需要集成自己的帐号体系，登录用户user_id的获取方法请参考文档。
csspath字段说明
/**
顶部条样式
默认高度 height(37) + border(下 1)
*/
.header {
height: 50px;
/* 修改顶部条的高度 */
background: red;
/* 修改顶部条的背景颜色 */
}
/**
顶部联系人样式
*/
.header .title {
line-height: 50px;
/* 顶部条中联系人垂直居中 */
color: #fff;
/* 修改联系人字体颜色 */
}
/**
内容区域样式
*/
.content {
top: 51px;
/* 根据header中的height与border值获得, 修改内容区域距离页面顶部的距离 */
}
/**
聊天区域样式
*/
.content .inner-con {
bottom: 60px;
/* 根据input中的height padding border值获得, 修改聊天区域距离页面底部的距离 */
}
/**
移动端输入区域的样式
默认height(30) + padding(上 9 + 下 9) + border(上 1 + 下 1)
修改成height(30) + padding(上 15 + 下 15) + 没有border
*/
.input {
padding: 15px 0;
/* 修改上下边距 */
background: red;
/* 修改背景颜色 */
border: none;
/* 修改边框 */
}
/**
pc端输入区域的样式
*/
.input-wrap-pc .input {
background: blue;
/* 修改pc端中输入区域的背景颜色 */
}
/**
发送按钮(可点状态)
按钮默认宽度 width(48) + border(左 1 + 右 1)
*/
.input .send-btn {
background: blue;
/* 修改发送按钮背景颜色 */
color: #fff;
/* 修改按钮文字颜色 */
width: 60px;
/* 修改按钮宽度 */
}
/**
发送按钮(不可点状态)
*/
.input .send-btn.disabled,
.input .send-btn[disabled] {
background: #999;
/* 修改按钮背景颜色 */
color: #fff;
/* 修改按钮文字颜色 */
}
/**
修改按钮宽度需要修改输入框位置(移动端)
*/
.input .input-aera {
margin: 0 82px /* 82 = 按钮宽度(60) + 边框左右(2) + 左测空隙(10) + 右侧空隙(10) */ 0 50px;
/* 修改输入框位置 */
}
/**
修改按钮宽度需要修改输入框位置(PC端)
*/
.input-wrap-pc .input .input-area {
margin: 0 82px 0 100px;
}
/**
聊天消息区域
隐藏消息时间
*/
.dialog-con .msg .msg-time {
display: none;
}
/**
修改聊天消息
自己发送的消息样式
*/
.dialog-con .s-msg .msg-con .inner-msg-con {
background: #e7e7ea;
/* 修改背景颜色 */
color: #333;
/* 修改文字颜色 */
}
/**
修改了聊天消息的背景颜色,需要同时修改聊天消息箭头的颜色
*/
.dialog-con .s-msg .msg-con i {
border-top-color: #e7e7ea;
}
/**
对方发送的消息样式
*/
.dialog-con .o-msg .msg-con .inner-msg-con {
background: #00b4ff;
/* 修改背景颜色 */
color: #fff;
/* 修改文字颜色 */
}
.dialog-con .o-msg .msg-con i {
border-top-color: #00b4ff;
}
/**
如果不想显示聊天消息的箭头,可以直接把箭头隐藏掉
*/
/*
.dialog-con .msg .msg-con i{
display: none;
}
*/
H5版本的IM，我们提供了快速登录&单聊的页面方法，帮助开发者快速拥有即时通讯功能。
除此之外，我们还提供了JSSDK的开放，开发者能更加灵活的组装IM。
详细内容请参考JSSDK说明文档
原因：登录失败
解决方法：确保登录密码正确。
