h5高仿微信聊天界面|仿微信语音播放效果|仿微信摇一摇功能
最近基于 html5+css3+zepto+wcPop+swiper+meScroll 开发的高仿微信语音聊天系统|仿微信地图定位|仿微信语音效果|仿微信支付键盘|仿微信摇一摇功能，实现了消息记录长按菜单、发送消息 表情，图片、视频预览，红包|地图|摇一摇等互动聊天功能。
聊天消息模块上拉加载更多功能，则是使用了meScroll.js插件实现的，这个插件api比较完善，使用起来兼容性也相对比较好，推荐大家使用下。
摇一摇功能部分则是使用了shake.js插件实现的，另外语音模块运用touch事件实现了按住说话，手指上滑 取消发送功能。
// ...获取语音时长
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);
}
}
});
}// >>> 【按住说话核心模块】------------------------------------------// ...按住说话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: '手指上滑，取消发送', 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('松开手指，取消发送'); } }); }); _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('录音时间太短！'); } else{ if (eY1 - eY2 < 150) { // 发送成功 submitData(); console.log("测试数据"); } else { // 取消发送 console.log("cancel"); } } // 关闭弹窗 setTimeout(function(){ wcPop.close(voiceIdx); }, 500); isDrag = true; });} 如果觉得该项目对你有用的话，可以关注点赞。一起学习，有问题随时联系，一起解决！！！
欢迎关注我的个人博客：https://www.cnblogs.com/xiaoyan2017/
QQ：282310962 wx：xy190310
