(在APICloud平台中,融云IM云服务的使用教程.docxVIP

在APICloud平台中，融云IM云服务的使用教程实现功能：融云会话聊天及UI，发送表情消息使用模块：rongCloud? ?chatBox教程开始：因为融云为第三方模块，每次调试都得需要云编译，建议大家先把UI和基本代码做好。JS插件使用：zepto.min.js一、UI的制作效果图：?CSS代码：/*会话消息容器*/#messageList { padding: 15px 0; overflow: hidden;}/*接收消息类，左侧*/.receiver{ clear:both;}.receiver .receiver-avatar{float: left;}.receiver .receiver-avatar img { width: 50px; height: 50px;}.receiver .receiver-cont{background-color: #faff72; float: left;margin: 0 20px 10px 15px; padding: 10px; border-radius:7px; max-width: 60%; position: relative;}.receiver .status { width: 30px; height: 30px; position: absolute; right: -35px; top: 3px;}/*发送消息类，右侧*/.sender{clear:both;}.sender .status { width: 30px; height: 30px; position: absolute; left: -35px; top: 3px; font-size: 18px; font-weight: 700; color: #990000;}.sender .status img { width: 30px; height: 30px;}.sender .sender-avatar{float: right;}.sender .sender-avatar img { width: 50px; height: 50px;}.sender .sender-cont{float:right; background-color: #15b5e9; margin: 0 10px 10px 20px; padding: 10px; border-radius:7px; color: #ffffff; max-width: 60%; position: relative;}.left_triangle{ height:0px; width:0px; border-width:8px; border-style:solid; border-color:transparent #faff72 transparent transparent; position: absolute; left:-16px; top:6px; }.right_triangle{ height:0px; width:0px; border-width:8px; border-style:solid; border-color:transparent transparent transparent #15b5e9; position: absolute; right:-16px; top:6px;}div id=messageListdiv class=sender?div class=sender-avatar img src=chatTemplateExample2_files/cat.jpg?/div?div class=sender-cont div class=right_triangle/div spanimg src=发送用户头像 width=30 height=30发送内容/span div class=status!--发送状态--/div?/div/divdiv class=receiver?div class=receiver-avatar img src=对方用户头像?/div?div class=receiver-cont div class=left_triangle/div span发送内容/span?/div/div/div上面的就直接拿去复制使用了二、融云的链接融云的链接需要用到token了，我们可以在自己的服务器搭建一个生成获取token的方法。这个方法在融云的文档里面有介绍，以php为例:生成用户的token要使用到用户ID，用户昵称，用户头像。网站上的每个用户都需要对应一个token，可以将这个token写入到自己的用户表中，以便调取使用。在APP上使用融云聊天