在APICloud平台中融云IM云服务使用教程.docx

在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上面的就直接拿