开发者社区> xiaoyan2015> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

h5语音聊天|仿微信语音效果|摇一摇|支付键盘

简介:
+关注继续查看

使用 html5+css3 开发的高仿微信语音聊天系统|仿微信地图定位|仿微信语音效果|仿微信支付键盘|仿微信摇一摇功能,实现了消息记录长按菜单、发送消息 表情,图片、视频预览,红包|地图|摇一摇加好友等互动聊天功能。

d978c0355fb3963d190b137ebda5e2e0f6e8ba63 662475d416fd5f62f31e299b261544b788f43cba


  • 使用meScroll实现消息下拉刷新、上拉加载功能

/*
 *	下拉刷新、上拉加载更多演示demo
 */

//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
		// 上拉刷新配置
		down : {
			auto : true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
			callback : downCallback, //下拉刷新的回调
			textInOffset : '下拉刷新',
			textOutOffset : '释放立即刷新',
			textLoading : '正在刷新...'
		},

		// 下拉加载配置
		up: {
		auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
		isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
		callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
		}
	});

/*下拉刷新的回调 */
function downCallback() {
	//联网加载数据
	getListDataFromNet(0, 1, function (data) {
		mescroll.endSuccess();
		//设置列表数据
		setListData(data, false);
	}, function () {
		mescroll.endErr();
	});
}

/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page) {
	//联网加载数据
	getListDataFromNet(page.num, page.size, function (curPageData) {
		//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
		mescroll.endSuccess(curPageData.length);
		//设置列表数据
		setListData(curPageData, true);
	}, function () {
		//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
		mescroll.endErr();
	});
}

/*设置列表数据*/
function setListData(curPageData, isAppend) {
	var listDom = document.getElementById("newsList");
	for (var i = 0; i < curPageData.length; i++) {
		var newObj = curPageData[i];

		var str = '<p>' + newObj.title + '</p>';
		str += '<p class="new-content">' + newObj.content + '</p>';
		var liDom = document.createElement("li");
		liDom.innerHTML = str;

		if (isAppend) {
			listDom.appendChild(liDom); //加在列表的后面,上拉加载
		} else {
			listDom.insertBefore(liDom, listDom.firstChild); //加在列表的前面,下拉刷新
		}
	}
}

var downIndex = 0;
function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
	//延时一秒,模拟联网
	setTimeout(function () {
		try {
			var newArr = [];
			if (pageNum == 0) {
				//此处模拟下拉刷新返回的数据
				...ajax
			} else {
				//此处模拟上拉加载返回的数据
				...ajax
			}
			//联网成功的回调
			successCallback && successCallback(newArr);
		} catch (e) {
			//联网失败的回调
			errorCallback && errorCallback();
		}
	}, 1000)
}

4afd326c50b9a87f569a72eab00f675b69154758 512fb71bfc924ec60007e3783d9cc39868a23a82

e973e460dc748cc67d2c413a8303dc76c3984b7e bf0a773cca0a6b306fb8f42ceaa2914815890707

f5e7e33fcce4ae70098680c2e842aea316e623de 5fbf0e9eb6a824a3c8d7c8010d64f4b04814ca9b

ff5f366618ab3245c1a9cec3ad49c5891c7ba36b f98fa79b727cd230ef755715b06fe18990a8f624

eb18c7330f6394b299488a9a19ee7d93b95640ea 8e37410a72b7279d565eb522f309f24d5b53f46a

20662c906b7e36f72eebaa54e110e6954d740975 ca872ccf795304b1200476b86ceffc7e4880f1ca

6b9a94516fa0ffc1f72b3daade8b4a9b1aa35a29 721d1886f4435960ad726a71ca1096f63bd4c32b

  • 获取audio音频播放时长duration

// ...获取语音时长
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: '<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: '摇到的历史' },
		]
	});
});
  • 禁止右键系统菜单

// 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;',}
		]
	});
});


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览
本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览) 特点1.支持自定义图片加载框架。
1925 0
H5仿微信支付键盘
直接贴图片以及视频 视频地址 支付页面参考 wepayui 自定义支付键盘有前端哥们提供。
1090 0
用二维码扫描
html5中可以使用二维码扫描,也可以从相册中选择二维码识别,代码如下 var ws = null, wo = null; var scan = null, domready = false; // H5 plus事件处理 ...
516 0
ios设备突破微信小视频6S限制的方法
  刷微信朋友圈只发文字和图片怎能意犹未竟,微信小视频是一个很好的补充,音视频到位,流行流行最流行。但小视频时长不能超过6S,没有滤镜等是很大的遗憾。but有人突破限制玩出了花样,用ios设备在朋友圈晒出超时长、带滤镜甚至慢镜头拍摄的小视频。
1079 0
微信电视来了 微信遥控传屏弹幕统统有
  据证券时报消息,腾讯携手康佳推微信电视,具有微信传屏、微信弹幕、微信遥控等基于腾讯微信平台的电视功能。想了吧?别急,11月5日,微信互联电视将在康佳全国终端门店全部上线。微信电视2.0版将新增语音搜索、节目单分享推荐自定义等 昨日,康佳集团在深圳总部展厅举行了“易TV微信互联电视品鉴会”,并宣布易TV微信互联电视正式上线。
1299 0
H5版的手机摇一摇
真心感觉 H5 的强大啊,也感觉到一股热潮开始翻滚起来了,最近业界关于 H5 的报道争先恐后,貌似谁还不准备好的话就铁定吃亏了似的,就好像前几年 iOS、Android 刚兴起一样,抓住了机遇学到了技术要点,对自己以后的职业生涯发展会有很不一样的结果。
541 0
+关注
xiaoyan2015
一枚web前端开发骚年,拥有多年前端开发经验,无聊的时间看看书,写些技术案例分享~~~ Q:282310962 wx:xy190310
文章
问答
文章排行榜
最热
最新
相关电子书
更多
微信广告引擎与播放节奏算法实践
立即下载
钉钉小程序——为工作方式插上翅膀
立即下载
优酷暗黑模式
立即下载