注意:以下文档只适用于TOP接口,请谨慎使用!

H5快速集成

更新时间:2015/11/23 访问次数:18788

前置准备

1、当前H5的IM版本。我们提供了带UI的单聊接口,帮助开发者快速集成。

2、如果您只是体验IM功能,可以点击快速体验。此外我们提供了H5 Kit版本集成,推荐您使用该版本进行集成。

3、在这个集成教程中,我们使用已创建的测试应用(IM测试帐号:test0~test9,密码:123456),向您展示如何快速地集成IM服务(Html5版本)。

4、一般地,您需要入驻开发者并且创建应用后,才能集成OpenIM并且发布您的App。

技术支持
开发者技术交流群

快速集成

Step1 按照规范拼接跳转

1、跳转链接拼接。默认完成登录后会自动打开单聊页面。如果只集成jssdk,请往下看。

https://chat.im.taobao.com/login/oauth?appkey=23018936&uid=test3&credential=123456&toAppkey=23018936&touid=test4&tonick=%E7%BE%8E%E5%A5%B3&tokenFlag=64&csspath=http%3A%2F%2Fg.alicdn.com%2Faliww%2Fh5-openim%2F0.0.1%2Fstyles%2Ftheme.debug.css

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的获取方法请参考文档

 

单聊页面UI自定义

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;
}
*/

JSSDK说明

H5版本的IM,我们提供了快速登录&单聊的页面方法,帮助开发者快速拥有即时通讯功能。

除此之外,我们还提供了JSSDK的开放,开发者能更加灵活的组装IM。

详细内容请参考JSSDK说明文档

常见FAQ

访问登录链接出现500错误

        原因:登录失败

        解决方法:确保登录密码正确。

FAQ

关于此文档暂时还没有FAQ
返回
顶部