h5高仿微信web网页版|仿微信聊天项目

html5实现的仿微博、微信网页版,运用到了html5+css3+jquery+swiper+wcPop等技术进行架构开发,其中wcPop.js弹窗插件又进行了一次全面升级(更加丰富的api接口),修复了编辑器光标定位问题,新增了图片、附件上传预览。。。

https://blog.csdn.net/xiaoyan_2015/article/details/81750894

/* --- 用户设置.Start ---*/
// 联系人/群聊切换
$("body").on("click", ".wc__addChat-tab li", function () {
	var idx = $(this).index();
	$(this).addClass("on").siblings().removeClass("on");

	$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").hide();
	$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").eq(idx).show();
	// 清除筛选
	$(".wc__addChatMixList .item").removeClass("selected");
});

// 1、新建聊天
$("body").on("click", ".J__addChat", function(){
	$(".wc__addChat-tab").show();

	var chatidx = wcPop({
		skin: 'ios',
		title: '<h2 style="font-size:18px; font-weight:700;">新建聊天</h2>',
		content: $("#J__popupTmpl-addChat").html(),
		style: 'background-color: #f3f3f3; max-width: 640px; width:auto;',
		
		btns: [
			{
				text: '确定',
				style: 'background:#12b7f5;color:#fff;font-size:14px;',
				onTap() {
					wcPop.close(chatidx);
				}
			}
		]
	});
});
// 勾选联系人选项
$("body").on("click", ".wc__addChatMixList .item", function () {
	if($(this).hasClass("qun")){
		$(this).addClass("selected").siblings().removeClass("selected");
	}else{
		$(this).toggleClass("selected");
	}
});

// 2、设置聊天
$("body").on("click", ".J__setChat", function(e){
	var that = $(this), contextTpl, menuNode = $("<div class='wc__contextmenu animated anim-fadeIn'></div>");
	contextTpl = "<div class='wc__contextmenuSetChat menu'><a class='status online' href='#'>在线</a><a class='status offline' href='#'>离开</a><a class='status busy' href='#'>忙碌</a><a class='status invisible' href='#'>隐身</a><a class='deliver'></a><a href='#'>关闭桌面通知</a><a href='#'>关闭提醒声音</a><a href='#'>退出</a></div>";

	if (!$(".wc__contextmenu").length) {
		$("body").append(menuNode.html(contextTpl));
		posFix();
	} else {
		$(".wc__contextmenu").hide().html(contextTpl).fadeIn(250);
		posFix();
	}

	function posFix() {
		$(".wc__contextmenu").css({
			position: "absolute",
			left: e.pageX,
			top: e.pageY
		});
	}
});

// 群公告
$("#J__groupAnnouncement").on("click", function(){
	var announcementIdx = wcPop({
		skin: 'android',
		title: '群公告',
		content: '<p style="font-size:12px;font-family:arial;">jcFlow 更新于 08-10 10:26</p><p style="color:#333;margin-top:10px;">进群的小伙伴注意啦,修改群名,格式统一为部门加英文名(技术部-Jackson),部门有英文简称的用英名,无则用中文拼音首字母,如JS-Henory……注意大小写!</p>',
		btns: [
			{
				text: '关闭',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop.close(announcementIdx);
				}
			}
		]
	});
});

// 屏蔽消息
$("#J__shieldMsg").on("click", function () {
	var shieldIdx = wcPop({
		skin: 'android',
		title: '提示',
		content: '确定要屏蔽该群聊消息嚒,您将收不到群聊发来的消息!',
		btns: [
			{
				text: '取消',
				onTap() {
					wcPop.close(shieldIdx);
				}
			},
			{
				text: '确定',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop({ content: '消息屏蔽成功!', time: 2 });
				}
			}
		]
	});
});

// 解除屏蔽
$(".J__unlockerMsg").on("click", function(){
	var unshieldIdx = wcPop({
		skin: 'ios',
		content: '<div><p style="color:green;font-size:16px;">已解除屏蔽!</p><p style="margin-top:10px;">您现在可以接收到对方发来的消息。</p></div>',
		time: 2,
		btns: [
			{
				text: '知道了',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop.close(unshieldIdx);
				}
			}
		]
	});
});

// 群聊信息
$("#J__groupMemberInfo").on("click", function(){
	var chatMemidx = wcPop({
		skin: 'ios',
		title: '<h2 style="font-size:18px; font-weight:700;">群聊信息(124)</h2>',
		content: $("#J__popupTmpl-groupMemInfo").html(),
		style: 'background-color: #f3f3f3; max-width: 640px; width:auto;'
	});
});

// 删除退群
$("body").on("click", "#J__leaveOutQun", function () {
	var leaveOut = wcPop({
		id: 'wc__LeaveOutQun',
		skin: 'android',
		content: '删除并退出群聊后,将不再接收此群聊的信息?',

		btns: [
			{
				text: '取消',
				onTap() {
					wcPop.close(leaveOut);
				}
			},
			{
				text: '确定',
				style: 'color:#e64240',
				onTap() {
					wcPop.closeAll();
					wcPop({id: 'wcTips', content: '已退出该群聊!', time: 2 });
				}
			}
		]
	});
});
/* --- 用户设置.End ---*/
  • ——>>>欢迎一起交流学习  QQ:282310962    微信:xy190310

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯Bugly的专栏

微信文件微起底

微信大家都在用,但微信的本地文件到底隐藏着什么样的信息呢?我们怎么可以把长得都一样的微信,变的跟别人的不一样,来个专业定制 100 年呢?这个是一个让大家的微信...

33940
来自专栏FreeBuf

如何在网络中追踪入侵者(三):主机追踪

在之前的文章中,我们专注于追踪和分析从网络中得到的数据。但事实上,在网络中追踪不是唯一的选项。在企业的主机和服务器上有大量的数据集来发掘未知的恶意行为,包括运行...

22390
来自专栏chafezhou

小说python操作PLC

PLC(Programmable Logic Controller)可编程逻辑控制器,可以理解为一个微型计算机,广泛应用于工业控制中,如楼宇智控、精密机床、汽车...

2.8K20
来自专栏飞雪无情的博客

Android 源码目录结构详解

这是Android2.1的源代码的目录结构,可以帮助我们研究Android的源代码。Android源代码的下载请参考官网

24620
来自专栏MoeLove

高效 Bash 使用技巧

我们在日常使用中,难免会使用到一些历史命令或者有时需要对历史命令进行更正,那么如何更加高效的来完成这些操作呢?

10220
来自专栏腾讯Bugly的专栏

《iOS APP 性能检测》

| 导语 最近组里在做性能优化,既然要优化,就首先要有指标来描述性能水平,并且可以检测到这些指标,通过指标值的变化来看优化效果,于是笔者调研了iOS APP性能...

1.9K50
来自专栏美团技术团队

美团点评前端无痕埋点实践

构建一个数据平台,大体上包括数据采集、数据上报、数据存储、数据计算以及数据可视化展示等几个重要的环节。其中,数据采集与上报是整个流程中重要的一环,只有确保前端数...

1.1K60
来自专栏FreeBuf

软件逆向之陌路寻踪:突破未注册版软件的限制功能

摘要:试图对一个“太监版”的程序进行完整化,也就是把限制的功能恢复,把阉割的功能添加等等。 试验软件:PixtopianBook.exe (一个通讯录软件) 试...

26850
来自专栏编程一生

架构必会的性能指标及分析策略

13420
来自专栏FreeBuf

ASLR在Windows与Linux系统之间的差别

作者 Taskiller Hi 基友们,我在上篇文章中讨论了Linux平台上NX的特性。我们已经知道一般情况下NX(Windows平台上称其为DEP)和...

30580

扫码关注云+社区

领取腾讯云代金券