运用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 = [

'

\

\

\

'

].join("");

$chatMsgList.append(msgTpl);

// 清空聊天框并获取焦点(处理输入法和表情 - 聚焦)

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

$editor.html("");

}else{

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

}

wchat_ToBottom();

});

欢迎大家一起交流、学习 Q：282310962 wx：xy190310

有疑问加站长微信联系(非本文作者)