【首发】web端h5仿微信聊天实战|仿微信电脑端项目开发

html5仿微信聊天界面案例 | h5仿微信红包支付输入法键盘
之前有使用h5开发了一个聊天系统——h5高仿微信聊天界面 ，最近又在原先基础上开发了一款仿微信电脑端web版聊天系统，使用到了HTML5+css3+jQuery+weui+wcpop等技术，可以发表情、消息，有红包、打赏、霸屏等功能，还可以邮件菜单操作，界面ui挺不错，值得分享！！！

效果图：

<!-- //微聊消息上墙面板 -->
<div class="wc__chatMsg-panel flex1">
        <div class="wc__slimscroll2">
                <div class="chatMsg-cnt">
                        <ul class="clearfix" id="J__chatMsgList">
                                <li class="time"><span>2017年12月28日 晚上21:10</span></li>
                                <li class="notice"><span>"<a href="#">Aster</a>"通过扫描"<a href="#">张小龙</a>"分享的二维码加入群聊</span></li>
                                <li class="time"><span>2017年12月28日 晚上23:15</span></li>
                                <li class="notice"><span>"<a href="#">雷军</a>"通过扫描"<a href="#">李彦宏</a>"分享的二维码加入群聊</span></li>
                                <li class="notice"><span>当前群聊人数较多，已显示群成员昵称，同时为了信息安全，请注意聊天隐私</span></li>

                                <li class="time"><span>2017年12月31日 晚上22:30</span></li>
                                <!-- 别人-->
                                <li class="others">
                                        <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img01.jpg" /></a>
                                        <div class="content">
                                                <p class="author">马云(老子天下第一)</p>
                                                <div class="msg">
                                                        hello 各位女士、先生，欢迎大家来到达摩派，进群后记得修改备注哈~~ 名字+公司/职业/机构 <img class="face" src="img/emotion/face01/29.png"><img class="face" src="img/emotion/face01/71.png"><img class="face" src="img/emotion/face01/75.png">
                                                </div>
                                        </div>
                                </li>
                                <!--自己-->
                                <li class="me">
                                        <div class="content">
                                                <p class="author">Nice奶思</p>
                                                <div class="msg">
                                                        么么哒，马总发个红包呗！
                                                </div>
                                        </div>
                                        <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                                </li>
                                <li class="others">
                                        <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a>
                                        <div class="content">
                                                <p class="author">MR（马蓉 ▪ ☀☼㈱）</p>
                                                <div class="msg picture">
                                                        <img class="img__pic" src="img/placeholder/wchat__img03.jpg" />
                                                </div>
                                        </div>
                                </li>
                                <li class="time"><span>1月1日 早上02:00</span></li>
                                <li class="me">
                                        <div class="content">
                                                <p class="author">Nice奶思</p>
                                                <div class="msg">
                                                        北京新世纪饭店发放福利啦，免费领取VIP会员，大家快去参与吧。
                                                </div>
                                        </div>
                                        <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                                </li>
                        </ul>
                </div>
        </div>
</div>

// ...表情、选择区切换
$(".wc__editor-panel").on("click", ".btn", function(){
        var that = $(this);
        $(".wc__choose-panel").show();
        if (that.hasClass("btn-emotion")) {
                $(".wc__choose-panel .wrap-emotion").show();
                $(".wc__choose-panel .wrap-choose").hide();
                // 初始化swiper表情
                !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
        } else if (that.hasClass("btn-choose")) {
                $(".wc__choose-panel .wrap-emotion").hide();
                $(".wc__choose-panel .wrap-choose").show();
        }
        wchat_ToBottom();
});

// ...处理编辑器信息
var $editor = $(".J__wcEditor"), _editor = $editor[0];
function surrounds(){
        setTimeout(function () { //chrome
                var sel = window.getSelection();
                var anchorNode = sel.anchorNode;
                if (!anchorNode) return;
                if (sel.anchorNode === _editor ||
                        (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
                        
                        var range = sel.getRangeAt(0);
                        var p = document.createElement("p");
                        range.surroundContents(p);
                        range.selectNodeContents(p);
                        range.insertNode(document.createElement("br")); //chrome
                        sel.collapse(p, 0);
                        
                        (function clearBr() {
                                var elems = [].slice.call(_editor.children);
                                for (var i = 0, len = elems.length; i < len; i++) {
                                        var el = elems[i];
                                        if (el.tagName.toLowerCase() == "br") {
                                                _editor.removeChild(el);
                                        }
                                }
                                elems.length = 0;
                        })();
                }
        }, 10);
}
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
        //$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
        surrounds();
}, true);
_editor.addEventListener("input", function(){
        surrounds();
}, false);
// 点击表情
$("#J__swiperEmotion").on("click", ".face-list span img", function(){
        var that = $(this), range;

        if(that.hasClass("face")){ //小表情
                var img = that[0].cloneNode(true);
                _editor.focus();
                _editor.blur(); //输入表情时禁止输入法

                setTimeout(function(){
                        if(document.selection && document.selection.createRange){
                                document.selection.createRange().pasteHTML(img);
                        }else if(window.getSelection && window.getSelection().getRangeAt){
                                range = window.getSelection().getRangeAt(0);
                                range.insertNode(img);
                                range.collapse(false);

                                var sel = window.getSelection();
                                sel.removeAllRanges();
                                sel.addRange(range);
                        }
                }, 10);
        }else if(that.hasClass("del")){ //删除
                _editor.focus();
                _editor.blur(); //输入表情时禁止输入法

                setTimeout(function(){
                        range = window.getSelection().getRangeAt(0);
                        range.collapse(false);

                        var sel = window.getSelection();
                        sel.removeAllRanges();
                        sel.addRange(range);
                        document.execCommand("delete");
                }, 10);
        } else if(that.hasClass("lg-face")){ //大表情
                var _img = that.parent().html();
                var _tpl = [
                        '<li class="me">\
                                <div class="content">\
                                        <p class="author">Nice奶思</p>\
                                        <div class="msg lgface">'+ _img + '</div>\
                                </div>\
                                <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
                        </li>'
                ].join("");
                $chatMsgList.append(_tpl);

                wchat_ToBottom();
        }
});

——>>>欢迎一起交流学习  QQ：282310962    微信：xy190310

你这就是一个IM前端页面的壳是吧

h5高仿真微信聊天界面、微信红包wap端
http://www.52im.net/thread-1570-1-1.html