html5仿微信聊天实战项目案例 | h5仿微信支付、支付宝支付输入法键盘 | 带微信红包、表情、编辑器、微信支付键盘
鉴于移动端h5聊天场景应用很广泛,最近利用空余时间开发了一个h5仿微信聊天功能项目,使用了html5+css3+jQ+zepto+weui+wcPop+swiper等技术进行开发,可以发送消息、表情,打赏、霸屏、发红包等功能。
视频模板:
<!-- …… 图片预览弹窗.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
});
});
// 关闭预览
$(".wc__popup-imgPreview").on("click", function(e){
var that = $(this);
imgPreviewSwiper.destroy(true, true);
$(".J__swiperImgPreview .swiper-wrapper").html('');
that.hide();
});
</script>
<!-- …… 图片预览弹窗.End -->
<!-- …… 视频预览弹窗.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);
// 关闭预览
$(".wc__popup-videoPreview").on("click", ".wc__videoClose", function(){
$(".wc__popup-videoPreview").hide();
video.currentTime = 0;
video.pause();
});
// 进入全屏、退出全屏
video.addEventListener("x5videoenterfullscreen", function(){
console.log("进入全屏");
}, false);
video.addEventListener("x5videoexitfullscreen", function(){
$(".wc__popup-videoPreview .wc__videoClose").trigger("click");
}, false)
</script>
<!-- …… 视频预览弹窗.End -->
红包模板:
<!-- …… 红包弹窗模板.Start -->
<div class="wc__choosePanel-tmpl">
<!-- //红包模板.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__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 -->
弹出菜单:
// ...长按弹出菜单
$("#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("图片长按");
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("视频长按");
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("文字长按");
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
});
}
});
// ...销毁长按弹窗
$(".wc__chatMsg-panel").on("scroll", function(){
$(".wc__chatTapMenu").hide();
$(this).find("li .msg").removeClass("taped");
});
项目截图: