h5高仿微信聊天(webapp升級版)|h5微聊場景|仿微信聊天介面例項

移動端h5微場景開發——微聊webapp,前些時間有寫過一個H5仿微信聊天專案實戰案例,最近又在原先的專案基礎上,進行了一次重新架構佈局,整體效果更接近原生微信聊天介面,而且用到了自己開發的定製彈窗wcPop.js,裡面內建多種自定義呼叫模式,可根據不同開發需求自行定製。另外底部編輯器部分重新拆分使用flex設計佈局,新增了多動畫表情、長按彈出選單等功能。

<!-- //微聊底部功能面板 -->
<div class="wc__footTool-panel">
<!-- 輸入框模組 -->
<div class="wc__editor-panel wc__borT flexbox">
<div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true"></div></div>
<i class="btn btn-emotion"></i>
<i class="btn btn-choose"></i>
<button class="btn-submit J__wchatSubmit">傳送</button>
</div>
<!-- 表情、選擇模組 -->
<div class="wc__choose-panel wc__borT" style="display: none;">
<!-- 表情區域 -->
<div class="wrap-emotion" style="display: none;">
<div class="emotion__cells flexbox flex__direction-column">
<div class="emotion__cells-swiper flex1" id="J__swiperEmotion">
<div class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="pagination-emotion"></div>
</div>
</div>
<div class="emotion__cells-footer" id="J__emotionFootTab">
<ul class="clearfix">
<li class="swiperTmpl cur" tmpl="swiper__tmpl-emotion01"><img src="img/emotion/face01/face-lbl.png" alt=""></li>
<li class="swiperTmpl" tmpl="swiper__tmpl-emotion02"><img src="img/emotion/face02/face-lbl.gif" alt=""></li>
<li class="swiperTmpl" tmpl="swiper__tmpl-emotion03"><img src="img/emotion/face03/face-lbl.gif" alt=""></li>
<li class="swiperTmpl" tmpl="swiper__tmpl-emotion04"><img src="img/emotion/face04/face-lbl.gif" alt=""></li>
<li class="swiperTmpl" tmpl="swiper__tmpl-emotion05"><img src="img/emotion/face05/face-lbl.gif" alt=""></li>
<li class="swiperTmpl" tmpl="swiper__tmpl-emotion06"><img src="img/emotion/face06/face-lbl.gif" alt=""></li>
<li class="swiperTmplSet"><img src="img/wchat/icon__emotion-set.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 選擇區域 -->
<div class="wrap-choose" style="display: none;">
<div class="choose__cells">
<ul class="clearfix">
<li><a class="J__wchatZp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-zp.png" /><input type="file" accept="image/*" /></span><em>照片</em></a></li>
<li><a class="J__wchatSp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sp.png" /><input type="file" accept="video/*" /></span><em>視訊</em></a></li>
<li><a class="J__wchatHb" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-hb.png" /></span><em>紅包</em></a></li>
<li><a class="J__wchatSc" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sc.png" /></span><em>我的收藏</em></a></li>
<li><a class="J__wchatWj" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-wj.png" /></span><em>檔案</em></a></li>
</ul>
</div>
</div>
</div>
</div>
// ...滾動聊天區底部
function wchat_ToBottom(){
$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
}
// ...點選聊天面板區域
$(document).on("click", ".wc__chatMsg-panel", function(e){
var _tapMenu = $(".wc__chatTapMenu");
if(_tapMenu.length && e.target != _tapMenu && !$.contains(_tapMenu[0], e.target)){
// 關閉長按選單
_tapMenu.hide();
$(".wc__chatMsg-panel").find("li .msg").removeClass("taped");
}
$(".wc__choose-panel").hide();
});
// ...表情、選擇區切換
$(".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();
});
// ...處理編輯器資訊
var $editor = $(".J__wcEditor"), _editor = $editor[0];
function surrounds(){
setTimeout(function () { //chrome
var 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")); //chrome
sel.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);
}

效果圖如下:

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