HTML5 语音聊天 IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

介绍

之前由于项目需求有开发过一款简单的聊天项目,不过功能及UI比较简单,最近又重新在原先的基础上进行了一次大的重构,开发了这款仿微信界面聊天IM系统——趣聊weChatIM。

技术点

运用h5+css3+jQuery+swiper+wcPop+flexable等技术混合开发,实现了发送消息、表情(动图),图片、视频预览,添加好友/群聊,右键长按菜单。另外新增了语音模块、地图定位模块。整体功能界面效果比较接近微信聊天。

项目中使用的弹窗wcPop.js,是自己开发的移动端弹窗组件,兼容所有移动设备(亲测),多种api调用方式及动画效果;
html5语音聊天IM|仿微信语音界面|摇一摇效果
html5语音聊天IM|仿微信语音界面|摇一摇效果
html5语音聊天IM|仿微信语音界面|摇一摇效果

emmmm,看到这里是不是觉得还不错,功能效果起码比较统一;

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

html5语音聊天IM|仿微信语音界面|摇一摇效果

使用shake.js实现摇一摇效果

$("#J__popScreen_shake").on("click", function () {
    var shakePopIdx = wcPop({
        id: 'wcim_shake_fullscreen',
        skin: 'fullscreen',
        title: '摇一摇',
        content: $("#J__popupTmpl-shakeFriends").html(),
        position: 'right',
        xclose: true,
        style: 'background: #303030;',
        show: function(){
            // 摇一摇功能
            var _shake = new Shake({threshold: 15});
            _shake.start();
            window.addEventListener("shake", function(){
                window.navigator.vibrate && navigator.vibrate(500);
                // console.log("触发摇一摇!");

                //...逻辑代码

                setTimeout(function(){
                    $(".J__shakeLoading").fadeOut(300);
                    $(".J__shakeInfoBox").html(shakeTpl);
                }, 1500);
            }, false);
        }
    });
});

处理聊天模块js片段

// ...处理编辑器信息
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, "") == "";
}

本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!