h5仿钉钉案例|h5手机端钉钉|仿钉钉聊天

html5仿钉钉手机端智慧办公|仿钉钉聊天界面|移动端办公webapp

这几天一直在开发h5仿钉钉项目，使用到了html5+css3+zepto+swiper+wcPop等技术进行开发，实现了消息、表情、动图gif发送，仿QQ、微信多人图像拼接，可以选择本地图片，并可以图片、视频预览，仿微信发红包及打赏功能(点击 “拆” 会有旋转动画效果)，还有类似微信长按消息弹出菜单(边界检测)

var $chatMsgList = $("#J__chatMsgList");
// ...编辑器信息
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);
}

// 定义最后光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
    getRange: function () {
        if (_sel && _sel.rangeCount > 0) {
            return _sel.getRangeAt(0);
        }
    },
    addRange: function () {
        if (_lastRange) {
            _sel.removeAllRanges();
            _sel.addRange(_lastRange);
        }
    }
}

// 编辑器包含标签
_editor.addEventListener("click", function () {
    $(".wdt__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function () {
    surrounds();
}, true);
_editor.addEventListener("input", function () {
    surrounds();
}, false);

// ...选择图片
$("#J__choosePicture").on("change", function () {
    $(".wdt__choose-panel").hide();

    var file = this.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var _img = this.result;
        var _tpl = [
            '<li class="me">\
                <div class="content">\
                    <p class="author">风铃子</p>\
                    <div class="msg picture"><img class="img__pic" src="'+ _img +'" /></div>\
                </div>\
                <a class="avatar" href="微钉-好友主页(详细资料).html"><img src="img/uimg/u__chat-img07.jpg" /></a>\
            </li>'
        ].join("");
        $chatMsgList.append(_tpl);

        setTimeout(function(){wchat_ToBottom();}, 17);
    }
});

// ...选择文件
$("#J__chooseFile").on("change", function () {
    $(".wdt__choose-panel").hide();

    var file = this.files[0], fileSuffix = /\.[^\*]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.lastIndexOf('.') + 1, fileSuffix.length).toLowerCase();
    console.log(fileSuffix);
    console.log(fileExt);
    var fileTypeArr = ['jpg', 'jpeg', 'png', 'gif', 'txt', 'rar', 'zip', 'pdf', 'docx', 'xls'];
    if ($.inArray(fileExt, fileTypeArr) < 0) {
        wcPop({content: '附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件', time: 2});
        return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var _file = this.result;
        console.log(_file);
        var _tpl = [
            '<li class= "me">\
                <div class="content">\
                    <p class="author">风铃子</p>\
                    <div class="msg attachment">\
                        <div class="card flexbox flex-alignc">\
                            <span class="ico-bg wdt__bg01"><i class="iconfont icon-fujian"></i></span>\
                            <div class="file-info flex1" title="'+ file.name +'">\
                                <p class="name">'+ file.name +'</p><p class="size">'+ formateSize(file.size) +'</p>\
                            </div>\
                            <a class="btn-down" href="'+ _file +'" target="_blank" download="'+ file.name +'"><i class="iconfont icon-down"></i></a>\
                        </div>\
                    </div>\
                </div>\
                <a class="avatar" href="微钉-好友主页(详细资料).html"><img src="img/uimg/u__chat-img07.jpg" /></a>\
            </li>'
        ].join("");
        $chatMsgList.append(_tpl);

        setTimeout(function () {wchat_ToBottom();}, 17);
    }

    /** 文件大小显示  value : file文件的大小值 */
    formateSize = function (value) {
        if (null == value || value == '') {
            return "0 Bytes";
        }
        var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024, index);
        size = size.toFixed(2);        //保留的小数位数
        return size + unitArr[index];
    }
});

// ...开红包功能
$(".J__getRedPackets").on("click", function(){
    var getHbIdx = wcPop({
        id: 'wdtPopGetHb',
        skin: 'ios',
        content: $("#J__popupTmpl-getRedPacket").html(),
        xclose: true,
        style: 'background-color: #f3f3f3; width: 280px;',

        show: function () {
            $("body").on("click", ".J__btnGetRedPacket", function () {
                var that = $(this);
                that.addClass("active");
                setTimeout(function(){
                    that.removeClass("active");
                }, 1000);
            });
        }
    });
});

欢迎一起交流学习  Q：282310962   wx：xy190310

 

转载于:https://my.oschina.net/xiaoyan2016/blog/2966515