運用html5開發的仿微信聊天室實戰項目weChatRoom，基于h5+css3+zepto+weui+wcPop+swiper等技術混合開發，整體采用flex布局模式，兼容適配各種手機屏幕，實現了消息、表情發送，動圖gif，圖片、視頻預覽，紅包/打賞等功能。

// ...滾動聊天區底部

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(/
/ig, "\r\n");

html = html.replace(//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, "$1$2");

var msgTpl = [

'

\\

Nice奶思

\'+ html +'\\

\

'

].join("");

$chatMsgList.append(msgTpl);

// 清空聊天框并獲取焦點(處理輸入法和表情 - 聚焦)

if(!$(".wc__choose-panel").is(":hidden")){

$editor.html("");

}else{

$editor.html("").focus().trigger("click");

}

wchat_ToBottom();

});

歡迎大家一起交流、學習 Q：282310962 wx：xy190310

有疑問加站長微信聯系(非本文作者)

總結

以上是生活随笔為你收集整理的html5在线聊天模板,h5聊天室模板|仿微信聊天室html5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。