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

  7. // ...点击聊天面板区域
  8. $(document).on("click", ".wc__chatMsg-panel", function(e){
  9.         var _tapMenu = $(".wc__chatTapMenu");
  10.         if(_tapMenu.length && e.target != _tapMenu && !$.contains(_tapMenu[0], e.target)){
  11.                 // 关闭长按菜单
  12.                 _tapMenu.hide();
  13.                 $(".wc__chatMsg-panel").find("li .msg").removeClass("taped");
  14.         }
  15.         $(".wc__choose-panel").hide();
  16. });

  17. // ...表情、选择区切换
  18. $(".wc__editor-panel").on("click", ".btn", function(){
  19.         var that = $(this);
  20.         $(".wc__choose-panel").show();
  21.         if (that.hasClass("btn-emotion")) {
  22.                 $(".wc__choose-panel .wrap-emotion").show();
  23.                 $(".wc__choose-panel .wrap-choose").hide();
  24.                 // 初始化swiper表情
  25.                 !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
  26.         } else if (that.hasClass("btn-choose")) {
  27.                 $(".wc__choose-panel .wrap-emotion").hide();
  28.                 $(".wc__choose-panel .wrap-choose").show();
  29.         }
  30.         wchat_ToBottom();
  31. });

  32. // ...处理编辑器信息
  33. var $editor = $(".J__wcEditor"), _editor = $editor[0];
  34. function surrounds(){
  35.         setTimeout(function () { //chrome
  36.                 var sel = window.getSelection();
  37.                 var anchorNode = sel.anchorNode;
  38.                 if (!anchorNode) return;
  39.                 if (sel.anchorNode === _editor ||
  40.                         (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
  41.                         
  42.                         var range = sel.getRangeAt(0);
  43.                         var p = document.createElement("p");
  44.                         range.surroundContents(p);
  45.                         range.selectNodeContents(p);
  46.                         range.insertNode(document.createElement("br")); //chrome
  47.                         sel.collapse(p, 0);
  48.                         
  49.                         (function clearBr() {
  50.                                 var elems = [].slice.call(_editor.children);
  51.                                 for (var i = 0, len = elems.length; i < len; i++) {
  52.                                         var el = elems[i];
  53.                                         if (el.tagName.toLowerCase() == "br") {
  54.                                                 _editor.removeChild(el);
  55.                                         }
  56.                                 }
  57.                                 elems.length = 0;
  58.                         })();
  59.                 }
  60.         }, 10);
  61. }
  62. // 格式化编辑器包含标签
  63. _editor.addEventListener("click", function () {
  64.         $(".wc__choose-panel").hide();
  65. }, true);
  66. _editor.addEventListener("focus", function(){
  67.         surrounds();
  68. }, true);
  69. _editor.addEventListener("input", function(){
  70.         surrounds();
  71. }, 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.         var html = $editor.html();
  12.         var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  13.         html = html.replace(reg, "<a href='$1$2'>$1$2</a>");
  14.         
  15.         //todo...
  16.         
  17.         wchat_ToBottom();
  18. });
复制代码

欢迎一起交流学习: 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