#夏日生活打卡季#

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，今天就分享到这里。