注册 登录
主题 : h5仿微信聊天项目|h5仿微信界面|h5聊天案例
级别: 新手上路
UID: 659568
精华: 0
发帖: 3
可可豆: 21 CB
威望: 21 点
在线时间: 0(时)
注册时间: 2018-08-10
最后登录: 2018-08-18
0 楼:  发表于: 2018-08-10 23:22    发自: Web Page

h5仿微信聊天项目|h5仿微信界面|h5聊天案例   

最近开发了一个h5聊天项目,高仿微信聊天界面效果,新增了微聊、通讯录、探索、我四个模块 左右触摸滑屏切换,聊天页面优化了多图预览、视频播放,长按菜单UI,聊天底部编辑器重新优化整理(新增多表情),弹窗则用到了自己开发的wcPop.js,具体看项目效果图吧!




















<!-- //微聊底部功能面板 -->
<div class="wc__footTool-panel">
????<!-- 输入框模块 -->
????<div class="wc__editor-panel wc__borT flexbox">
????????<div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true"></div></div>
????????<i class="btn btn-emotion"></i>
????????<i class="btn btn-choose"></i>
????????<button class="btn-submit J__wchatSubmit">发送</button>
????</div>

????<!-- 表情、选择模块 -->
????<div class="wc__choose-panel wc__borT" style="display: none;">
????????<!-- 表情区域 -->
????????<div class="wrap-emotion" style="display: none;">
????????????<div class="emotion__cells flexbox flex__direction-column">
????????????????<div class="emotion__cells-swiper flex1" id="J__swiperEmotion">
????????????????????<div class="swiper-container">
????????????????????????<div class="swiper-wrapper"></div>
????????????????????????<div class="pagination-emotion"></div>
????????????????????</div>
????????????????</div>
????????????????<div class="emotion__cells-footer" id="J__emotionFootTab">
????????????????????<ul class="clearfix">
????????????????????????<li class="swiperTmpl cur" tmpl="swiper__tmpl-emotion01"><img src="img/emotion/face01/face-lbl.png" alt=""></li>
????????????????????????<li class="swiperTmpl" tmpl="swiper__tmpl-emotion02"><img src="img/emotion/face02/face-lbl.gif" alt=""></li>
????????????????????????<li class="swiperTmpl" tmpl="swiper__tmpl-emotion03"><img src="img/emotion/face03/face-lbl.gif" alt=""></li>
????????????????????????<li class="swiperTmpl" tmpl="swiper__tmpl-emotion04"><img src="img/emotion/face04/face-lbl.gif" alt=""></li>
????????????????????????<li class="swiperTmpl" tmpl="swiper__tmpl-emotion05"><img src="img/emotion/face05/face-lbl.gif" alt=""></li>
????????????????????????<li class="swiperTmpl" tmpl="swiper__tmpl-emotion06"><img src="img/emotion/face06/face-lbl.gif" alt=""></li>
????????????????????????<li class="swiperTmplSet"><img src="img/wchat/icon__emotion-set.png" alt=""></li>
????????????????????</ul>
????????????????</div>
????????????</div>
????????</div>
????????<!-- 选择区域 -->
????????<div class="wrap-choose" style="display: none;">
????????????<div class="choose__cells">
????????????????<ul class="clearfix">
????????????????????<li><a class="J__wchatZp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-zp.png" /><input type="file" accept="image/*" /></span><em>照片</em></a></li>
????????????????????<li><a class="J__wchatSp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sp.png" /><input type="file" accept="video/*" /></span><em>视频</em></a></li>
????????????????????<li><a class="J__wchatHb" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-hb.png" /></span><em>红包</em></a></li>
????????????????????<li><a class="J__wchatSc" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sc.png" /></span><em>我的收藏</em></a></li>
????????????????????<li><a class="J__wchatWj" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-wj.png" /></span><em>文件</em></a></li>
????????????????</ul>
????????????</div>
????????</div>
????</div>
</div>



// ...滚动聊天区底部
function wchat_ToBottom(){
    //$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
    $(".wc__slimscroll2").slimscroll({
        scrollBy: $("#J__chatMsgList").height(),
        height: 'auto'
    });
}
 
// ...表情、选择区切换
$(".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();
});
 
// ...处理编辑器信息
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
    //$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
    surrounds();
}, true);
_editor.addEventListener("input", function(){
    surrounds();
}, false);
 
// 发送信息
var $chatMsgList = $("#J__chatMsgList");
function isEmpty(){
    var html = $editor.html();
    html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
    html = html.replace(/<[^img].*?>/ig, "");
    html = html.replace(/?/ig, "");
    return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function(){
    // 判断内容是否为空
    if(isEmpty()) return;
 
    var html = $editor.html();
    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    html = html.replace(reg, "<a href='$1$2'>$1$2</a>");
    var msgTpl = [
        '<li class="me">\
            <div class="content">\
                <p class="author">Nice奶思</p>\
                <div class="msg">'+ html +'</div>\
            </div>\
            <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
        </li>'
    ].join("");
    $chatMsgList.append(msgTpl);
 
    // 清空聊天框并获取焦点(处理输入法和表情 - 聚焦)
    if(!$(".wc__choose-panel").is(":hidden")){
        $editor.html("");
    }else{
        $editor.html("").focus().trigger("click");
    }
    wchat_ToBottom();
});

[ 此帖被xiaoyan2015在2018-08-10 23:29重新编辑 ]

关键词: html5 聊天 h5聊天
web前端开发工程师   QQ:282310962  wx:xy190310
描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部