h5聊天室webapp版|仿微信介面聊天室|多人直播聊天室

h5手機端聊天室|webapp群聊天室|仿微信聊天室|h5直播聊天室

今年的FIFA世界盃甚是精彩,最近興致高漲就利用HTML5開發了一個手機端仿微信介面聊天室,該h5聊天室採用750px全新伸縮flex佈局,以及使用rem響應式配合fontsize.js,頁面彈窗則是使用自己開發的wcPop.js外掛;編輯器部分由原先的單一表情新增為動圖表情,實現了訊息、表情傳送 | 大圖、視訊效果預覽 | 仿微信紅包、打賞等微互動功能。奮鬥

專案截圖如下:

// ...滾動聊天區底部
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();
});

歡迎大家一起來交流學習  QQ:(282310962) WX:(xy190310)