前几天开发了一款手机端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. async/await 的基本实现和 .NET Core 2.1 中相关性能提升

    前言 这篇文章的开头,笔者想多说两句,不过也是为了以后再也不多嘴这样的话. 在日常工作中,笔者接触得最多的开发工作仍然是在 .NET Core 平台上,当然因为团队领导的开放性和团队风格的多样性(这和 ...

  2. py-oauth2包使用简记

    接前两天线上项目py2升级py3的书,老廖的一个旧库snspy,他已经不维护了,用的api又比较久,不好升级,最后速度找了个OAuth库取代了它,由于时间紧张,直接在pypi上搜索了一下,找到这个支持 ...

  3. SQL基本语句的优化10个原则

    原则一:尽量避免在列上进行运算,这样会导致索引失效. 例如: ; 优化: SELECT * FROM table WHERE d >= '2011-01-01'; 原则二:使用JOIN时,应该用 ...

  4. 如何在python脚本开发做code review

    在软件项目开发中,我们经常提到一个词“code review”.code review中文翻译过来就是代码评审或复查,简而言之就是编码完成后由其他人通过阅读代码来检查代码的质量(可编译.可运行.可读. ...

  5. 关于HTTP请求、Ajax请求，请求的同步和异步

    使用了很长时间的Ajax请求了,一直都是在以异步的方式在使用.昨天听了一个讲座涉及到apache server,偶然想到了这Ajax请求和HTTP请求的一些区别和联系,就在网上好好搜了一顿,把搜到的结 ...

  6. Selenium2Lib库之输入常用关键字实战

    4.1 Input Text关键字 按F5 查看Input Text关键字的说明,如下图: Input Text 关键字用于向文本框输入内容,需要传2个参数(文本框的元素定位和输入的值). 项目例子: ...

  7. iOS webservice接口soap协议调用遇到的问题

    这是第一次调webservice的接口,并且后台没太做过移动端的接口,所以遇到了很多让人崩溃的困难.吃一堑长一智,所以这种时候懒得写博客的我就要趁着这股热乎劲把这次的过程记录下来啦~ 首先要做的就是, ...

  8. 【转】Javascript错误处理——try…catch

    无论我们编程多么精通,脚本错误怎是难免.可能是我们的错误造成,或异常输入,错误的服务器端响应以及无数个其他原因. 通常,当发送错误时脚本会立刻停止,打印至控制台. 但try...catch语法结构可以 ...

  9. 非常适用的Sourceinsight插件，提高效率【强力推荐】

    转自:http://www.cnblogs.com/heiyue/p/6225975.html 一直使用sourceinsight编辑C/C++代码,sourceinsight是一个非常好用的编辑工具 ...

  10. mysql性能调优与架构设计笔记

    1.mysql基本介绍 mysql支持多线程高并发的关系型数据库; 数据库存储引擎InnoDB.MyISAM; mysql快速崛起的原因就是他是开源的; 性能一直是mysql自豪的一大特点; 2.my ...