首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >h5仿微信web端|仿wechat网页聊天实战

h5仿微信web端|仿wechat网页聊天实战

原创
作者头像
andy2018
发布2018-06-14 00:25:13
4K0
发布2018-06-14 00:25:13
举报
文章被收录于专栏:h5h5

《H5+CSS3微信h5微场景实战开发》仿微信H5电脑端聊天场景项目案例、h5仿微信聊天界面

前几天有使用html5开发了一个聊天界面——h5高仿微信聊天界面 ,最近又在原先基础上开发了一款仿微信电脑端web版聊天系统,使用到了HTML5+css3+jQuery+weui+wcpop等技术,可以发表情、消息,有红包、打赏、霸屏相关微功能,还可以右键菜单操作,值得分享!!!

// ...表情、选择区切换
$(".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();
	}
});

欢迎大家一起交流学习 Q:282310962 wx:xy190310

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档