前几天开发了一款手机端h5仿微信聊天，人唯有不停学习才能进步，这段时间倒腾着整理了下之前项目，又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本，聊天页面又重新优化了多图预览、视频播放，右键菜单menu，聊天底部编辑器模块重新优化源码，弹窗则是继续使用之前自己开发的wcPop.js，具体看项目效果图吧！

效果图：

// ...表情、选择区切换

$(".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[0];

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

}

// 格式化编辑器包含标签

_editor.addEventListener("click", function () {

    //$(".wc__choose-panel").hide();

}, true);

_editor.addEventListener("focus", function(){

    surrounds();

}, true);

_editor.addEventListener("input", function(){

    surrounds();

}, false);

// 点击表情

$("#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);

    } else if(that.hasClass("lg-face")){ //大表情

        var _img = that.parent().html();

        var _tpl = [

            '<li class="me">\

                <div class="content">\

                    <p class="author">Nice奶思</p>\

                    <div class="msg lgface">'+ _img + '</div>\

                </div>\

                <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\

            </li>'

        ].join("");

        $chatMsgList.append(_tpl);

        wchat_ToBottom();

    }

});
<!-- //微聊消息上墙面板 -->

<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日 晚上21:10</span></li>

                <li class="notice"><span>"<a href="#">Aster</a>"通过扫描"<a href="#">张小龙</a>"分享的二维码加入群聊</span></li>

                <li class="time"><span>2017年12月28日 晚上23:15</span></li>

                <li class="notice"><span>"<a href="#">雷军</a>"通过扫描"<a href="#">李彦宏</a>"分享的二维码加入群聊</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>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a>

                    <div class="content">

                        <p class="author">MR（马蓉 ▪ ☀☼㈱）</p>

                        <div class="msg">

                            马总，晚上好哇，还木休息呢。我还在景区度假呢，棒棒！ <img class="face" src="img/emotion/face01/69.png">

                        </div>

                    </div>

                </li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a>

                    <div class="content">

                        <p class="author">MR（马蓉 ▪ ☀☼㈱）</p>

                        <div class="msg picture">

                            <img class="img__pic" src="img/placeholder/wchat__img03.jpg" />

                        </div>

                    </div>

                </li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img12.jpg" /></a>

                    <div class="content">

                        <p class="author">Flowers（杨迪）</p>

                        <div class="msg">

                            哼，要红包。 <img class="face" src="img/emotion/face01/63.png">

                        </div>

                    </div>

                </li>

                <li class="time"><span>1月1日 早上02:00</span></li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img04.jpg" /></a>

                    <div class="content">

                        <p class="author">Xlong（张小龙）</p>

                        <div class="msg">

                            小程序后台新增推广功能，支持开发者添加与业务相关的自定义关键词!<br>

                            <a href="https://mp.weixin.qq.com/cgi-bin/wx">https://mp.weixin.qq.com/cgi-bin/wx</a>

                        </div>

                    </div>

                </li>

                <li class="me">

                    <div class="content">

                        <p class="author">Nice奶思</p>

                        <div class="msg">

                            小龙哥好敬业哇，牛牛牛！<img class="face" src="img/emotion/face01/79.png">

                        </div>

                    </div>

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>

                </li>

                <li class="me">

                    <div class="content">

                        <p class="author">Nice奶思</p>

                        <div class="msg video">

                            <img class="img__video" src="img/placeholder/wchat__video02-poster.jpg" videoUrl="img/placeholder/wchat__video02-Y7qk5uVcNcFJIY8O4mKzDw.mp4" />

                        </div>

                    </div>

                    <a class="avatar" href="好友主页(详细资料).html">

                        <img src="img/uimg/u__chat-img14.jpg" />

                    </a>

                </li>

                <li class="time"><span>2月25日 早上09:48</span></li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img06.jpg" /></a>

                    <div class="content">

                        <p class="author">Robin（李彦宏）</p>

                        <div class="msg">

                            早上好，各位，这次人机交互线下活动的视频及PPT预计明天可以公开啦 <img class="face" src="img/emotion/face01/4.png">

                        </div>

                    </div>

                </li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img15.jpg" /></a>

                    <div class="content">

                        <p class="author">King（李嘉诚）</p>

                        <div class="msg">

                            这个不错，支持下~ <img class="face" src="img/emotion/face01/42.png">

                        </div>

                    </div>

                </li>

                <li class="time"><span>3月12日 下午14:28</span></li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img03.jpg" /></a>

                    <div class="content">

                        <p class="author">Jay（周杰伦）</p>

                        <div class="msg">

                            我的新专辑《告白气球》将于6.1上线，到时希望大家多多支持啦~ <img class="face" src="img/emotion/face01/66.png">

                        </div>

                    </div>

                </li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a>

                    <div class="content">

                        <p class="author">Luci（王巧巧）</p>

                        <div class="msg picture">

                            <img class="img__pic" src="img/placeholder/wchat__img01.jpg" />

                        </div>

                    </div>

                </li>

                <li class="time"><span>"马云(老子天下第一)" 撤回了一条消息</span></li>

                <li class="others">

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a>

                    <div class="content">

                        <p class="author">Luci（王巧巧）</p>

                        <div class="msg video">

                            <img class="img__video" src="img/placeholder/wchat__video01-poster.jpg" videoUrl="img/placeholder/wchat__video01-Y7qk5uVcNcFJIY8O4mKzDw.mp4" />

                        </div>

                    </div>

                </li>

                <li class="time"><span>"Luci（王巧巧）" 已被移出群聊</span></li>

                <li class="me">

                    <div class="content">

                        <p class="author">Nice奶思</p>

                        <div class="msg picture">

                            <img class="img__pic" src="img/placeholder/wchat__img02.jpg">

                        </div>

                    </div>

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>

                </li>

                <li class="me">

                    <div class="content">

                        <p class="author">Nice奶思</p>

                        <div class="msg">

                            北京新世纪饭店发放福利啦，免费领取VIP会员，大家快去参与吧。

                        </div>

                    </div>

                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>

                </li>

            </ul>

        </div>

    </div>

</div>

web版仿微信聊天界面|h5仿微信电脑端案例开发的更多相关文章

  1. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  2. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  3. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...

  4. android 仿微信聊天界面，以及语音录制功能

    extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 ...

  5. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  6. Swift - 自定义单元格实现微信聊天界面

    1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...

  7. Android:日常学习笔记(8)———开发微信聊天界面

    Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.

  8. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  9. Android—简单的仿QQ聊天界面

    最近仿照QQ聊天做了一个类似界面,先看下界面组成(画面不太美凑合凑合呗,,,,):

随机推荐

  1. Django升级1.8的一些问题

    1.最明显的问题当然是Settings设置中关于模板的设置数据结构发生变化,这个就不细说了,你开个Django的1.8的新项目就知道怎么改了 2.migrations问题,这个问题是1.8最主要的修改 ...

  2. 走进netty

    三月份开始看公司RPC框架的源码,发现如果要折腾明白,网络通讯这块知识必不可少.于是从如下几点开始逐步研究. 一.基础知识篇 1.Unix下5种I/O模型 Linux的内核将所有外部设备都看作一个文件 ...

  3. JDK 源码分析（4）—— HashMap/LinkedHashMap/Hashtable

    JDK 源码分析(4)-- HashMap/LinkedHashMap/Hashtable HashMap HashMap采用的是哈希算法+链表冲突解决,table的大小永远为2次幂,因为在初始化的时 ...

  4. UE4学习心得：蓝图间信息通信的几种方法

    蓝图间通信是一个复杂关卡能否正常运行的关键,笔者在这里提供几种蓝图类之间的信息交互方法,希望能对读者有所帮助. 1.类引用 这是最直接的一种蓝图类之间的信息交互方式.首先在Editor中创建2个Act ...

  5. C#本质论笔记

    第一章 C#概述 1.1 Helo,World 学习一种新语言最好的办法就是动手写程序.        C#编译器创建的.exe程序是一个程序集(Assembly),我们也可以创建能由另一个较大的程序 ...

  6. Centos下安装Python的问题汇总

    Python下载地址(https://www.python.org/ftp/python/) 一.工具安装 1.Python的安装 tar vxf Python-2.7.13.tgz cd Pytho ...

  7. 使用libpcap获取http报文

    在上一篇博客中简单对libpcap库基本函数及基本工作流程做了些简单说明, 今天我们先了解一下pcap_loop()及pcap_dispatch()函数的功能及作用: (1)pcap_loop()循环 ...

  8. Tiny4412MMU内存管理

    MMU是Memory Management Unit的缩写,中文名是内存管理单元,MMU是由ARM芯片中的cp15协处理器管理,它的作用是负责虚拟内存到物理内存的映射 要将虚拟内存映射为物理内存,就要 ...

  9. eclipse汉化链接

    百度百科 https://jingyan.baidu.com/article/4b07be3cb1864e48b380f315.html 博客园:http://blog.csdn.net/sunny_ ...

  10. centos6 安装配置ss笔记

    2018-05-17 centos6 安装配置ss笔记 操作环境:Centos 6 x86_64 bbr 服务器地址:美国 1.准备VPS 在https://www.bwh1.net可购买,购买时已默 ...