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 () { //chromevar 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")); //chromesel.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);

總結

以上是生活随笔為你收集整理的h5聊天室案例|仿微信聊天界面|多人群聊的全部內容，希望文章能夠幫你解決所遇到的問題。

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