H5 version imitation WeChat chat page (WeChat red envelopes, emoticons, editor, WeChat payment keyboard)

HTML5 imitation WeChat chat actual project case | h5 imitation WeChat payment, Alipay payment input method keyboard

In view of the wide application of mobile terminal h5 chat scenarios, I recently developed a h5 imitation WeChat chat function project in my spare time, using html5+css3+jQ+zepto+weui+wcPop+swiper and other technologies to develop, can send messages, emoticons, Rewards, screen domination, red envelopes and other functions.

 

<!-- …… Picture preview popup.Start -->
<div class="wc__popup-imgPreview" style="display: none;">
	<div class="swiper-container J__swiperImgPreview">
		<div class="swiper-wrapper"></div>
		<!-- <div class="swiper-pagination pagination-imgPreview"></div> -->
	</div>
</div>
<script type="text/javascript">
	var curIndex = 0, imgPreviewSwiper;
	$("#J__chatMsgList li").on("click", ".picture", function(){
		var html = "",  _src = $(this).find("img").attr("src");

		$("#J__chatMsgList li .picture").each(function(i, item){
			html += '<div class="swiper-slide"><div class="swiper-zoom-container">'+ $(this).html() +'</div></div>';
			if($(this).find("img").attr("src") == _src){
				curIndex = i;
			}
		});
		$(".J__swiperImgPreview .swiper-wrapper").html(html);
		$(".wc__popup-imgPreview").show();

		imgPreviewSwiper = new Swiper('.J__swiperImgPreview',{
			pagination: false,
			paginationClickable: true,
			zoom: true,
			observer: true,
			observeParents: true,
			initialSlide: curIndex
		});
	});
	// close preview
	$(".wc__popup-imgPreview").on("click", function(e){
		var that = $(this);
		imgPreviewSwiper.destroy(true, true);
		$(".J__swiperImgPreview .swiper-wrapper").html('');
		that.hide();
	});
</script>
<!-- …… Picture preview popup.End -->

<!-- …… Video preview popup.Start -->
<div class="wc__popup-videoPreview" style="display: none;">
	<i class="wc__videoClose"></i>
	<video id="J__videoPreview" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline preload="auto"></video>
</div>
<script type="text/javascript">
	var video = document.getElementById("J__videoPreview");
	$("#J__chatMsgList li").on("click", ".video", function(){
		video.src = $(this).find("img").attr("videoUrl");
		$(".wc__popup-videoPreview").show();
		if(video.paused){
			video.play();
		}else{
			video.pause();
		}
	});
	video.addEventListener("ended", function(){
		video.currentTime = 0;
	}, false);
	// close preview
	$(".wc__popup-videoPreview").on("click", ".wc__videoClose", function(){
		$(".wc__popup-videoPreview").hide();
		video.currentTime = 0;
		video.pause();
	});

	// enter full screen, exit full screen
	video.addEventListener("x5videoenterfullscreen", function(){
		console.log("Enter full screen");
	}, false);
	video.addEventListener("x5videoexitfullscreen", function(){
		$(".wc__popup-videoPreview .wc__videoClose").trigger("click");
	}, false)
</script>
<!-- …… Video preview popup.End -->

 

<!-- …… Red Packet Popup Template.Start -->
<div class="wc__choosePanel-tmpl">
	<!-- //Red envelope template.begin -->
	<div id="J__popupTmpl-Hongbao" style="display:none;">
		<div class="wc__popupTmpl tmpl-hongbao">
			<i class="wc-xclose"></i>
			<ul class="clearfix">
				<li class="item flexbox">
					<label class="txt">总金额</label><input class="ipt-txt flex1" type="tel" name="hbAmount" placeholder="0.00" /><em class="unit">元</em>
				</li>
				<li class="item flexbox">
					<label class="txt">红包个数</label><input class="ipt-txt flex1" type="tel" name="hbNum" placeholder="填写个数" /><em class="unit">个</em>
				</li>
				<li class="tips">A total of <em class="memNum">186</em> people</li> online
				<li class="item item-area">
					<textarea class="describe" name="content" placeholder="Gong Xi Fa Cai, great luck"></textarea>
				</li>
				<li class="amountTotal">￥<em class="num">0.00</em></li>
			</ul>
		</div>
	</div>
	<!-- //Red envelope template.end -->
</div>
<script type="text/javascript">
	/* ...Red envelope event.start */
	$(".J__wchatHb").on("click", function(){
		var bpidx = wcPop ({
			skin: 'ios',
			content: $("#J__popupTmpl-Hongbao").html(),
			style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
			shadeClose: false,

			btns: [
				{
					text: 'Put money into the red envelope',
					style: 'background:#ffba00;color:#fff;font-size:18px;',
					onTap() {
						alert("Successful payment!");
						wcPop.close(bpidx);
					}
				}
			]
		});
	});
	/* ...Red envelope event.end */

	// ...closure
	$("body").on("click", ".wc__popupTmpl .wc-xclose", function(){
		wcPop.close();
	});
</script>
<!-- …… Red envelope popup template.End -->

 

// ...long press the popup menu
$("#J__chatMsgList").on("longTap", "li .msg", function(e){
	var that = $(this), menuTpl, menuNode = $("<div class='wc__chatTapMenu animated anim-fadeIn'></div>");
	that.addClass("taped");
	that.parents("li").siblings().find(".msg").removeClass("taped");
	var isRevoke = that.parents("li").hasClass("me");
	var _revoke = isRevoke ? "<a href='#'><i class='ico i4'></i>撤回</a>" : "";
	
	if(that.hasClass("picture")){
		console.log("Picture long press");
		menuTpl = "<div class='menu menu-picture'><a href='#'><i class='ico i1'></i>复制</a><a href='#'><i class='ico i2'></i>收藏</a><a href='#'><i class='ico i3'></i>另存为</a>"+ _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
	}else if(that.hasClass("video")){
		console.log("Video long press");
		menuTpl = "<div class='menu menu-video'><a href='#'><i class='ico i3'></i>另存为</a>" + _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
	}else{
		console.log("Long press on text");
		menuTpl = "<div class='menu menu-text'><a href='#'><i class='ico i1'></i>复制</a><a href='#'><i class='ico i2'></i>收藏</a>" + _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
	}

	if(!$(".wc__chatTapMenu").length){
		$(".wc__chatMsg-panel").append(menuNode.html(menuTpl));
		autoPos ();
	}else{
		$(".wc__chatTapMenu").hide().html(menuTpl).fadeIn(250);
		autoPos ();
	}

	function autoPos(){
		console.log(that.position().top)
		var _other = that.parents("li").hasClass("others");
		$(".wc__chatTapMenu").css({
			position: "absolute",
			left: that.position().left + parseInt(that.css("marginLeft")) + (_other ? 0 : that.outerWidth() - $(".wc__chatTapMenu").outerWidth()),
			top: that.position().top - $(".wc__chatTapMenu").outerHeight() - 8
		});
	}
});
// ...destroy the long press popup
$(".wc__chatMsg-panel").on("scroll", function(){
	$(".wc__chatTapMenu").hide();
	$(this).find("li .msg").removeClass("taped");
});

 

Project screenshot:

 

 

 

——>>>If you need to reprint, please indicate the original place QQ: 282310962 WeChat: xy190310