h5聊天室案例|仿微信聊天界面|多人群聊

html5仿微信聊天室weChatRoom案例|多人群聊互动|仿微信聊天界面

该项目是使用html5+css3+zepto+swiper+wcPop等技术开发的仿微信聊天室，捣鼓调试了很长时间，在手机上已经适配各个设备，采用的是iphone6的750px屏宽加上css3里的flex伸缩布局，该聊天项目用到的各种弹窗效果则是自己专门为聊天项目开发的wcPop插件(仿微信弹窗效果、android、ios风格弹窗效果)。

先展示下项目截图

• 消息、通讯录、我三个模块采用了swiper滑动滚屏效果，实现了类似微信左右页面滚动切换

<!-- 左右滑屏切换.Start -->
<script type="text/javascript"> 
	var chatSwiper = new Swiper('.swiper-container',{
		pagination: '.wechat-pagination',
		paginationClickable: true,
		paginationBulletRender: function (chatSwiper, index, className) {
			switch (index) {
				case 0:
					name='<i class="ico i1"><em class="wc__badge">105</em></i><span>消息</span>';
					break;
				case 1:
					name='<i class="ico i2"></i><span>通讯录</span>';
					break;
				case 2:
					name='<i class="ico i4"></i><span>我</span>';
					break;
				default: name='';
			}
			return '<li class="flex1 ' + className + '">' + name + '</li>';
		}
	})
</script>
<!-- 左右滑屏切换 end -->

• 利用zepto里面的longTap事件实现消息列表长按弹窗提示、通讯录长按提示

// 聊天记录页面（长按操作）
$("#J__recordChatList").on("longTap", "li", function(e){
	var _this = $(this);
	wcPop({
		skin: 'androidSheet',
		shadeClose: true,

		btns: [
			{text: '标为未读', style: 'font-size:14px;line-height:50px;'},
			{text: '置顶聊天', style: 'font-size:14px;line-height:50px;'},
			{
				text: '删除该聊天',
				style: 'font-size:14px;line-height:50px;',
				onTap() {
					wcPop({
						skin: 'android',
						content: '删除后，将会清空该聊天记录',

						btns: [
							{
								text: '取消',
								onTap() {
									wcPop.close();
								}
							},
							{
								text: '删除',
								style: 'color:#ffba00',
								onTap() {
									_this.remove();
									wcPop.close();
								}
							}
						]
					});
				}
			}
		]
	});
});

$("#J__addrFriendList").on("longTap", ".row", function(e){
	var _this = $(this);
	wcPop({
		skin: 'androidSheet',
		shadeClose: true,

		btns: [
			{
				text: '设置备注及标签',
				style: 'font-size:14px;line-height:50px;',
				onTap() {
					wcPop.close();
				}
			}
		]
	});
});

聊天页面底部则是使用div属性contenteditable模拟富文本框，可以输入表情

<!-- 输入框模块 -->
<div class="wc__editor-panel wc__borT flexbox">
	<div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true" style="user-select:text;-webkit-user-select:text;"></div></div>
	<i class="btn btn-emotion"></i>
	<i class="btn btn-choose"></i>
	<button class="btn-submit J__wchatSubmit">发送</button>
</div>

底部的表情、动图gif模块可以左右滑动切换，效果类似微信表情滑动效果，也是采用了swiper滑动功能；另外还有一些红包、霸屏、打赏等微交互功能。

/* ...霸屏事件.start */
$(".J__wchatBp").on("click", function(){
	var bpidx = wcPop({
		skin: 'ios',
		content: $("#J__popupTmpl-Baping").html(),
		style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
		shadeClose: false,

		btns: [
			{
				text: '我要霸屏',
				style: 'background:#00c1de;color:#fff;font-size:16px;',
				onTap() {
					alert("霸屏成功！");
					wcPop.close(bpidx);
				}
			}
		]
	});
});
//霸屏时长picker
$("body").on("click", ".wc__popupTmpl input[name='bpTimeline']", function(){
	var that = $(this);
	weui.picker([{
			label: '10s　￥8',
			value: 8
		},{
			label: '20s　￥16',
			value: 16
		},{
			label: '30s　￥24',
			value: 24
		},{
			label: '40s　￥32',
			value: 32
		},{
			label: '50s　￥40',
			value: 40
		},{
			label: '60s　￥48',
			value: 48
		}], {
			onChange: function(res){
				console.log(res);
			},
			onConfirm: function(res){
				console.log(res);
				that.val("￥" + res);
			}
		}
	);
});
/* ...霸屏事件.end */

/* ...打赏事件.start */
$(".J__wchatDs").on("click", function(){
	var bpidx = wcPop({
		skin: 'ios',
		content: $("#J__popupTmpl-Dashang").html(),
		style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
		shadeClose: false,

		btns: [
			{
				text: '<span class="btn-dashang">打赏</span>',
				style: 'background:#00c1de;color:#fff;font-size:16px;',
				onTap() {
					alert("打赏成功！");
					wcPop.close(bpidx);
				}
			}
		]
	});
});
//打赏节目picker
$("body").on("click", ".wc__popupTmpl input[name='dschooseProgram']", function(){
	var that = $(this);
	weui.picker([{
			label: '小品：送礼',
			value: '小品：送礼'
		},{
			label: '歌曲：红日',
			value: '歌曲：红日'
		},{
			label: '相声：就服你',
			value: '相声：就服你'
		},{
			label: '歌曲：上海滩',
			value: '歌曲：上海滩'
		},{
			label: '小品：回家过年',
			value: '小品：回家过年'
		},{
			label: '相声：逗你玩',
			value: '相声：逗你玩'
		}], {
			onChange: function(res){
				console.log(res);
			},
			onConfirm: function(res){
				console.log(res);
				that.val(res);
			}
		}
	);
});
//选择礼物
$("body").on("click", "#J__chooseGift .gift", function(){
	$(this).addClass("selected").siblings().removeClass("selected");
	$(".popui__panel-btn .btn-dashang").html('支付 <em class="ff-ar">￥<i class="moneyNum">'+ $(this).find(".amount em").text() +'</i></em> 打赏');
	
	console.log($(this).attr("data-gift"));
});
/* ...打赏事件.end */

/* ...红包事件.start */
$(".J__wchatHb").on("click", function(){
	var bpidx = wcPop({
		skin: 'ios',
		content: $("#J__popupTmpl-Hongbao").html(),
		style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
		shadeClose: false,

		btns: [
			{
				text: '塞钱进红包',
				style: 'background:#00c1de;color:#fff;font-size:16px;',
				onTap() {
					alert("塞钱成功！");
					wcPop.close(bpidx);
				}
			}
		]
	});
});
/* ...红包事件.end */

// ...关闭
$("body").on("click", ".wc__popupTmpl .wc-xclose", function(){
	wcPop.close();
});

// ...处理编辑器信息
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);