欢迎来到天天文库
浏览记录
ID:34753464
大小:119.19 KB
页数:7页
时间:2019-03-10
《在apicloud平台中融云im云服务的使用教程》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、www.apicloud.com在APICloud平台中,融云IM云服务的使用教程实现功能:融云会话聊天及UI,发送表情消息使用模块:rongCloud chatBox教程开始:因为融云为第三方模块,每次调试都得需要云编译,建议大家先把UI和基本代码做好。JS插件使用:zepto.min.js一、UI的制作效果图: CSS代码:/*会话消息容器*/#messageList{padding:15px0;overflow:hidden;}/*接收消息类,左侧*/.receiver{clear:both;}.receiver.receiv
2、er-avatar{float:left;} .receiver.receiver-avatarimg{width:50px;height:50px;}.receiver.receiver-cont{background-color:#faff72;float:left;margin:020px10px15px;padding:10px;border-radius:7px;max-width:60%;position:relative;}.receiver.status{width:30px;height:30px;posi
3、tion:absolute;right:-35px;top:3px;}/*发送消息类,右侧*/.sender{clear:both;}.sender.status{width:30px;height:30px;position:absolute;left:-35px;top:3px;www.apicloud.comfont-size:18px;font-weight:700;color:#990000;}.sender.statusimg{width:30px;height:30px;}.sender.sender-avatar{fl
4、oat:right;}.sender.sender-avatarimg{width:50px;height:50px;}.sender.sender-cont{float:right;background-color:#15b5e9;margin:010px10px20px;padding:10px;border-radius:7px;color:#ffffff;max-width:60%;position:relative;}.left_triangle{height:0px;width:0px;border-width:8px;b
5、order-style:solid;border-color:transparent#faff72transparenttransparent;position:absolute;left:-16px;top:6px;}.right_triangle{height:0px;width:0px;border-width:8px;border-style:solid;border-color:transparenttransparenttransparent#15b5e9;position:absolute;right:-16px;top
6、:6px;}
7、">发送内容
8、n> 上面的就直接拿去复制使用了----------------------------------------------------------二、融云的链接融云的链接需
此文档下载收益归作者所有