默认
发表评论 1
想开发IM:买成品怕坑?租第3方怕贵?找开源自已撸?尽量别走弯路了... 找站长给点建议
h5多互动聊天室|仿微信群聊|多人聊天直播间
阅读(24204) | 评论(1 收藏 淘帖
h5移动端微场景聊天室|h5直播聊天室|仿微信界面群聊
世界杯多人互动聊天室,最近一直捣鼓利用HTML5开发了一个手机端仿微信界面聊天室,采用750px + flex全新布局,以及使用rem响应式配合fontsize.js,页面弹窗则是使用自己开发的wcPop.js插件;编辑器部分由原先的单一表情新增为动图表情,实现了消息、表情发送 | 大图、视频效果预览 | 仿微信红包、打赏等微交互功能。


案例截图:
h5多互动聊天室|仿微信群聊|多人聊天直播间_002360截图20180703094436583.jpg    h5多互动聊天室|仿微信群聊|多人聊天直播间_004360截图20180703094558646.jpg
h5多互动聊天室|仿微信群聊|多人聊天直播间_005360截图20180703094648536.jpg    h5多互动聊天室|仿微信群聊|多人聊天直播间_006360截图20180703094742961.jpg
h5多互动聊天室|仿微信群聊|多人聊天直播间_007360截图20180703094909872.jpg    h5多互动聊天室|仿微信群聊|多人聊天直播间_008360截图20180703095118526.jpg
h5多互动聊天室|仿微信群聊|多人聊天直播间_010360截图20180703095355515.jpg    h5多互动聊天室|仿微信群聊|多人聊天直播间_011360截图20180703095500179.jpg
h5多互动聊天室|仿微信群聊|多人聊天直播间_012360截图20180703095616681.jpg    h5多互动聊天室|仿微信群聊|多人聊天直播间_013360截图20180703095702680.jpg
// ...滚动聊天区底部
function wchat_ToBottom(){
	//$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
	$(".wc__slimscroll2").slimscroll({
		scrollBy: $("#J__chatMsgList").height(),
		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();
});

// ...处理编辑器信息
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
	//$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
	surrounds();
}, true);
_editor.addEventListener("input", function(){
	surrounds();
}, false);

// 发送信息
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();
});

h5多互动聊天室|仿微信群聊|多人聊天直播间_微信-20180526112637.jpg
欢迎一起交流学习   QQ:282310962    微信:xy190310


即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

上一篇:我是一个线程下一篇:MCtalk对话抱抱星英语:从Diss在线英语教学乱象到回归教育本原
推荐方案
评论 1
欢迎访问我的技术博客
https://www.cnblogs.com/xiaoyan2017/
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部