基於h5實現的仿微信聊天介面web版案例

h5仿微信電腦端聊天介面實戰案例|h5仿微信web端開發

前一段時間有基於html5 css3開發了一個移動端h5仿微信聊天功能,最近又倒騰了一個仿微信電腦端介面,也是使用html5 css3 jquery wcpop等技術開發的web版仿微信聊天介面。

效果圖:

<!-- <>模組2——聊天列表區域 -->
<div class="wc__chatListSide flexbox flex__direction-column">
<div class="wc__chatSearArea">
<div class="inner">
<div class="iptbox flexbox">
<input class="flex1" type="text" name="kw" placeholder="搜尋" />
</div>
</div>
</div>
<div class="wc__scrolling-panel flex1">
<div class="wc__slimscroll">
<ul class="wc__recordChat" id="J__recordChatList">
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img01.jpg" /></div>
<div class="info flex1">
<h2 class="title clamp1">馬雲(老子天下第一)</h2>
<p class="desc clamp1">阿里集團:4家o2o商家已經入駐天貓平臺,打響開年第一炮~~~</p>
</div>
<label class="time">14:42</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img02.jpg" /></div>
<div class="info flex1">
<h2 class="title">馬蓉 ▪ ☀☼㈱</h2>
<p class="desc clamp1">就喜歡你們看不慣我的樣子</p>
</div>
<label class="time">昨天</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img03.jpg" /></div>
<div class="info flex1">
<h2 class="title">周杰倫-Jay</h2>
<p class="desc clamp1">新專輯正式於08.21日發行了,大家可以去支援下</p>
</div>
<label class="time">3月23日</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img04.jpg" /><em class="wc__badge">10</em></div>
<div class="info flex1">
<h2 class="title">張小龍</h2>
<p class="desc clamp1">九大“門派”圍攻小程式,馬化騰:“莫慌”</p>
</div>
<label class="time">2月28日</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img05.jpg" /></div>
<div class="info flex1">
<h2 class="title">雷軍</h2>
<p class="desc clamp1">我有小米,難度還怕你們不成?</p>
</div>
<label class="time">2月19日</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img06.jpg" /></div>
<div class="info flex1">
<h2 class="title">李彥巨集-Robin</h2>
<p class="desc clamp1">大家看喜慶不,高顏值又來搞事情啦。</p>
</div>
<label class="time">2月15日</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img14.jpg" /><em class="wc__badge">2</em></div>
<div class="info flex1">
<h2 class="title">Nice奶思</h2>
<p class="desc clamp1">好無聊哇,你們有木有想我啊❤❤❤</p>
</div>
<label class="time">昨天</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img08.jpg" /></div>
<div class="info flex1">
<h2 class="title">楊冪冪</h2>
<p class="desc clamp1">新劇終於殺青了,好嗨森~</p>
</div>
<label class="time">22:50</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img15.jpg" /></div>
<div class="info flex1">
<h2 class="title">李嘉誠</h2>
<p class="desc clamp1">人要堅持走好每一步,充實每一天!</p>
</div>
<label class="time">08:00</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img07.jpg" /></div>
<div class="info flex1">
<h2 class="title">劉強東</h2>
<p class="desc clamp1">結婚了,祝福我們吧</p>
</div>
<label class="time">08:00</label>
</li>
<li class="flexbox">
<div class="img"><img src="img/uimg/u__chat-img11.jpg" /></div>
<div class="info flex1">
<h2 class="title">小闊愛</h2>
<p class="desc clamp1">開森每一天。</p>
</div>
<label class="time">08:00</label>
</li>
</ul>
</div>
</div>
</div>
// ...表情、選擇區切換
$(".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);
}
// 格式化編輯器包含標籤
_editor.addEventListener("click", function () {
//$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
surrounds();
}, true);
_editor.addEventListener("input", function(){
surrounds();
}, false);
// 點選表情
$("#J__swiperEmotion").on("click", ".face-list span img", function(){
var that = $(this), range;
if(that.hasClass("face")){ //小表情
var img = that[0].cloneNode(true);
_editor.focus();
_editor.blur(); //輸入表情時禁止輸入法
setTimeout(function(){
if(document.selection && document.selection.createRange){
document.selection.createRange().pasteHTML(img);
}else if(window.getSelection && window.getSelection().getRangeAt){
range = window.getSelection().getRangeAt(0);
range.insertNode(img);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}, 10);
}else if(that.hasClass("del")){ //刪除
_editor.focus();
_editor.blur(); //輸入表情時禁止輸入法
setTimeout(function(){
range = window.getSelection().getRangeAt(0);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand("delete");
}, 10);
} else if(that.hasClass("lg-face")){ //大表情
var _img = that.parent().html();
var _tpl = [
'<li class="me">\
<div class="content">\
<p class="author">Nice奶思</p>\
<div class="msg lgface">'  _img   '</div>\
</div>\
<a class="avatar" href="微聊(好友主頁).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
</li>'
].join("");
$chatMsgList.append(_tpl);
wchat_ToBottom();
}
});

歡迎大家一起交流學習  企鵝號:(282310962) wx:(xy190310)

專案開發中使用到的一些素材。。。