html5仿微博web、微信网页版聊天系统实战开发

h5仿微信网页端|仿微博web聊天界面|web端聊天室|桌面端聊天系统

html5聊天系统场景应用还是蛮多的，如 在线客服沟通系统、淘宝网页端旺旺等，之前就有开发过h5移动端聊天室，如是就忍不住开发了个仿新浪微博web版聊天项目，功能效果还是蛮不错哒。

使用了html5+css3+jQuery+swiper+wcPop等技术进行开发架构，实现了消息、表情发送，发送图片，还有上传附件及自定义推送内容，另外也加入了个人名片、上传附件、分享等样式，功能上实现了消息、表情的发送，图片、视频全屏预览。

// 2、设置聊天

$("body").on("click", ".J__setChat", function(e){

    var that = $(this), contextTpl, menuNode = $("<div class='wc__contextmenu animated anim-fadeIn'></div>");

    contextTpl = "<div class='wc__contextmenuSetChat menu'><a class='status online' href='#'>在线</a><a class='status offline' href='#'>离开</a><a class='status busy' href='#'>忙碌</a><a class='status invisible' href='#'>隐身</a><a class='deliver'></a><a href='#'>关闭桌面通知</a><a href='#'>关闭提醒声音</a><a href='#'>退出</a></div>";

    if (!$(".wc__contextmenu").length) {

        $("body").append(menuNode.html(contextTpl));

        posFix();

    } else {

        $(".wc__contextmenu").hide().html(contextTpl).fadeIn(250);

        posFix();

    }

    function posFix() {

        $(".wc__contextmenu").css({

            position: "absolute",

            left: e.pageX,

            top: e.pageY

        });

    }

});

// 删除退群

$("body").on("click", "#J__leaveOutQun", function () {

    var leaveOut = wcPop({

        id: 'wc__LeaveOutQun',

        skin: 'android',

        content: '删除并退出群聊后，将不再接收此群聊的信息？',

        btns: [

            {

                text: '取消',

                onTap() {

                    wcPop.close(leaveOut);

                }

            },

            {

                text: '确定',

                style: 'color:#e64240',

                onTap() {

                    wcPop.closeAll();

                    wcPop({id: 'wcTips', content: '已退出该群聊！', time: 2 });

                }

            }

        ]

    });

});

一个仿微博、微信web聊天系统例子完成，可以应用到实际项目中去。

欢迎关注我的个人博客：https://blog.csdn.net/yanxinyun1990

一起学习，一起进步，有问题随时联系，一起解决！！！