html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

之前有开发过一个h5微直播项目，当时里面也用到过聊天模块部分，今天就在之前聊天部分的基础上重新抽离模块，开发了这个h5趣聊项目，功能效果比较类似微信聊天界面。采用html5+css3+Zepto+swiper+wcPop+flex等技术融合开发，实现了发送消息、表情(动图)，图片、视频预览，添加好友/群聊，右键长按菜单。另外新增了语音模块、地图定位模块。整体功能界面效果比较接近微信聊天。

项目运行效果图：

// ripple波纹效果
wcRipple({ elem: ‘.effect__ripple-fff‘, opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: ‘.effect__ripple‘, opacity: .15, speed: .5, bgColor: "#000" });

// 禁止长按弹出系统菜单
$("body").on("contextmenu", ".weChatIM__panel", function (e) {
    e.preventDefault();
});

// 顶部 “+” 菜单
$("#J__topbarAdd").on("click", function(e){
    var _points = [e.clientX, e.clientY];
    var contextMenuIdx = wcPop({
        skin: ‘contextmenu‘, shade: true,shadeClose: true,opacity: 0,follow: _points,
        style: ‘background:#3d3f4e; min-width:3.5rem;‘,
        btns: [
            {text: ‘<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>‘,style: ‘color:#fff;‘, onTap(){
                wcPop.close(contextMenuIdx);
                // 添加好友
                var addfriendIdx = wcPop({
                    id: ‘wcim_fullscreen‘,
                    skin: ‘fullscreen‘,
                    title: ‘添加好友‘,
                    content: $("#J__popupTmpl-addFriends").html(),
                    position: ‘right‘,
                    opacity: .1,
                    xclose: true,
                    style: ‘background: #f2f1f6;‘
                });
            }},
            {text: ‘<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>‘,style: ‘color:#fff;‘, onTap(){
                wcPop.close(contextMenuIdx);
                // 发起群聊
                var addfriendIdx = wcPop({
                    id: ‘wcim_fullscreen‘,
                    skin: ‘fullscreen‘,
                    title: ‘发起群聊‘,
                    content: $("#J__popupTmpl-launchGroupChat").html(),
                    position: ‘right‘,
                    opacity: .1,
                    xclose: true,
                    style: ‘background: #f2f1f6;‘
                });
            }},
            {text: ‘<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>‘,style: ‘color:#fff;‘,}
        ]
    });
});

◆ 摇一摇模块弹窗模板：

<!-- …… 摇一摇加好友弹窗模板.End -->
<div class="wcim__popup-tmpl">
    <div id="J__popupTmpl-shakeFriends" style="display:none;">
        <div class="wcim__popupTmpl tmpl-shakeFriends">
            <div class="wcim__shakeFriends-panel">
                <span class="btn-setShake J__shakeSetting"><i class="iconfont icon-shezhi c-9ea0a3 fs-45"></i></span>

                <div class="shake-ico"><i class="iconfont icon-yaoyiyao"></i></div>
                <div class="shake-loading"><div class="J__shakeLoading" style="display:none;"><img src="img/deng.gif" /><em>正在搜寻同一时刻摇晃手机的人</em></div></div>
                <!-- 信息 -->
                <div class="shake-box J__shakeInfoBox">
                    <!-- <div class="shake-info flexbox flex-alignc">
                        <img class="uimg" src="img/uimg/u__chat-img08.jpg" />
                        <div class="flex1">
                            <h2 class="name">大幂幂<i class="iconfont icon-nv c-ee4343"></i></h2>
                            <label class="lbl clamp1">开森每一刻，每天都要美美哒！</label>
                        </div>
                    </div> -->
                </div>
                <div class="shake-item J__swtShakeItem">
                    <a class="active" href="javascript:;"><i class="iconfont icon-yonghu"></i><em>人</em></a>
                    <a href="javascript:;"><i class="iconfont icon-qunzu"></i><em>群组</em></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- …… 摇一摇加好友弹窗模板.End -->
// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
    var shakePopIdx = wcPop({
        id: ‘wcim_shake_fullscreen‘,
        skin: ‘fullscreen‘,
        title: ‘摇一摇‘,
        content: $("#J__popupTmpl-shakeFriends").html(),
        position: ‘right‘,
        xclose: true,
        style: ‘background: #303030;‘,
        show: function(){
            // 摇一摇功能
            var _shake = new Shake({threshold: 15});
            _shake.start();
            window.addEventListener("shake", function(){
                window.navigator.vibrate && navigator.vibrate(500);
                // console.log("触发摇一摇！");

                $(".J__shakeInfoBox").html("");
                $(".J__shakeLoading").fadeIn(300);
                // 消息模板
                var shakeTpl = [
                    ‘<div class="shake-info flexbox flex-alignc">                        <img class="uimg" src="img/uimg/u__chat-img08.jpg" />                        <div class="flex1">                            <h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>                            <label class="lbl clamp1">开森每一刻，每天都要美美哒！</label>                        </div>                    </div>‘
                ].join("");
                setTimeout(function(){
                    $(".J__shakeLoading").fadeOut(300);
                    $(".J__shakeInfoBox").html(shakeTpl);
                }, 1500);
            }, false);
        }
    });
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
    $(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
    wcPop({
        skin: ‘actionsheetMini‘,
        anim: ‘footer‘,
        btns: [
            { text: ‘<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>‘ },
            { text: ‘摇到的历史‘ },
        ]
    });
});

◆ h5+js仿微信语音弹窗效果模块：

// >>> 【按住说话核心模块】------------------------------------------
// ...按住说话
var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true;
var voiceIdx;
var difftime = 0;
function initVoice(){
    _voiceObj.on("touchstart", function(e){
        difftime = new Date();
        if(!isDrag) return;
        isDrag = false;
        eY1 = e.originalEvent.targetTouches[0].pageY;
        _voiceObj.text("松开 结束");

        // 弹窗提示
        voiceIdx = wcPop({
            id: ‘wdtVoice‘,
            skin: ‘toast‘,
            content: ‘<div style="margin-top:-10px;"><i class="iconfont icon-yuyin" style="font-size:65px;"></i><div style="line-height:32px;">手指上滑，取消发送</div></div>‘,
            style: ‘border-radius:6px;height: 160px; width:160px;‘,
            time: 10,
            opacity: 0,
        });

        _voiceObj.on("touchmove", function (e) {
            e.preventDefault();

            eY3 = e.originalEvent.targetTouches[0].pageY;
            if(eY1 - eY3 < 150){
                _voiceObj.text("松开 结束");
            }else{
                _voiceObj.text("松开手指，取消发送");

                // 弹窗提示
                $("#wdtVoice .popui__panel-cnt").html(‘<div style="margin-top:-10px;"><i class="iconfont icon-quxiao" style="font-size:65px;"></i><div style="background:#c53838; border-radius:3px; line-height:32px;">松开手指，取消发送</div></div>‘);
            }
        });
    });
    _voiceObj.on("touchend", function (e) {
        e.preventDefault();
        eY2 = e.originalEvent.changedTouches[0].pageY;
        _voiceObj.text("按住 说话");

        // 录音时间太短提示
        if(new Date() - difftime < 1000){
            // 弹窗提示
            $("#wdtVoice .popui__panel-cnt").html(‘<div style="margin-top:-10px;"><i class="iconfont icon-gantan" style="font-size:65px;"></i><div style="line-height:32px;">录音时间太短！</div></div>‘);
        } else{
            if (eY1 - eY2 < 150) {
                // 发送成功
                submitData();
                console.log("测试数据");
            } else {
                // 取消发送
                console.log("cancel");
            }
        }
        // 关闭弹窗
        setTimeout(function(){
            wcPop.close(voiceIdx);
        }, 500);
        isDrag = true;
    });
}

◆ js获取语音时长：

// ...获取语音时长
getVoiceTime();
function getVoiceTime(){
    $("#J__chatMsgList li .audio").each(function () {
        var that = $(this), audio = that.find("audio")[0], duration;
        audio.load();
        audio.oncanplay = function(){
            duration = Math.ceil(audio.duration);
            if (duration == ‘Infinity‘) {
                getVoiceTime();
            } else {
                that.find(".time").text(duration + `‘‘`);
                that.attr("data-time", duration);
                // 语音宽度%
                var percent = (duration / 60).toFixed(2) * 100 + 20 + ‘%‘;
                that.css("width", percent);
            }
        }
    });
}

原文地址：https://www.cnblogs.com/xiaoyan2017/p/10163043.html

时间： 2024-10-21 01:50:35

html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图的相关文章

【IOS源码】智能聊天机器人源码—仿微信界面

这是一个IOS智能聊天机器人的源码,采用了仿微信的风格设计,调用的是图灵机器人的API,能够实现智能聊天.讲故事.讲笑话.查天气.查公交等丰富的功能 [1].[代码] 仿微信界面: UITableView 跳至 [1] [2] [3] [4] [5] [6] ? 1 2 3 4 5 6 7 8 9 //add UItableView     self.tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 44, self.view.f

H5仿微信界面教程(一)

前言 先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅. 1 用到的知识点 jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新.日历.地址选择器等丰富的拓展组件.jQuery WeUI 中的JS组件均是以JQuery 插件的形式提供,使用非常方便,并且可以和React.Angular.VUE之类的主流JS框架一起使用. WeUI 是微信官方团队针对微信提供的一个H5 UI库,它只提供了一组CSS组件.jQuer

h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

html5开发的仿微博.微信聊天web端案例,h5仿微信聊天网页版,采用html5+css3+jquery+swiper+wcPop等技术进行布控架构开发,弹窗插件wcPop.js进行了一次全面api升级,修复编辑器插入表情时光标定位错误bug,新增了上传附件及自定义推送内容,另外也新增了个人名片.上传附件.分享等样式,功能上实现了消息.表情的发送,图片.视频全屏预览. 项目运行图: /* --- 用户设置.Start ---*/ // 联系人/群聊切换 $("body").on(&q

web版仿微信聊天界面|h5仿微信电脑端案例开发

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

h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是使用自己开发的wcPop.js插件:编辑器部分由原先的单一表情新增为动图表情,实现了消息.表情发送 | 大图.视频效果预览 | 仿微信红包.打赏等微交互功能. 案例截图: // ...滚动聊天区底部 function wchat_ToBottom(){ //$(".wc__chatMsg-panel

Android ActionBar仿微信界面

ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的ActionProvider时候要注意引入的包一定是android.view.ActionProvider,不能是android.support.v4.view.ActionProvider 2),切换的Title可以参考之前之前一篇文章利用RadioGroup来做,这里是利用一个开源的项目PagerS

Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例

一.项目简述 taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实现了发送消息/emoj表情.gif表情大图.图片预览.发红包.动态圈等功能. 二.预览效果 编译到H5端.小程序.App端效果如下:(后续大图均为APP端) 三.技术栈 编码/技术:Vscode + react/taro/redux/RN iconfont图标:阿里字体图标库 自定义导航栏Navig

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom,实现了原生app启动页.As

如何做一个自己的开源聊天项目？（仿微信）

万事开头难 在我决定做开源是因为自身工作接触到大多数的项目都是基于开源大佬写的框架,自觉惭愧,工作以来一直忙于业务与功能实现,多多少少做过的几个项目也没能抽出部分好一点的功能业务Maven包什么的提供也同行使用或借鉴,这实在是有悖于自己的初心. 决定做开源是今年(2018)7月末的时候,自己曾做的一个Iot项目刚刚被几个网上的朋友问到,并寻求源码,那么久做了一个Demo,并放到了GitHub上. 之后感觉应该做一个有自己情感注入的项目才行,而不是工作上的现实交易的项目,我想做一个属于自己的项目,