钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例
程序员文章站
2023-10-27 23:07:52
最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息、表情、动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片、视频预览,仿微信发红包及打赏功能(点击 “拆” 会有动画旋转动画),还有类似微信长按消息弹出菜单(智能边界检测) h5仿钉钉项 ......
最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcpop2等技术进行开发,实现了消息、表情、动图发送,仿qq多人拼合图像,可以选择本地图片,并可以图片、视频预览,仿微信发红包及打赏功能(点击 “拆” 会有动画旋转动画),还有类似微信长按消息弹出菜单(智能边界检测)
h5仿钉钉项目图:
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); }); } }); });
/* …… 微钉主布局——首页.layout {{{ …… */ .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;} .we__dingtalk-wrapper{height: calc(100vh); position: relative;} .wdt__container{overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; position: relative;} /* —— 顶部header */ .wdt__topbar .inner{/*background-image: linear-gradient(90deg,#3296fa 10%,#00d3f3);*/ background: #fff; height:1rem; width:100%; z-index:999; position:relative;} .wdt__topbar.topfixed{padding-bottom:1rem;} .wdt__topbar.topfixed .inner{max-width:750px; width:100%; position:fixed; top:0;} .wdt__topbar .inner .bartit{color:#191f25; font-size:.36rem; font-family: 'microsoft yahei'; margin-top: -.03rem; padding-left: .25rem; position: relative;} .wdt__topbar .inner .bartit.sm{color: #575b60; font-size: .32rem; padding-left: 0;} .wdt__topbar .inner .bartxt{color: #191f25; font-size: .32rem; justify-content: center; align-items: center;} .wdt__topbar .inner .bartxt .lbl{color: #9ea0a3; display: block; font-size: .2rem;} .wdt__topbar .inner .linkico{text-align:center; height: 1rem; line-height: 1rem; width:1rem; position: relative;} .wdt__topbar .inner .linkico .iconfont{color: #3296fa; font-size: .4rem; position: relative;} .wdt__topbar .inner .linkico .wdt__badge{position: absolute; top: -.1rem; right: -.2rem;} .wdt__topbar .inner .linkico .wdt__badge-dot{position: absolute; top: 0; right: -.1rem;} /* 中间主页面css */ /* 搜索 */ .wdt__searbox{background:linear-gradient(180deg, #efefef 0%, #f8f8f8 100%); padding: .2rem .25rem;} .wdt__searbox .inner{background: #fff; border-radius: .05rem; padding-left: .2rem;} .wdt__searbox .inner .iconfont{color: #7a7d81; font-size: .32rem;} .wdt__searbox .ipt-sear{background: none; border: 0; font-size: .24rem; padding: 0 .1rem; height: .6rem; line-height: .6rem;} /* —— 1、消息模块 */ /* 消息记录列表 */ .wdt__recordlist ul li{background: #fff; font-family: 'microsoft yahei'; padding: .2rem .25rem; position: relative;} .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);} .wdt__recordlist ul li:last-child:after{display: none;} .wdt__recordlist ul li .avator{margin-right: .25rem; border-radius: 50%; overflow: hidden; height: .9rem; width: .9rem; position: relative;} .wdt__recordlist ul li .avator img{border-radius: 50%; height: 100%; width: 100%; object-fit: cover; position: absolute;} .wdt__recordlist ul li .groups{background: #dcdddd;} /* —— 2、事务模块 */ /* 轮播图 */ .wdt__affairs-bigimg{background-image: linear-gradient(180deg, #efefef 0%, #fff 100%); padding: .25rem; position: relative;} .wdt__affairs-bigimg a{display:block;overflow:hidden; position:relative;} .wdt__affairs-bigimg a img{border-radius: .05rem; height:2.5rem;width:100%; object-fit: cover;} .wdt__affairs-bigimg a .info{margin-top: .25rem; text-align: center;} .wdt__affairs-bigimg a .info h2{color:#333;font-size:.32rem;font-family:arial;} /* 管理栏目 */ .wdt__similar .affair-tit{color: #191f25; font-size: .32rem; font-weight: 700; padding: .25rem;} .wdt__similar .affair-cnt{margin-left: .25rem; padding: .25rem .3rem .25rem .2rem;} .wdt__similar .affair-cnt.wdt__bort:before{opacity: .56;} .wdt__similar .affair-cnt .ico{display: table; text-align: center; height: 1rem; width: 1rem;} .wdt__similar .affair-cnt .ico .iconfont{color:#4da9ec; font-size: 1rem; display: table-cell; vertical-align: middle;} .wdt__similar .affair-cnt .text{text-align: right;} .wdt__similar .affair-cnt .text label{color: #191f25; display: block; font-size: .28rem;} .wdt__similar .affair-cnt .btn-addplan{background-color: #fff; color: #4da9ec; display: inline-block; margin-top: .1rem; line-height: .6rem; min-width: 2rem;} .wdt__similar .affair-list ul li{float: left; margin-bottom: .35rem; padding: 0 .25rem; text-align: center; width: 25%;} .wdt__similar .affair-list ul li a{color: #191f25; display: block; font-size: .28rem;} .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;} .wdt__similar .affair-list ul li .iconfont{color: #fff; font-size: .5rem; display:table-cell; vertical-align: middle;} /* —— 3、通讯录模块 */ .wdt__addrlist-grid04 li{float: left; padding-bottom: .25rem; text-align: center; width: 25%;} .wdt__addrlist-grid04 li a{color: #575b60; display: block; font-size: .24rem;} .wdt__addrlist-grid04 li .bg{display: table; margin: 0 auto;} .wdt__addrlist-grid04 li .iconfont{color: #3296fa; font-size: .5rem; display:table-cell; vertical-align: middle;} /* 新的好友 */ .wdt__addrnewfriend{padding: .2rem .25rem;} .wdt__addrnewfriend .txt{color: #191f25; font-size: .28rem;} .wdt__addrnewfriend .bg{border-radius: 50%; display: table; margin-right: .2rem; text-align: center; height: .7rem; width: .7rem;} .wdt__addrnewfriend .bg .iconfont{color: #fff; font-size: .4rem; display:table-cell; vertical-align: middle;} /* 常用联系人 */ .wdt__similar .addr-tit{color: #191f25; font-size: .32rem; font-weight: 700; padding: .25rem;} .wdt__similar .addr-list ul li a{color: #191f25; font-size: .28rem; padding: 0 .25rem;} .wdt__similar .addr-list ul li .avator{background-color: #3296fa; border-radius: 50%; display: block; margin-right: .2rem; height: .7rem; width: .7rem;} .wdt__similar .addr-list ul li .avator img{border-radius: 50%; height: 100%; width: 100%; object-fit: cover;} .wdt__similar .addr-list ul li em{display: block; padding: .3rem 0; position: relative;} .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);} .wdt__similar .addr-list ul li:last-child em:after{display: none;} /* —— 4、我的模块 */ .wdt__profile{padding: .25rem;} .wdt__profile .inner{background-color: #fff; border-radius: .05rem; box-shadow: 0 .05rem .15rem rgba(0,0,0,.1); padding: .15rem 0;} .wdt__profile .hd{padding: 0 .25rem;} .wdt__profile .hd .uname{color: #191f25; font-size: .36rem;} .wdt__profile .hd .lbl{color: #9ea0a3; display: block; font-size: .2rem;} .wdt__profile .hd .avator{border-radius: 50%; height: .9rem; width: .9rem; object-fit: cover;} .wdt__profile .ct{color: #191f25; font-size: .28rem; margin-top: .5rem; padding: .25rem;} /* 我的导航 */ .wdt__unavmenu ul li a{color: #191f25; font-size: .28rem; padding: 0 .25rem;} .wdt__unavmenu ul li .bg{background-color: #3296fa; border-radius: .05rem; display: table; margin-right: .2rem; text-align: center; height: .5rem; width: .5rem;} .wdt__unavmenu ul li .bg .iconfont{color: #fff; font-size: .3rem; display:table-cell; vertical-align: middle;} .wdt__unavmenu ul li label{padding: .3rem 0; position: relative;} .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);} .wdt__unavmenu ul li:last-child label:after{display: none;} /* —— 底部tabbar */ .wdt__tabbar{padding-top: 1rem; position: relative;} .wdt__tabbar .bottomfixed{background: #fff; max-width:750px; width: 100%; position: fixed; bottom: 0; z-index: 1001;} .wdt__tabbar ul li{text-align:center; height: 1rem;} .wdt__tabbar ul li .ico{display: inline-block; vertical-align: top; margin-top: .05rem; margin-bottom: .05rem; height: .48rem; width: .48rem; position: relative;} .wdt__tabbar ul li .iconfont{color:#9ea0a3; font-size: .42rem;} .wdt__tabbar ul li.on .iconfont{color:#3296fa;} .wdt__tabbar ul li .txt{color: #7a7d81; display: block; font-size: .24rem;} .wdt__tabbar ul li.on .txt{color: #3296fa;} .wdt__tabbar ul li .ico .wdt__badge{position: absolute; top: 0; left: .4rem;} .wdt__tabbar ul li .ico .wdt__badge-dot{left: .4rem;} /* }}} */
上一篇: 离婚后为了孩子挽回值得吗?
下一篇: 利用词云图分析热词