h5仿钉钉实战|仿钉钉聊天|仿钉钉模板界面-白红宇

h5仿钉钉实战|仿钉钉聊天|仿钉钉模板界面

阅读量：6877 次

发布时间：2019-06-26

本文共 3495 字，大约阅读时间需要 11 分钟。

html5仿钉钉聊天weDingTalk微钉|h5钉聊系统|

基于web端h5+css3+Zepto+jquery+swiper+wcPop等技术开发的仿钉钉移动办公系统，仿钉钉聊天界面模板，实现了类似钉钉聊天界面，发送消息、表情，预览图片、视频，发送红包，右键长按菜单等功能。

![图片描述 ][3]

图片描述

// 发送信息function isEmpty() {    var html = $editor.html();    html = html.replace(/
    
     /ig, "\r\n");    html = html.replace(/<[^img].*?>/ig, "");    html = html.replace(/ /ig, "");    return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";}$(".J__wchatSubmit").on("click", function () {    // 判断内容是否为空    if (isEmpty()) return;    var _html = $editor.html();    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;    _html = _html.replace(reg, "
     $1$2");    var msgTpl = [        '
     \            
      
       \                
       风铃子
\                
       
        '+ _html +'
       
\            
      
\            \        
'    ].join("");    $chatMsgList.append(msgTpl);    // 清空聊天框并获取焦点（处理输入法和表情 - 聚焦）    if (!$(".wdt__choose-panel").is(":hidden")) {        $editor.html("");    } else {        $editor.html("").focus();    }    wchat_ToBottom();});// >>> 【工具栏选择功能模块】------------------------------------------// ...选择图片$("#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 = [            '
     \                
      
       \                    
       风铃子
\                    
       
        
       
\                
      
\                \            
'        ].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 = [            '
     \                
      
       \                    
       风铃子
\                    
       
        \                        
        
         \                            
         \                            
         
          \ 
          '+ file.name +'
          '+ formateSize(file.size) +'
\ 
         
\                            
         \                        
        
\                    
       
\                
      
\                \            
'        ].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];    }});

转载地址：http://adgfl.baihongyu.com/

你可能感兴趣的文章