html5高仿微信界面|仿微信聊天模板|群聊/私聊

h5高仿微信聊天实战项目案例|仿微信聊天界面源码实例，运营html5+css3+swiper+Zepto+wcPop+fontSize等技术混合实现仿微信聊天项目。使用css3里面的rem像素+flex实现垂直收缩布局，实现了消息、表情(动图)发送，图片、视频预览，给用户发红包、打赏，右键长按消息弹出菜单提示。

效果预览图：

项目中用到的插件：数字输入法键盘插件【仿微信支付键盘】wcKeyBoard

wcKeyBoard.prototype = {
	init: function () {
		var that = this, opt = that.opts, keyboradBox = null;
		if(util.$(opt.id)) return;
		keyboradBox = _doc.createElement("div"); keyboradBox.id = opt.id; keyboradBox.className = "wckeyboard";
		keyboradBox.innerHTML = [
			'<div class="keyboardPanel">\
						<div class="keyboard-tmpl">\
							<div class="keyboard-result" id="wcKeyBoardRes" style="display: none;"></div>\
							<div class="keyboard-xclose"></div>\
							<ul class="clearfix">\
								<li class="number">1</li>\
								<li class="number">2</li>\
								<li class="number">3</li>\
								<li class="number">4</li>\
								<li class="number">5</li>\
								<li class="number">6</li>\
								<li class="number">7</li>\
								<li class="number">8</li>\
								<li class="number">9</li>\
								<li class="float">.</li>\
								<li class="zero">0</li>\
								<li class="del"></li>\
							</ul>\
						</div>\
					</div>'
		].join('');
		_doc.body.appendChild(keyboradBox);

		that.callback();
	},
	callback: function () {
		var that = this, opt = that.opts, resObj = $(opt.resId);
		// 处理数字
		$("#" + opt.id).on("click", ".number", function () {
			if (resObj.text().indexOf(".") != -1 && resObj.text().substring(resObj.text().indexOf(".") + 1, resObj.text().length).length == 2) {
				return;
			}
			if ($.trim(resObj.text()) == "0") {
				return;
			}
			if (parseInt(resObj.text()) >= 10000 && resObj.text().indexOf(".") == -1) {
				return;
			}
			resObj.text(resObj.text() + $(this).text());
			resObj.val(resObj.text());
		});
		// 处理小数点
		$("#" + opt.id).on("click", ".float", function () {
			if ($.trim(resObj.text()) == "" || resObj.text().indexOf(".") != -1) {
				return;
			}
			resObj.text(resObj.text() + $(this).text());
			resObj.val(resObj.text());
		});
		// 处理数字0
		$("#" + opt.id).on("click", ".zero", function () {
			if (resObj.text().indexOf(".") != -1 && resObj.text().substring(resObj.text().indexOf(".") + 1, resObj.text().length).length == 2) {
				return;
			}
			if ($.trim(resObj.text()) == "0") {
				return;
			}
			if (parseInt(resObj.text()) >= 10000 && resObj.text().indexOf(".") == -1) {
				return;
			}
			resObj.text(resObj.text() + $(this).text());
			resObj.val(resObj.text());
		});
		// 处理删除
		$("#" + opt.id).on("click", ".del", function () {
			resObj.text(resObj.text().substring(0, resObj.text().length - 1));
			resObj.val(resObj.text());
		});
		// 关闭键盘
		$("#" + opt.id).on("click", ".keyboard-xclose", function () {
			$("#" + opt.id).remove();
		});
	}
};
win.wcKeyBoard = wcKeyBoard;

<!-- …… 霸屏、打赏、红包弹窗模板.Start -->
<div class="wc__choosePanel-tmpl">
	<!-- //霸屏模板.begin -->
	<div id="J__popupTmpl-Baping" style="display:none;">
		<div class="wc__popupTmpl tmpl-baping">
			<i class="wc-xclose"></i>
			<ul class="clearfix">
				<li class="item flexbox wc__arr">
					<input class="ipt-txt align-l flex1" type="text" name="bpTimeline" placeholder="选择霸屏时长" readonly />
				</li>
				<li class="item item-upload flexbox">
					<div class="wc__uploader-panel">
						<input class="wc__uploader-input" id="J__uploaderIpt" type="file" accept="image/*" />
						<div class="wc__uploader-tips">
							<i></i>
							<p>添加图片</p>
						</div>
					</div>
				</li>
				<li class="item item-area">
					<textarea class="describe" name="content" placeholder="添加文字"></textarea>
				</li>
			</ul>
		</div>
	</div>
	<!-- //霸屏模板.end -->

	<!-- //打赏模板.begin -->
	<div id="J__popupTmpl-Dashang" style="display:none;">
		<div class="wc__popupTmpl tmpl-dashang">
			<i class="wc-xclose"></i>
			<ul class="clearfix">
				<h2 class="hdTit">为喜欢的节目霸屏打赏</h2>
				<li class="item flexbox wc__arr">
					<input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="选择打赏节目" readonly />
				</li>
				<li class="item item-area">
					<textarea class="describe" name="content" placeholder="输入打赏语，30字以内（选填）"></textarea>
				</li>
				<li class="item item-gift" id="J__chooseGift">
					<div class="gift flexbox" data-gift="001">
						<label class="txt"><span>豪车</span><em class="time">霸屏50秒</em></label>
						<span class="amount">￥<em>12</em> <i class="chkbox"></i></span>
					</div>
					<div class="gift flexbox" data-gift="002">
						<label class="txt"><span>动人玫瑰</span><em class="time">霸屏20秒</em></label>
						<span class="amount">￥<em>8</em> <i class="chkbox"></i></span>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- //打赏模板.end -->

	<!-- //红包模板.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">在线人数共<em class="memNum">186</em>人</li>
				<li class="item item-area">
					<textarea class="describe" name="content" placeholder="恭喜发财，大吉大利"></textarea>
				</li>
				<li class="amountTotal">￥<em class="num">0.00</em></li>
			</ul>
		</div>
	</div>
	<!-- //红包模板.end -->
</div>
<script type="text/javascript">
	/* ...霸屏事件.start */
	$(".J__wchatBp").on("click", function(){
		var bpidx = wcPop({
			skin: 'ios',
			content: $("#J__popupTmpl-Baping").html(),
			style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
			shadeClose: false,

			btns: [
				{
					text: '我要霸屏',
					style: 'background:#ffba00;color:#fff;font-size:18px;',
					onTap() {
						alert("霸屏成功！");
						wcPop.close(bpidx);
					}
				}
			]
		});
	});
	//霸屏时长picker
	$("body").on("click", ".wc__popupTmpl input[name='bpTimeline']", function(){
		var that = $(this);
		weui.picker([{
				label: '10s　￥8',
				value: 8
			},{
				label: '20s　￥16',
				value: 16
			},{
				label: '30s　￥24',
				value: 24
			},{
				label: '40s　￥32',
				value: 32
			},{
				label: '50s　￥40',
				value: 40
			},{
				label: '60s　￥48',
				value: 48
			}], {
				onChange: function(res){
					console.log(res);
				},
				onConfirm: function(res){
					console.log(res);
					that.val("￥" + res);
				}
			}
		);
	});
	/* ...霸屏事件.end */

	/* ...打赏事件.start */
	$(".J__wchatDs").on("click", function(){
		var bpidx = wcPop({
			skin: 'ios',
			content: $("#J__popupTmpl-Dashang").html(),
			style: 'background-color: #f3f3f3; max-width: 320px; width: 90%;',
			shadeClose: false,

			btns: [
				{
					text: '<span class="btn-dashang">打赏</span>',
					style: 'background:#ffba00;color:#fff;font-size:18px;',
					onTap() {
						alert("打赏成功！");
						wcPop.close(bpidx);
					}
				}
			]
		});
	});
	//打赏节目picker
	$("body").on("click", ".wc__popupTmpl input[name='dschooseProgram']", function(){
		var that = $(this);
		weui.picker([{
				label: '小品：送礼',
				value: '小品：送礼'
			},{
				label: '歌曲：红日',
				value: '歌曲：红日'
			},{
				label: '相声：就服你',
				value: '相声：就服你'
			},{
				label: '歌曲：上海滩',
				value: '歌曲：上海滩'
			},{
				label: '小品：回家过年',
				value: '小品：回家过年'
			},{
				label: '相声：逗你玩',
				value: '相声：逗你玩'
			}], {
				onChange: function(res){
					console.log(res);
				},
				onConfirm: function(res){
					console.log(res);
					that.val(res);
				}
			}
		);
	});
	//选择礼物
	$("body").on("click", "#J__chooseGift .gift", function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		$(".popui__panel-btn .btn-dashang").html('支付 <em class="ff-ar">￥<i class="moneyNum">'+ $(this).find(".amount em").text() +'</i></em> 打赏');
		
		console.log($(this).attr("data-gift"));
	});
	/* ...打赏事件.end */

	/* ...红包事件.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: '塞钱进红包',
					style: 'background:#ffba00;color:#fff;font-size:18px;',
					onTap() {
						alert("塞钱成功！");
						wcPop.close(bpidx);
					}
				}
			]
		});
	});
	/* ...红包事件.end */

	// ...关闭
	$("body").on("click", ".wc__popupTmpl .wc-xclose", function(){
		wcPop.close();
	});
</script>
<!-- …… 霸屏、打赏、红包弹窗模板.End -->

编辑器表情及动图滑动切换效果

var emotionSwiper;
function setEmotionSwiper(tmpl){
	var _tmpl = tmpl ? tmpl : $("#J__emotionFootTab ul li.cur").attr("tmpl");
	$("#J__swiperEmotion .swiper-container").attr("id", _tmpl);
	$("#J__swiperEmotion .swiper-wrapper").html($("." + _tmpl).html());

	emotionSwiper = new Swiper('#' + _tmpl, {
		pagination: '.pagination-emotion',
		paginationClickable: true
	});
}
// 点击切换表情
$("#J__emotionFootTab").on("click", "ul li.swiperTmpl", function(){
	// 先销毁swiper
	emotionSwiper && emotionSwiper.destroy(true, true);
	var _tmpl = $(this).attr("tmpl");
	$(this).addClass("cur").siblings().removeClass("cur");

	setEmotionSwiper(_tmpl);
});