h5高仿微信聊天界面|高仿版微信聊天html5实例

xiaoyan2015

html5聊天场景在我们生活周围随处可见，如咨询、讨论组、京东/淘宝购物app等。最近就利用h5开发了个高仿版微信聊天，实现了消息、表情(动画)发送，图片、视频预览，长按类似QQ右键菜单，首页四个栏目可以滑屏切换，项目中多处应用到了swiper插件功能，另外自定义弹窗插件wcPop进行了一次api升级，功能效果都比较完善。

项目运行效果图：

1. // ...滚动聊天区底部
   
2. function wchat_ToBottom(){
   
3.         setTimeout(function(){
   
4.                 $(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
   
5.         }, 10);
   
6. }
   
7. 
   
8. // ...点击聊天面板区域
   
9. $(document).on("click", ".wc__chatMsg-panel", function(e){
   
10.         var _tapMenu = $(".wc__chatTapMenu");
    
11.         if(_tapMenu.length && e.target != _tapMenu && !$.contains(_tapMenu[0], e.target)){
    
12.                 // 关闭长按菜单
    
13.                 _tapMenu.hide();
    
14.                 $(".wc__chatMsg-panel").find("li .msg").removeClass("taped");
    
15.         }
    
16.         $(".wc__choose-panel").hide();
    
17. });
    
18. 
    
19. // ...表情、选择区切换
    
20. $(".wc__editor-panel").on("click", ".btn", function(){
    
21.         var that = $(this);
    
22.         $(".wc__choose-panel").show();
    
23.         if (that.hasClass("btn-emotion")) {
    
24.                 $(".wc__choose-panel .wrap-emotion").show();
    
25.                 $(".wc__choose-panel .wrap-choose").hide();
    
26.                 // 初始化swiper表情
    
27.                 !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
    
28.         } else if (that.hasClass("btn-choose")) {
    
29.                 $(".wc__choose-panel .wrap-emotion").hide();
    
30.                 $(".wc__choose-panel .wrap-choose").show();
    
31.         }
    
32.         wchat_ToBottom();
    
33. });
    
34. 
    
35. // ...处理编辑器信息
    
36. var $editor = $(".J__wcEditor"), _editor = $editor[0];
    
37. function surrounds(){
    
38.         setTimeout(function () { //chrome
    
39.                 var sel = window.getSelection();
    
40.                 var anchorNode = sel.anchorNode;
    
41.                 if (!anchorNode) return;
    
42.                 if (sel.anchorNode === _editor ||
    
43.                         (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
    
44.                         
    
45.                         var range = sel.getRangeAt(0);
    
46.                         var p = document.createElement("p");
    
47.                         range.surroundContents(p);
    
48.                         range.selectNodeContents(p);
    
49.                         range.insertNode(document.createElement("br")); //chrome
    
50.                         sel.collapse(p, 0);
    
51.                         
    
52.                         (function clearBr() {
    
53.                                 var elems = [].slice.call(_editor.children);
    
54.                                 for (var i = 0, len = elems.length; i < len; i++) {
    
55.                                         var el = elems[i];
    
56.                                         if (el.tagName.toLowerCase() == "br") {
    
57.                                                 _editor.removeChild(el);
    
58.                                         }
    
59.                                 }
    
60.                                 elems.length = 0;
    
61.                         })();
    
62.                 }
    
63.         }, 10);
    
64. }
    
65. // 格式化编辑器包含标签
    
66. _editor.addEventListener("click", function () {
    
67.         $(".wc__choose-panel").hide();
    
68. }, true);
    
69. _editor.addEventListener("focus", function(){
    
70.         surrounds();
    
71. }, true);
    
72. _editor.addEventListener("input", function(){
    
73.         surrounds();
    
74. }, 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>

1. function isEmpty(){
   
2.         var html = $editor.html();
   
3.         html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
   
4.         html = html.replace(/<[^img].*?>/ig, "");
   
5.         html = html.replace(/ /ig, "");
   
6.         return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
   
7. }
   
8. $(".J__wchatSubmit").on("click", function(){
   
9.         // 判断内容是否为空
   
10.         if(isEmpty()) return;
    
11. 
    
12.         var html = $editor.html();
    
13.         var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    
14.         html = html.replace(reg, "<a href='$1$2'>$1$2</a>");
    
15.         
    
16.         //todo...
    
17.         
    
18.         wchat_ToBottom();
    
19. });

复制代码

欢迎一起交流学习： Q：282310962   wx：xy190310

12312sgtg

厉害了~

tsr

厉害厉害

xiaoyan2015

https://www.jianshu.com/u/ca5f4c68e450

jiansanxiang

学习学习学习学习学习学习