Swiper中文论坛

标题: h5高仿微信聊天界面|高仿版微信聊天html5实例 [打印本页]
作者: xiaoyan2015    时间: 2018-11-21 23:10
标题: h5高仿微信聊天界面|高仿版微信聊天html5实例
本帖最后由 xiaoyan2015 于 2018-11-21 23:12 编辑

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. }

  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. });

  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. });

  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;

  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    时间: 2018-11-22 14:33
厉害了~
作者: tsr    时间: 2018-11-23 16:53
厉害厉害
作者: xiaoyan2015    时间: 2018-11-24 11:09

https://www.jianshu.com/u/ca5f4c68e450
作者: jiansanxiang    时间: 2021-8-3 14:21

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



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2