经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » HTML5 » 查看文章
钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例
来源：cnblogs　　作者：xiaoyan2017　　时间：2018/9/25 20:06:20　　对本文有异议

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

h5仿钉钉项目图：

  1. var $chatMsgList = $("#J__chatMsgList");
  2. // ...编辑器信息
  3. var $editor = $(".J__wdtEditor"), _editor = $editor[0];
  4. function surrounds() {
  5.     setTimeout(function () { //chrome
  6.         var sel = window.getSelection();
  7.         var anchorNode = sel.anchorNode;
  8.         if (!anchorNode) return;
  9.         if (sel.anchorNode === _editor ||
  10.             (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
  12.             var range = sel.getRangeAt(0);
  13.             var p = document.createElement("p");
  14.             range.surroundContents(p);
  15.             range.selectNodeContents(p);
  16.             range.insertNode(document.createElement("br")); //chrome
  17.             sel.collapse(p, 0);
  19.             (function clearBr() {
  20.                 var elems = [].slice.call(_editor.children);
  21.                 for (var i = 0, len = elems.length; i < len; i++) {
  22.                     var el = elems[i];
  23.                     if (el.tagName.toLowerCase() == "br") {
  24.                         _editor.removeChild(el);
  25.                     }
  26.                 }
  27.                 elems.length = 0;
  28.             })();
  29.         }
  30.     }, 10);
  31. }
  33. // 定义最后光标位置
  34. var _lastRange = null, _sel = window.getSelection && window.getSelection();
  35. var _rng = {
  36.     getRange: function () {
  37.         if (_sel && _sel.rangeCount > 0) {
  38.             return _sel.getRangeAt(0);
  39.         }
  40.     },
  41.     addRange: function () {
  42.         if (_lastRange) {
  43.             _sel.removeAllRanges();
  44.             _sel.addRange(_lastRange);
  45.         }
  46.     }
  47. }
  49. // 编辑器包含标签
  50. _editor.addEventListener("click", function () {
  51.     $(".wdt__choose-panel").hide();
  52. }, true);
  53. _editor.addEventListener("focus", function () {
  54.     surrounds();
  55. }, true);
  56. _editor.addEventListener("input", function () {
  57.     surrounds();
  58. }, false);
  60. // ...选择图片
  61. $("#J__choosePicture").on("change", function () {
  62.     $(".wdt__choose-panel").hide();
  64.     var file = this.files[0];
  65.     var reader = new FileReader();
  66.     reader.readAsDataURL(file);
  67.     reader.onload = function (e) {
  68.         var _img = this.result;
  69.         var _tpl = [
  70.             '<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>'
  71.         ].join("");
  72.         $chatMsgList.append(_tpl);
  74.         setTimeout(function(){wchat_ToBottom();}, 17);
  75.     }
  76. });
  78. // ...选择文件
  79. $("#J__chooseFile").on("change", function () {
  80.     $(".wdt__choose-panel").hide();
  82.     var file = this.files[0], fileSuffix = /\.[^\*]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.lastIndexOf('.') + 1, fileSuffix.length).toLowerCase();
  83.     console.log(fileSuffix);
  84.     console.log(fileExt);
  85.     var fileTypeArr = ['jpg', 'jpeg', 'png', 'gif', 'txt', 'rar', 'zip', 'pdf', 'docx', 'xls'];
  86.     if ($.inArray(fileExt, fileTypeArr) < 0) {
  87.         wcPop({content: '附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件', time: 2});
  88.         return;
  89.     }
  90.     var reader = new FileReader();
  91.     reader.readAsDataURL(file);
  92.     reader.onload = function (e) {
  93.         var _file = this.result;
  94.         console.log(_file);
  95.         var _tpl = [
  96.             '<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>'
  97.         ].join("");
  98.         $chatMsgList.append(_tpl);
  100.         setTimeout(function () {wchat_ToBottom();}, 17);
  101.     }
  103.     /** 文件大小显示  value : file文件的大小值 */
  104.     formateSize = function (value) {
  105.         if (null == value || value == '') {
  106.             return "0 Bytes";
  107.         }
  108.         var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
  109.         var index = 0;
  110.         var srcsize = parseFloat(value);
  111.         index = Math.floor(Math.log(srcsize) / Math.log(1024));
  112.         var size = srcsize / Math.pow(1024, index);
  113.         size = size.toFixed(2);        //保留的小数位数
  114.         return size + unitArr[index];
  115.     }
  116. });
  118. // ...开红包功能
  119. $(".J__getRedPackets").on("click", function(){
  120.     var getHbIdx = wcPop({
  121.         id: 'wdtPopGetHb',
  122.         skin: 'ios',
  123.         content: $("#J__popupTmpl-getRedPacket").html(),
  124.         xclose: true,
  125.         style: 'background-color: #f3f3f3; width: 280px;',
  127.         show: function () {
  128.             $("body").on("click", ".J__btnGetRedPacket", function () {
  129.                 var that = $(this);
  130.                 that.addClass("active");
  131.                 setTimeout(function(){
  132.                     that.removeClass("active");
  133.                 }, 1000);
  134.             });
  135.         }
  136.     });
  137. });
  1. /* …… 微钉主布局——首页.layout {{{ …… */
  2. .weDingTalk__panel{-webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-tap-highlight-color: transparent; transition: transform .3s;}
  3. .we__dingtalk-wrapper{height: calc(100vh); position: relative;}
  4. .wdt__container{overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; position: relative;}
  5.  
  6. /* —— 顶部header */
  7. .wdt__topBar .inner{/*background-image: linear-gradient(90deg,#3296fa 10%,#00d3f3);*/ background: #fff; height:1rem; width:100%; z-index:999; position:relative;}
  8. .wdt__topBar.topfixed{padding-bottom:1rem;}
  9. .wdt__topBar.topfixed .inner{max-width:750px; width:100%; position:fixed; top:0;}
  10. .wdt__topBar .inner .barTit{color:#191f25; font-size:.36rem; font-family: 'Microsoft Yahei'; margin-top: -.03rem; padding-left: .25rem; position: relative;}
  11. .wdt__topBar .inner .barTit.sm{color: #575b60; font-size: .32rem; padding-left: 0;}
  12. .wdt__topBar .inner .barTxt{color: #191f25; font-size: .32rem; justify-content: center; align-items: center;}
  13. .wdt__topBar .inner .barTxt .lbl{color: #9ea0a3; display: block; font-size: .2rem;}
  14. .wdt__topBar .inner .linkico{text-align:center; height: 1rem; line-height: 1rem; width:1rem; position: relative;}
  15. .wdt__topBar .inner .linkico .iconfont{color: #3296fa; font-size: .4rem; position: relative;}
  16. .wdt__topBar .inner .linkico .wdt__badge{position: absolute; top: -.1rem; right: -.2rem;}
  17. .wdt__topBar .inner .linkico .wdt__badge-dot{position: absolute; top: 0; right: -.1rem;}
  18.  
  19. /* 中间主页面css */
  20. /* 搜索 */
  21. .wdt__searbox{background:linear-gradient(180deg, #efefef 0%, #f8f8f8 100%); padding: .2rem .25rem;}
  22. .wdt__searbox .inner{background: #fff; border-radius: .05rem; padding-left: .2rem;}
  23. .wdt__searbox .inner .iconfont{color: #7a7d81; font-size: .32rem;}
  24. .wdt__searbox .ipt-sear{background: none; border: 0; font-size: .24rem; padding: 0 .1rem; height: .6rem; line-height: .6rem;}
  25. /* —— 1、消息模块 */
  26. /* 消息记录列表 */
  27. .wdt__recordList ul li{background: #fff; font-family: 'Microsoft Yahei'; padding: .2rem .25rem; position: relative;}
  28. .wdt__recordList ul li:after{content: ''; background-color: #dcdddd; color: #dcdddd; opacity: .56; height: 1px;width: 100%; position: absolute;left: 0;bottom: 0; transform: scaleY(.5); -webkit-transform: scaleY(.5);}
  29. .wdt__recordList ul li:last-child:after{display: none;}
  30. .wdt__recordList ul li .avator{margin-right: .25rem; border-radius: 50%; overflow: hidden; height: .9rem; width: .9rem; position: relative;}
  31. .wdt__recordList ul li .avator img{border-radius: 50%; height: 100%; width: 100%; object-fit: cover; position: absolute;}
  32. .wdt__recordList ul li .groups{background: #dcdddd;}
  33. /* —— 2、事务模块 */
  34. /* 轮播图 */
  35. .wdt__affairs-bigImg{background-image: linear-gradient(180deg, #efefef 0%, #fff 100%); padding: .25rem; position: relative;}
  36. .wdt__affairs-bigImg a{display:block;overflow:hidden; position:relative;}
  37. .wdt__affairs-bigImg a img{border-radius: .05rem; height:2.5rem;width:100%; object-fit: cover;}
  38. .wdt__affairs-bigImg a .info{margin-top: .25rem; text-align: center;}
  39. .wdt__affairs-bigImg a .info h2{color:#333;font-size:.32rem;font-family:arial;}
  40. /* 管理栏目 */
  41. .wdt__similar .affair-tit{color: #191f25; font-size: .32rem; font-weight: 700; padding: .25rem;}
  42. .wdt__similar .affair-cnt{margin-left: .25rem; padding: .25rem .3rem .25rem .2rem;}
  43. .wdt__similar .affair-cnt.wdt__borT:before{opacity: .56;}
  44. .wdt__similar .affair-cnt .ico{display: table; text-align: center; height: 1rem; width: 1rem;}
  45. .wdt__similar .affair-cnt .ico .iconfont{color:#4da9ec; font-size: 1rem; display: table-cell; vertical-align: middle;}
  46. .wdt__similar .affair-cnt .text{text-align: right;}
  47. .wdt__similar .affair-cnt .text label{color: #191f25; display: block; font-size: .28rem;}
  48. .wdt__similar .affair-cnt .btn-addPlan{background-color: #fff; color: #4da9ec; display: inline-block; margin-top: .1rem; line-height: .6rem; min-width: 2rem;}
  49. .wdt__similar .affair-list ul li{float: left; margin-bottom: .35rem; padding: 0 .25rem; text-align: center; width: 25%;}
  50. .wdt__similar .affair-list ul li a{color: #191f25; display: block; font-size: .28rem;}
  51. .wdt__similar .affair-list ul li .bg{background-color: #3296fa; border-radius: .05rem; display: table; margin: 0 auto; margin-bottom: .1rem; height: .9rem; width: .9rem;}
  52. .wdt__similar .affair-list ul li .iconfont{color: #fff; font-size: .5rem; display:table-cell; vertical-align: middle;}
  53. /* —— 3、通讯录模块 */
  54. .wdt__addrList-grid04 li{float: left; padding-bottom: .25rem; text-align: center; width: 25%;}
  55. .wdt__addrList-grid04 li a{color: #575b60; display: block; font-size: .24rem;}
  56. .wdt__addrList-grid04 li .bg{display: table; margin: 0 auto;}
  57. .wdt__addrList-grid04 li .iconfont{color: #3296fa; font-size: .5rem; display:table-cell; vertical-align: middle;}
  58. /* 新的好友 */
  59. .wdt__addrNewFriend{padding: .2rem .25rem;}
  60. .wdt__addrNewFriend .txt{color: #191f25; font-size: .28rem;}
  61. .wdt__addrNewFriend .bg{border-radius: 50%; display: table; margin-right: .2rem; text-align: center; height: .7rem; width: .7rem;}
  62. .wdt__addrNewFriend .bg .iconfont{color: #fff; font-size: .4rem; display:table-cell; vertical-align: middle;}
  63. /* 常用联系人 */
  64. .wdt__similar .addr-tit{color: #191f25; font-size: .32rem; font-weight: 700; padding: .25rem;}
  65. .wdt__similar .addr-list ul li a{color: #191f25; font-size: .28rem; padding: 0 .25rem;}
  66. .wdt__similar .addr-list ul li .avator{background-color: #3296fa; border-radius: 50%; display: block; margin-right: .2rem; height: .7rem; width: .7rem;}
  67. .wdt__similar .addr-list ul li .avator img{border-radius: 50%; height: 100%; width: 100%; object-fit: cover;}
  68. .wdt__similar .addr-list ul li em{display: block; padding: .3rem 0; position: relative;}
  69. .wdt__similar .addr-list ul li em:after{content: ''; background-color: #dcdddd; color: #dcdddd; opacity: .56; height: 1px;width: 100%; position: absolute;left: 0;bottom: 0; transform: scaleY(.5); -webkit-transform: scaleY(.5);}
  70. .wdt__similar .addr-list ul li:last-child em:after{display: none;}
  71. /* —— 4、我的模块 */
  72. .wdt__profile{padding: .25rem;}
  73. .wdt__profile .inner{background-color: #fff; border-radius: .05rem; box-shadow: 0 .05rem .15rem rgba(0,0,0,.1); padding: .15rem 0;}
  74. .wdt__profile .hd{padding: 0 .25rem;}
  75. .wdt__profile .hd .uname{color: #191f25; font-size: .36rem;}
  76. .wdt__profile .hd .lbl{color: #9ea0a3; display: block; font-size: .2rem;}
  77. .wdt__profile .hd .avator{border-radius: 50%; height: .9rem; width: .9rem; object-fit: cover;}
  78. .wdt__profile .ct{color: #191f25; font-size: .28rem; margin-top: .5rem; padding: .25rem;}
  79. /* 我的导航 */
  80. .wdt__uNavMenu ul li a{color: #191f25; font-size: .28rem; padding: 0 .25rem;}
  81. .wdt__uNavMenu ul li .bg{background-color: #3296fa; border-radius: .05rem; display: table; margin-right: .2rem; text-align: center; height: .5rem; width: .5rem;}
  82. .wdt__uNavMenu ul li .bg .iconfont{color: #fff; font-size: .3rem; display:table-cell; vertical-align: middle;}
  83. .wdt__uNavMenu ul li label{padding: .3rem 0; position: relative;}
  84. .wdt__uNavMenu ul li label:after{content: ''; background-color: #dcdddd; color: #dcdddd; opacity: .56; height: 1px;width: 100%; position: absolute;left: 0;bottom: 0; transform: scaleY(.5); -webkit-transform: scaleY(.5);}
  85. .wdt__uNavMenu ul li:last-child label:after{display: none;}
  86.  
  87. /* —— 底部tabBar */
  88. .wdt__tabBar{padding-top: 1rem; position: relative;}
  89. .wdt__tabBar .bottomfixed{background: #fff; max-width:750px; width: 100%; position: fixed; bottom: 0; z-index: 1001;}
  90. .wdt__tabBar ul li{text-align:center; height: 1rem;}
  91. .wdt__tabBar ul li .ico{display: inline-block; vertical-align: top; margin-top: .05rem; margin-bottom: .05rem; height: .48rem; width: .48rem; position: relative;}
  92. .wdt__tabBar ul li .iconfont{color:#9ea0a3; font-size: .42rem;}
  93. .wdt__tabBar ul li.on .iconfont{color:#3296fa;}
  94. .wdt__tabBar ul li .txt{color: #7a7d81; display: block; font-size: .24rem;}
  95. .wdt__tabBar ul li.on .txt{color: #3296fa;}
  96. .wdt__tabBar ul li .ico .wdt__badge{position: absolute; top: 0; left: .4rem;}
  97. .wdt__tabBar ul li .ico .wdt__badge-dot{left: .4rem;}
  98. /* }}} */

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号