关键词:
之前有开发过一个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); } } }); }
taro聊天室|react+taro仿微信聊天app界面|taro聊天实例
一、项目简述taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实现了发送消息/emoj表情、gif表情大图、图片预览、发红包、动态圈等功能。二、预览效果编译到H5... 查看详情
如何仿微信聊天软件搭建
开发搭建类似微信聊天软件源码要多少钱,仿微信聊天软件源码费用是多少?废话不多说,直接上干货!告诉各位老板,一套源码要收多少费用,在此基础上再添加功能怎么收费。一套源码收费是多少... 查看详情
微信小程序-模仿绘制聊天界面(代码片段)
参考文章1、小程序模仿微信聊天界面2、微信小程序实现仿微信聊天界面(各种细节处理)3、微信小程序之页面中关于聊天框三角形的制作和使用4、仿微信聊天记录时间显示5、微信小程序-同时获取麦克风、相机权限、获取多个权... 查看详情
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版(代码片段)
...ini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频预览,右键菜单、截屏、截图可直接粘贴至文本框进行发送。二、技术框架MVVM框架:Vue2.5.6状态管理... 查看详情
微信h5嵌入聊天室如何搭建
参考技术A微信h5嵌入聊天室搭建分两步。1、安装$npminstallvconsoleor$yarnaddvconsole。2、使用vuereact项目可以直接在入口文件引入,然后创建实例。 查看详情
请教仿微信聊天气泡效果在ios中是怎么实现的
参考技术A气泡就是个UIImageView,里面有个UITextView是这个UIImageViewd的自view。如果你想显示复杂的东西,比如图片、文字、gif的话,那就要自己现一个VIew去用CoreText这个文本渲染引擎自己去渲染。 查看详情
python实现仿微信聊天时间格式化显示的代码(代码片段)
本文主要介绍了python实现仿微信聊天时间格式化显示,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可参考下时间格式化所使用的算法为:"""1.如果不... 查看详情
android仿微信表情雨红包雨支持资源回收再利用(代码片段)
...更新,建议star一下,欢迎issue表情雨ViewGroup微信聊天中的表情雨效果一样。相比于其他项目的优点:本项目使用了资源缓存复用机制,在无限循环中,不会出现占用内存增长的问题,所以不 查看详情
如何做一个自己的开源聊天项目?(仿微信)(代码片段)
万事开头难在我决定做开源是因为自身工作接触到大多数的项目都是基于开源大佬写的框架,自觉惭愧,工作以来一直忙于业务与功能实现,多多少少做过的几个项目也没能抽出部分好一点的功能业务Maven包什么的提供也同行使... 查看详情
28.qtquick-listview高仿微信好友列表和聊天列表(代码片段)
1.视图模型介绍 在Qml中、常见的View视图有:ListView:列表视图,视图中数据来自ListModel、XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类TableView: 和excel类似的视图GridView:网格视图,类似于home菜单那样,排列... 查看详情
用ajax写机器人聊天的案例
HTML中的文档<body><h3>简单的Ajax实例</h3><divclass="chatbox"><!--聊天内容--><divclass="messages"><divclass="self"><h5>我说</h5><p>你好</p></div>& 查看详情
如何在微信公众号的菜单里加入一个免费的h5聊天室
影圈H5网页聊天室-简单对接,经济实用!官方网站:https://www.pyingquan.com您只需跳转或嵌入一个H5网页,即可实现聊天室功能。目前支持文字发送、表情发送、图片发送。影圈的天气api系统已提供约1.5亿次服务,服务稳定高效、请... 查看详情
python实现仿微信聊天时间格式化显示的代码(代码片段)
本文主要介绍了python实现仿微信聊天时间格式化显示,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可参考下时间格式化所使用的算法为:"""1.如果不... 查看详情
仿微信抢红包(js转)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>仿微信抢红包</title><style>html,body,div{margin:0;padding:0;}body{background:#EAEAEA;font:16px/1.8"微软雅黑";paddi 查看详情
unity微信聊天框界面制作(代码片段)
【原理】一个聊天界面主要由三个部分组成:内容区、可见区、滑动条可见区在内容区上边,内容区会随着聊天内容变得非常长,但只有位于可见区的部分才能被看见,其他区域的看不见。通过滑动条上下移动内... 查看详情
微信上怎么上传动态图片?
...,从通讯录中选择一个联系人2、选择联系人之后,进入聊天界面,点击加号,出现图片页面,从图片里添加的gif图片,发送出去后,只是图片的形式3、要点击表情后,找到红心,点击加号进行添加4、出现收藏表情的界面,此时... 查看详情
javascript实现仿微信抢红包
javascript实现仿微信抢红包 demo效果查看:http://www.w3cfuns.com/notes/14456/53bf08daf9b76230b39519fb399a006a实现代码如下:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>仿微信抢红包< 查看详情
flutter微信项目实战08聊天界面搭建(上)(代码片段)
...局和代码实现,那么今天就继续来写微信实战项目的聊天界面!2.导航栏右边按钮实现我们先来实现一下,聊天界面的导航栏部分,实现之前我们先来看看普通的界面长啥样子,如下如所示:在AppBar里面有... 查看详情