前言:
如今大家对“html5应用微信”大体比较关切,姐妹们都想要剖析一些“html5应用微信”的相关文章。那么小编也在网摘上收集了一些对于“html5应用微信””的相关知识,希望各位老铁们能喜欢,我们快快来学习一下吧!#夏日生活打卡季#
mvvm框架永久了,想着回归jquery时代。最近使用html5+jQuery实现了一款微信pc版聊天实例项目。
h5-wchat-pc 使用了html5+css3+jquery+weui+slimscroll等技术实现聊天项目。包含聊天、通讯录、收藏、朋友圈、看一看等模块。
<!-- …… 图片预览弹窗.Start --> <div class="wc__popup-imgPreview" style="display: none;"> <div class="swiper-container J__swiperImgPreview"> <div class="swiper-wrapper"></div> <!-- <div class="swiper-pagination pagination-imgPreview"></div> --> </div> </div> <script type="text/javascript"> var curIndex = 0, imgPreviewSwiper; $("#J__chatMsgList li").on("click", ".picture", function(){ var html = "", _src = $(this).find("img").attr("src"); $("#J__chatMsgList li .picture").each(function(i, item){ html += '<div class="swiper-slide"><div class="swiper-zoom-container">'+ $(this).html() +'</div></div>'; if($(this).find("img").attr("src") == _src){ curIndex = i; } }); $(".J__swiperImgPreview .swiper-wrapper").html(html); $(".wc__popup-imgPreview").show(); imgPreviewSwiper = new Swiper('.J__swiperImgPreview',{ pagination: false, paginationClickable: true, zoom: true, observer: true, observeParents: true, initialSlide: curIndex }); }); // 关闭预览 $(".wc__popup-imgPreview").on("click", function(e){ var that = $(this); imgPreviewSwiper.destroy(true, true); $(".J__swiperImgPreview .swiper-wrapper").html(''); that.hide(); }); </script> <!-- …… 图片预览弹窗.End --> <!-- …… 视频预览弹窗.Start --> <div class="wc__popup-videoPreview" style="display: none;"> <i class="wc__videoClose"></i> <video id="J__videoPreview" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline preload="auto"></video> </div> <script type="text/javascript"> var video = document.getElementById("J__videoPreview"); $("#J__chatMsgList li").on("click", ".video", function(){ video.src = $(this).find("img").attr("videoUrl"); $(".wc__popup-videoPreview").show(); if(video.paused){ video.play(); }else{ video.pause(); } }); video.addEventListener("ended", function(){ video.currentTime = 0; }, false); // 关闭预览 $(".wc__popup-videoPreview").on("click", ".wc__videoClose", function(){ $(".wc__popup-videoPreview").hide(); video.currentTime = 0; video.pause(); }); // 进入全屏、退出全屏 video.addEventListener("x5videoenterfullscreen", function(){ console.log("进入全屏"); }, false); video.addEventListener("x5videoexitfullscreen", function(){ $(".wc__popup-videoPreview .wc__videoClose").trigger("click"); }, false) </script> <!-- …… 视频预览弹窗.End -->
$(function(){ // ...滚动聊天区底部 function wchat_ToBottom(){ //$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0); $(".wc__slimscroll2").slimscroll({ scrollBy: $("#J__chatMsgList").height(), height: 'auto' }); } // ...点击聊天面板区域 $(document).on("click", ".wechat__panel", function(e){ // 判断是否点击右键菜单区 var _contextArea = $(".wc__contextmenu"); if(_contextArea.length && e.target != _contextArea && !$.contains(_contextArea[0], e.target)){ // 关闭右键菜单 _contextArea.hide(); $(".wc__chatMsg-panel").find("li .msg").removeClass("taped"); } // 判断是否点击编辑器区 var _editorArea = $(".wc__footTool-panel"); if(_editorArea.length && e.target != _editorArea && !$.contains(_editorArea[0], e.target)){ $(".wc__choose-panel").hide(); } $(".wc__slimscroll2").slimscroll({ height: 'auto' }); }); // ...表情、选择区切换 $(".wc__editor-panel").on("click", ".btn", function(){ var that = $(this); $(".wc__choose-panel").show(); if (that.hasClass("btn-emotion")) { $(".wc__choose-panel .wrap-emotion").show(); $(".wc__choose-panel .wrap-choose").hide(); // 初始化swiper表情 !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click"); } else if (that.hasClass("btn-choose")) { $(".wc__choose-panel .wrap-emotion").hide(); $(".wc__choose-panel .wrap-choose").show(); } wchat_ToBottom(); }); // ...处理编辑器信息 var $editor = $(".J__wcEditor"), _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); } // 格式化编辑器包含标签 _editor.addEventListener("click", function () { //$(".wc__choose-panel").hide(); }, true); _editor.addEventListener("focus", function(){ surrounds(); }, true); _editor.addEventListener("input", function(){ surrounds(); }, false); // 点击表情 $("#J__swiperEmotion").on("click", ".face-list span img", function(){ var that = $(this), range; if(that.hasClass("face")){ //小表情 var img = that[0].cloneNode(true); _editor.focus(); _editor.blur(); //输入表情时禁止输入法 setTimeout(function(){ if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); }else if(window.getSelection && window.getSelection().getRangeAt){ range = window.getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 10); }else if(that.hasClass("del")){ //删除 _editor.focus(); _editor.blur(); //输入表情时禁止输入法 setTimeout(function(){ range = window.getSelection().getRangeAt(0); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand("delete"); }, 10); } else if(that.hasClass("lg-face")){ //大表情 var _img = that.parent().html(); var _tpl = [ '<li class="me">\ <div class="content">\ <p class="author">Nice奶思</p>\ <div class="msg lgface">'+ _img + '</div>\ </div>\ <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(_tpl); wchat_ToBottom(); } }); // 发送信息 var $chatMsgList = $("#J__chatMsgList"); function isEmpty(){ var html = $editor.html(); html = html.replace(/<br[\s\/]{0,2}>/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, "<a href='$1$2'>$1$2</a>"); var msgTpl = [ '<li class="me">\ <div class="content">\ <p class="author">Nice奶思</p>\ <div class="msg">'+ html +'</div>\ </div>\ <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(msgTpl); // 清空聊天框并获取焦点(处理输入法和表情 - 聚焦) if(!$(".wc__choose-panel").is(":hidden")){ $editor.html(""); }else{ $editor.html("").focus().trigger("click"); } wchat_ToBottom(); }); // ...右键弹出菜单 $("#J__chatMsgList").on("contextmenu", "li .msg", function(e){ var that = $(this), menuTpl, menuNode = $("<div class='wc__contextmenu wc__contextmenuMsgChat animated anim-fadeIn'></div>"); that.addClass("taped"); that.parents("li").siblings().find(".msg").removeClass("taped"); var isRevoke = that.parents("li").hasClass("me"); var _revoke = isRevoke ? "<a href='#'><i class='ico i4'></i>撤回</a>" : ""; if(that.hasClass("picture")){ console.log("图片长按"); menuTpl = "<div class='menu menu-picture'><a href='#'>复制</a><a href='#'>转发</a><a href='#'>收藏</a><a href='#'>另存为</a>"+ _revoke +"<a href='#'>删除</a></div>"; }else if(that.hasClass("video")){ console.log("视频长按"); menuTpl = "<div class='menu menu-video'><a href='#'>转发</a><a href='#'>另存为</a>" + _revoke +"<a href='#'>删除</a></div>"; }else{ console.log("文字长按"); menuTpl = "<div class='menu menu-text'><a href='#'>复制</a><a href='#'>收藏</a>" + _revoke +"<a href='#'>删除</a></div>"; } if(!$(".wc__contextmenu").length){ $("body").append(menuNode.html(menuTpl)); posFix(); }else{ $(".wc__contextmenu").hide().html(menuTpl).fadeIn(250); posFix(); } function posFix(){ $(".wc__contextmenu").css({ position: "absolute", left: e.pageX, top: e.pageY }); } }); // ...销毁右键菜单 $(".wc__chatMsg-panel").on("scroll", function(){ $(".wc__contextmenu").hide(); $(this).find("li .msg").removeClass("taped"); }); })
OK,今天就分享到这里。
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #html5应用微信