共计 3104 个字符，预计需要花费 8 分钟才能阅读完成。
最近一段时间不是那么忙，就抽空整理了下之前的项目，因为之前有开发过 H5 聊天项目，只是觉得好些功能都没有特别的完善，所以就把之前项目重新开发了下，如是就有了这个 html5 版实时聊天语音项目 weChatIM 系统。
依旧使用的是 h5+css3+jquery+wcPop+swiper+weScroll 等技术架构开发，新增了上拉刷新加载数据，右键长按菜单弹窗、仿微信语音效果 (按住说话，上滑取消发送) 及地图定位功能。
// >>>【按住说话核心模块】——————————————
// … 按住说话
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;
});
}
// >>>【摇一摇加好友核心模块】——————————————
// 摇一摇加好友弹窗
$(“#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: ‘ 摇到的历史 ’},
]
});
});
欢迎大家一起交流、学习 Q：282310962 wx：xy190310
