h5高仿微信聊天界面|高仿版微信聊天html5实例
本帖最后由 xiaoyan2015 于 2018-11-21 23:12 编辑html5聊天场景在我们生活周围随处可见，如咨询、讨论组、京东/淘宝购物app等。最近就利用h5开发了个高仿版微信聊天，实现了消息、表情(动画)发送，图片、视频预览，长按类似QQ右键菜单，首页四个栏目可以滑屏切换，项目中多处应用到了swiper插件功能，另外自定义弹窗插件wcPop进行了一次api升级，功能效果都比较完善。
项目运行效果图：
// ...滚动聊天区底部
function wchat_ToBottom(){
setTimeout(function(){
$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
}, 10);
}
// ...点击聊天面板区域
$(document).on("click", ".wc__chatMsg-panel", function(e){
var _tapMenu = $(".wc__chatTapMenu");
if(_tapMenu.length && e.target != _tapMenu && !$.contains(_tapMenu, 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;
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;
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);判断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>
function isEmpty(){
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/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, "<a href='$1$2'>$1$2</a>");
//todo...
wchat_ToBottom();
});
欢迎一起交流学习： Q：282310962 wx：xy190310
厉害了~ 厉害厉害 {:2_30:}
https://www.jianshu.com/u/ca5f4c68e450
学习学习学习学习学习学习
页:
[1]