html5版聊天室|仿微信語音|搖一搖|地圖定位

相信大家都有使用過微信，微信這款產品確實設計的不錯，簡約不簡單。尤其裡面的搖一搖、語音功能更是吸引了大批使用者，顛覆式的功能及設計，讓微信穩穩坐上了社交寶座。

之前由於專案需求有開發過一款簡單的聊天專案，不過功能及UI比較簡單，最近又重新在原先的基礎上進行了一次大的重構，開發了這款仿微信介面聊天IM系統。

採用html5+css3+Zepto+swiper+wcPop+flex等技術混合開發，實現了傳送訊息、表情(動圖)，圖片、視訊預覽，新增好友/群聊，右鍵長按選單。另外新增了語音模組、地圖定位模組。整體功能介面效果比較接近微信聊天。

專案中使用到的彈窗wcPop.js，是自己開發的JQ彈出框元件，多種api呼叫方式

// 聊天記錄頁面（長按操作）
$("#J__recordList").on("contextmenu", "li", function(e){
   e.preventDefault();
   var _points = [e.pageX, e.pageY];
   wcPop({
       skin: 'contextmenu',
       follow: _points,
       opacity: 0,
       btns: [
           {text: '標為未讀'}, { text: '置頂' }, {text: '刪除該聊天'}
       ]
   });
});

點選ripple波紋效果

// ripple波紋效果
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

回滾聊天資訊至聊天底部

// ...滾動聊天區底部
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);
}

// 傳送資訊處理
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, "") == "";
}



// >>> 【地圖位置核心功能模組】------------------------------------------
// ...選擇位置
var poiPopIdx;
$(".J__chooseWz").on("click", function () {
    poiPopIdx = wcPop({
        id: 'wcim_local_fullscreen',
        title: '位置',
        skin: 'fullscreen',
        content: $("#J__popupTmpl-location").html(),
        position: 'right',
        xclose: true,
        style: 'background: #f3f3f3;',
        // 載入地圖
        show: function () {
            $(".J__sendLatlng").show();
            $(".localMap").html('<iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></iframe>');
        }
    });
});
// ...獲取位置座標點
var pointArr;
window.addEventListener('message', function (event) {
    // 接收位置資訊，使用者選擇確認位置點後選點元件會觸發該事件，回傳使用者的位置資訊
    var loc = event.data;
    // 防止其他應用也會向該頁面post資訊，需判斷module是否為'locationPicker'
    if (loc && loc.module == 'locationPicker') {
        console.log('location', loc);
        pointArr = loc;
    }
}, false);