h5微聊-高仿微信聊天界面实战案例分享-阿里云开发者社区

开发者社区> xiaoyan2015> 正文

h5微聊-高仿微信聊天界面实战案例分享

简介: h5仿微信|h5仿微信界面|h5仿微信聊天(单聊、多聊) h5微聊场景——高仿微信聊天实战项目,可单聊、多聊操作,运用到html5+css3+zepto+weui+wcPop+swiper等多种技术,实现了预览图片(双击放大、手指缩放)、 播放视频及发送消息、表情,打赏、霸屏、发红包等功能,所有弹窗使用wcPop插件统一风格,长按消息可以浮动定位弹出操作菜单。
+关注继续查看

h5仿微信|h5仿微信界面|h5仿微信聊天(单聊、多聊)

h5微聊场景——高仿微信聊天实战项目,可单聊、多聊操作,运用到html5+css3+zepto+weui+wcPop+swiper等多种技术,实现了预览图片(双击放大、手指缩放)、 播放视频及发送消息、表情,打赏、霸屏、发红包等功能,所有弹窗使用wcPop插件统一风格,长按消息可以浮动定位弹出操作菜单。

项目效果图:

20dba57f9d0a54ecfc3e7f9e35f736b63927889c a067211083adb7d6a04d58f09a69b91c2d9e00ef

f7c09932d1ef6c0e61ccd20351aa363733be0bfa c6543a3c674613304e97b649eb37dfdfd90c7e3e

2a7abba44ed1729108e6f6cfb64af314c5dacc6e 4e77e8c3a51ba416203f93d347fc011ad706fe2e

709837b077704103dd27b293f69649b8558e155d 47a4cabf8c28061abb51cce137841865a7f636f4


// ...表情、选择区切换
$(".wc__editor-panel").on("click", ".btn", function(){
	var that = $(this);
	$(".wc__choose-panel").show();
	if (that.hasClass("btn-emotion")) {
		$(".wc__choose-panel .wrap-emotion").show();
		$(".wc__choose-panel .wrap-choose").hide();
		// 初始化swiper表情
		!emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
	} else if (that.hasClass("btn-choose")) {
		$(".wc__choose-panel .wrap-emotion").hide();
		$(".wc__choose-panel .wrap-choose").show();
	}
	wchat_ToBottom();
});

// ...处理编辑器信息
var $editor = $(".J__wcEditor"), _editor = $editor[0];
function surrounds(){
	setTimeout(function () { //chrome
		var sel = window.getSelection();
		var anchorNode = sel.anchorNode;
		if (!anchorNode) return;
		if (sel.anchorNode === _editor ||
			(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
			
			var range = sel.getRangeAt(0);
			var p = document.createElement("p");
			range.surroundContents(p);
			range.selectNodeContents(p);
			range.insertNode(document.createElement("br")); //chrome
			sel.collapse(p, 0);
			
			(function clearBr() {
				var elems = [].slice.call(_editor.children);
				for (var i = 0, len = elems.length; i < len; i++) {
					var el = elems[i];
					if (el.tagName.toLowerCase() == "br") {
						_editor.removeChild(el);
					}
				}
				elems.length = 0;
			})();
		}
	}, 10);
}
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
	//$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
	surrounds();
}, true);
_editor.addEventListener("input", function(){
	surrounds();
}, false);
// 点击表情
$("#J__swiperEmotion").on("click", ".face-list span img", function(){
	var that = $(this), range;

	if(that.hasClass("face")){ //小表情
		var img = that[0].cloneNode(true);
		_editor.focus();
		_editor.blur(); //输入表情时禁止输入法

		setTimeout(function(){
			if(document.selection && document.selection.createRange){
				document.selection.createRange().pasteHTML(img);
			}else if(window.getSelection && window.getSelection().getRangeAt){
				range = window.getSelection().getRangeAt(0);
				range.insertNode(img);
				range.collapse(false);

				var sel = window.getSelection();
				sel.removeAllRanges();
				sel.addRange(range);
			}
		}, 10);
	}else if(that.hasClass("del")){ //删除
		_editor.focus();
		_editor.blur(); //输入表情时禁止输入法

		setTimeout(function(){
			range = window.getSelection().getRangeAt(0);
			range.collapse(false);

			var sel = window.getSelection();
			sel.removeAllRanges();
			sel.addRange(range);
			document.execCommand("delete");
		}, 10);
	} else if(that.hasClass("lg-face")){ //大表情
		var _img = that.parent().html();
		var _tpl = [
			'<li class="me">\
				<div class="content">\
					<p class="author">Nice奶思</p>\
					<div class="msg lgface">'+ _img + '</div>\
				</div>\
				<a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
			</li>'
		].join("");
		$chatMsgList.append(_tpl);

		wchat_ToBottom();
	}
});


3d8b26f784f3793787752ea81c60f1c03d4bfefd


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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
h5微聊-高仿微信聊天界面实战案例分享
h5仿微信|h5仿微信界面|h5仿微信聊天(单聊、多聊) h5微聊场景——高仿微信聊天实战项目,可单聊、多聊操作,运用到html5+css3+zepto+weui+wcPop+swiper等多种技术,实现了预览图片(双击放大、手指缩放)、 播放视频及发送消息、表情,打赏、霸屏、发红包等功能,所有弹窗使用wcPop插件统一风格,长按消息可以浮动定位弹出操作菜单。
3637 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
表格存储技术方案实践及客户案例分享
表格存储是一款2014年10月份正式商业化的NoSQL数据存储服务,在商业化之前,早在2010年就在阿里云内部开始使用,云邮箱和云OS都是表格存储最早的一批用户。到目前,无论是在阿里集团内部还是在公共云环境上,在移动社交、金融风控、电商物流、存储备份、物联网IoT、日志监控、大数据分析报表等领域
5788 0
【案例学习】芬兰铁路的 Docker 使用实践分享
一个 Terraform 脚本,可在25分钟内为芬兰铁路公司设置好在公有云上的 Docker EE 环境。
2251 0
+关注
xiaoyan2015
一枚web前端开发骚年,拥有多年前端开发经验,无聊的时间看看书,写些技术案例分享~~~ Q:282310962 wx:xy190310
30
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载