h5趣聊|仿微信群聊html5|h5仿微信语音/红包

2020-04-23 10:04 作者:xiaoyan2019 0人读过 | 我要投稿

前些时间有使用html5开发过微直播项目，当时里面有聊天模块部分，这次就重新抽离出聊天模块，开发了这个h5趣聊项目，功能效果比较类似微信聊天界面。

基于html5+css3+Zepto+swiper+wcPop+flex等技术混合开发，实现了发送消息、表情(动图)，图片、视频预览，添加好友/群聊，右键长按菜单。新增了语音模块、地图定位模块。

项目中点击的时候有Material波纹效果，利用js实现的插件，另外弹窗部分使用wcPop插件

wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });

wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

摇一摇模块使用的是shake.js插件实现功能

var _shake = new Shake({threshold: 15});

_shake.start();

window.addEventListener("shake", function(){

window.navigator.vibrate && navigator.vibrate(500);

//摇一摇逻辑部分...

}

// >>> 【摇一摇加好友核心模块】------------------------------------------

// 摇一摇加好友弹窗

$("#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 = ...

setTimeout(function(){

$(".J__shakeLoading").fadeOut(300);

$(".J__shakeInfoBox").html(shakeTpl);

}, 1500);

}, false);

}

});

});

另外按住语音效果则是使用touchstart、touchend等原生事件实现

// >>> 【按住说话核心模块】------------------------------------------

// ...按住说话

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;

});

}