h5仿微信|h5仿微信界面|h5仿微信聊天(单聊、多聊)
该移动端h5仿微信聊天实战项目,用到了最新h5+css3+zepto+weui+wcPop+swiper等多种混合技术进行开发,实现了预览图片(双击放大、手指缩放)、 播放视频及发送消息、表情,打赏、霸屏、发红包等功能,所有弹窗使用wcPop插件统一风格,长按消息可以浮动定位弹出操作菜单。
案例效果图:
<div class="wc__chat-wrapper flexbox flex__direction-column"> <!-- //顶部 --> <div class="wc__headerBar fixed"> <div class="inner flexbox"> <a class="back splitline" href="javascript:;" onclick="history.back(-1);"></a> <h2 class="barTit flex1">达摩学院(217)</h2> <a class="barIco u-qun" href="javascript:;"></a> </div> </div> <!-- //微聊消息上墙面板 --> <div class="wc__chatMsg-panel flex1"> <div class="chatMsg-cnt"> <ul class="clearfix" id="J__chatMsgList"> <li class="time"><span>2017年12月28日 晚上21:10</span></li> <li class="notice"><span>"<a href="#">Aster</a>"通过扫描"<a href="#">张小龙</a>"分享的二维码加入群聊</span></li> <li class="time"><span>2017年12月28日 晚上23:15</span></li> <li class="notice"><span>"<a href="#">雷军</a>"通过扫描"<a href="#">李彦宏</a>"分享的二维码加入群聊</span></li> <li class="notice"><span>当前群聊人数较多,已显示群成员昵称,同时为了信息安全,请注意聊天隐私</span></li> <li class="time"><span>2017年12月31日 晚上22:30</span></li> <!-- 别人--> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img01.jpg" /></a> <div class="content"> <p class="author">马云(老子天下第一)</p> <div class="msg"> hello 各位女士、先生,欢迎大家来到达摩派,进群后记得修改备注哈~~ 名字+公司/职业/机构 <img class="face" src="img/emotion/face01/29.png"><img class="face" src="img/emotion/face01/71.png"><img class="face" src="img/emotion/face01/75.png"> </div> </div> </li> <!--自己--> <li class="me"> <div class="content"> <p class="author">Nice奶思</p> <div class="msg"> 么么哒,马总发个红包呗! </div> </div> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a> </li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a> <div class="content"> <p class="author">MR(马蓉 ▪ ☀☼㈱)</p> <div class="msg"> 马总,晚上好哇,还木休息呢。我还在景区度假呢,棒棒! <img class="face" src="img/emotion/face01/69.png"> </div> </div> </li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a> <div class="content"> <p class="author">MR(马蓉 ▪ ☀☼㈱)</p> <div class="msg picture"> <img class="img__pic" src="img/placeholder/wchat__img03.jpg" /> </div> </div> </li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img12.jpg" /></a> <div class="content"> <p class="author">Flowers(杨迪)</p> <div class="msg"> 哼,要红包。 <img class="face" src="img/emotion/face01/63.png"> </div> </div> </li> <li class="time"><span>1月1日 早上02:00</span></li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img04.jpg" /></a> <div class="content"> <p class="author">Xlong(张小龙)</p> <div class="msg"> 小程序后台新增推广功能,支持开发者添加与业务相关的自定义关键词!<br> <a href="https://mp.weixin.qq.com/cgi-bin/wx">https://mp.weixin.qq.com/cgi-bin/wx</a> </div> </div> </li> <li class="me"> <div class="content"> <p class="author">Nice奶思</p> <div class="msg"> 小龙哥好敬业哇,牛牛牛!<img class="face" src="img/emotion/face01/79.png"> </div> </div> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a> </li> <li class="me"> <div class="content"> <p class="author">Nice奶思</p> <div class="msg video"> <img class="img__video" src="img/placeholder/wchat__video02-poster.jpg" videoUrl="img/placeholder/wchat__video02-Y7qk5uVcNcFJIY8O4mKzDw.mp4" /> </div> </div> <a class="avatar" href="好友主页(详细资料).html"> <img src="img/uimg/u__chat-img14.jpg" /> </a> </li> <li class="time"><span>2月25日 早上09:48</span></li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img06.jpg" /></a> <div class="content"> <p class="author">Robin(李彦宏)</p> <div class="msg"> 早上好,各位,这次人机交互线下活动的视频及PPT预计明天可以公开啦 <img class="face" src="img/emotion/face01/4.png"> </div> </div> </li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img15.jpg" /></a> <div class="content"> <p class="author">King(李嘉诚)</p> <div class="msg"> 这个不错,支持下~ <img class="face" src="img/emotion/face01/42.png"> </div> </div> </li> <li class="time"><span>3月12日 下午14:28</span></li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img03.jpg" /></a> <div class="content"> <p class="author">Jay(周杰伦)</p> <div class="msg"> 我的新专辑《告白气球》将于6.1上线,到时希望大家多多支持啦~ <img class="face" src="img/emotion/face01/66.png"> </div> </div> </li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a> <div class="content"> <p class="author">Luci(王巧巧)</p> <div class="msg picture"> <img class="img__pic" src="img/placeholder/wchat__img01.jpg" /> </div> </div> </li> <li class="time"><span>"马云(老子天下第一)" 撤回了一条消息</span></li> <li class="others"> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a> <div class="content"> <p class="author">Luci(王巧巧)</p> <div class="msg video"> <img class="img__video" src="img/placeholder/wchat__video01-poster.jpg" videoUrl="img/placeholder/wchat__video01-Y7qk5uVcNcFJIY8O4mKzDw.mp4" /> </div> </div> </li> <li class="time"><span>"Luci(王巧巧)" 已被移出群聊</span></li> <li class="me"> <div class="content"> <p class="author">Nice奶思</p> <div class="msg picture"> <img class="img__pic" src="img/placeholder/wchat__img02.jpg"> </div> </div> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a> </li> <li class="me"> <div class="content"> <p class="author">Nice奶思</p> <div class="msg"> 北京新世纪饭店发放福利啦,免费领取VIP会员,大家快去参与吧。 </div> </div> <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a> </li> </ul> </div> </div> <!-- //微聊底部功能面板 --> <div class="wc__footTool-panel"> <!-- 输入框模块 --> <div class="wc__editor-panel wc__borT flexbox"> <div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true"></div></div> <i class="btn btn-emotion"></i> <i class="btn btn-choose"></i> <button class="btn-submit J__wchatSubmit">发送</button> </div> <!-- 表情、选择模块 --> <div class="wc__choose-panel wc__borT" style="display: none;"> <!-- 表情区域 --> <div class="wrap-emotion" style="display: none;"> <div class="emotion__cells flexbox flex__direction-column"> <div class="emotion__cells-swiper flex1" id="J__swiperEmotion"> <div class="swiper-container"> <div class="swiper-wrapper"></div> <div class="pagination-emotion"></div> </div> </div> <div class="emotion__cells-footer" id="J__emotionFootTab"> <ul class="clearfix"> <li class="swiperTmpl cur" tmpl="swiper__tmpl-emotion01"><img src="img/emotion/face01/face-lbl.png" alt=""></li> <li class="swiperTmpl" tmpl="swiper__tmpl-emotion02"><img src="img/emotion/face02/face-lbl.gif" alt=""></li> <li class="swiperTmpl" tmpl="swiper__tmpl-emotion03"><img src="img/emotion/face03/face-lbl.gif" alt=""></li> <li class="swiperTmpl" tmpl="swiper__tmpl-emotion04"><img src="img/emotion/face04/face-lbl.gif" alt=""></li> <li class="swiperTmpl" tmpl="swiper__tmpl-emotion05"><img src="img/emotion/face05/face-lbl.gif" alt=""></li> <li class="swiperTmpl" tmpl="swiper__tmpl-emotion06"><img src="img/emotion/face06/face-lbl.gif" alt=""></li> <li class="swiperTmplSet"><img src="img/wchat/icon__emotion-set.png" alt=""></li> </ul> </div> </div> </div> <!-- 选择区域 --> <div class="wrap-choose" style="display: none;"> <div class="choose__cells"> <ul class="clearfix"> <li><a class="J__wchatZp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-zp.png" /><input type="file" accept="image/*" /></span><em>照片</em></a></li> <li><a class="J__wchatSp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sp.png" /><input type="file" accept="video/*" /></span><em>视频</em></a></li> <li><a class="J__wchatBp" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-bp.png" /></span><em>霸屏</em></a></li> <li><a class="J__wchatDs" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-ds.png" /></span><em>打赏</em></a></li> <li><a class="J__wchatHb" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-hb.png" /></span><em>红包</em></a></li> <li><a class="J__wchatSc" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-sc.png" /></span><em>我的收藏</em></a></li> <li><a class="J__wchatWj" href="javascript:;"><span class="img"><img src="img/wchat/icon__choose-wj.png" /></span><em>文件</em></a></li> </ul> </div> </div> </div> </div> </div>
<!-- …… 霸屏、打赏、红包弹窗模板.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 -->
——>>>欢迎一起交流学习 QQ:282310962 微信:xy190310