html5仿微信/微博网页端|h5网页聊天室
上次有给大家分享h5手机端聊天室，最近又在原先基础上开发了一个仿微信、微博网页web版聊天系统，使用到了HTML5+css3+jQuery+wcpop等技术开发，弹窗插件wcPop.js进行了一次全面api升级，修复编辑器插入表情时光标定位错误bug，新增了上传附件及自定义推送内容，另外也新增了个人名片、上传附件、分享等样式。
页面主要使用css3的flex布局实现，侧边是消息、通讯录、朋友圈、设置模块，中间和右边则是相应模块的展示内容，布局效果和微信客户端差不多
<!-- //消息模板 -->
<div class="wc__chatMsg-panel flex1">
<div class="wc__slimscroll2">
<div class="chatMsg-cnt">
<ul class="clearfix" id="J__chatMsgList">
<li class="time"><span>2017年12月28日 晚上23:15</span></li>
<li class="notice"><span>当前群聊人数较多，已显示群成员昵称，同时为了信息安全，请注意聊天隐私</span></li>
<li class="time"><span>2017年12月31日 晚上22:30</span></li>
<!-- 别人-->
<li class="others">
<a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img01.jpg" /></a>
<div class="content">
<p class="author">马云(老子天下第一)</p>
<div class="msg">
hello 各位女士、先生，欢迎大家来到达摩派，进群后记得修改备注哈~~ 名字+公司/职业/机构 <img class="face" src="img/emotion/face01/29.png"><img class="face" src="img/emotion/face01/71.png"><img class="face" src="img/emotion/face01/75.png">
</div>
</div>
</li>
<!--自己-->
<li class="me">
<div class="content">
<p class="author">Nice奶思</p>
<div class="msg">
么么哒，马总发个红包呗！
</div>
</div>
<a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
</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();
});
对于编辑器里面的一些内容则需要进行标签处理，去掉一些无用标签包裹
如下代码片段就把内容处理成<p></p>来包裹
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);
}
在光标处插入内容则使用到 selection，js光标对象selection的使用
document.selection : IE
window.getSelection() ：Chrome、Safari、FireFox
// 光标处插入表情及删除操作
$("#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);
}
});
