[技术分享]h5 聊天室实例项目|仿微信群聊 html5

之前由于项目需求，做过一款简约的聊天项目，后面随着技术的一步步累积，又重新对之前的项目进行了一次重构，就有了下面这个html5+css3+jQ+wcPop+swiper技术架构开发的仿微信手机端聊天室IM项目。

主要使用的是h5技术开发的，jquery配合插件开发，另外wcPop是自己开发的一款移动端弹窗组件，非常实用。

引入css及js插件如下：

另外项目中使用的弹窗wcPop.js，是自己开发的移动端弹窗组件，兼容所有移动设备（亲测），多种api调用方式及动画效果；

/*
   @desc：聊天模块js片段
   @about：Q：282310962
*/
// ...滚动聊天区底部
function wchat_ToBottom() {
    $(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}

// ...处理编辑器信息
var $editor = $(".J__wdtEditor"), _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);
}

if (that.hasClass("face")) { //小表情
    var img = that[0].cloneNode(true);
    if (!_editor.childNodes.length) {
        _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 = _rng.getRange();
            range.insertNode(img);
            range.collapse(false);

            _lastRange = range; //记录当前光标位置 (否则光标会跑到表情前面)
            _rng.addRange();
        }
    }, 10);
}

function isEmpty() {
    var html = $editor.html();
    html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
    html = html.replace(/<[^img].*?>/ig, "");
    html = html.replace(/&nbsp;/ig, "");
    return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}

作者：xiaoyan2015
链接：https://blog.csdn.net/yanxinyun1990/
本文为作者原创文章，转载请附上链接！