html5仿微信聊天室weChatRoom案例|多人群聊互动|仿微信聊天界面
该项目是使用html5+css3+zepto+swiper+wcPop等技术开发的仿微信聊天室，捣鼓调试了很长时间，在手机上已经适配各个设备，采用的是iphone6的750px屏宽加上css3里的flex伸缩布局，该聊天项目用到的各种弹窗效果则是自己专门为聊天项目开发的wcPop插件(仿微信弹窗效果、android、ios风格弹窗效果)。
先展示下项目截图
- 消息、通讯录、我三个模块采用了swiper滑动滚屏效果，实现了类似微信左右页面滚动切换
<!-- 左右滑屏切换.Start -->
<script type="text/javascript">
var chatSwiper = new Swiper('.swiper-container',{
pagination: '.wechat-pagination',
paginationClickable: true,
paginationBulletRender: function (chatSwiper, index, className) {
switch (index) {
case 0:
name='<i class="ico i1"><em class="wc__badge">105</em></i><span>消息</span>';
break;
case 1:
name='<i class="ico i2"></i><span>通讯录</span>';
break;
case 2:
name='<i class="ico i4"></i><span>我</span>';
break;
default: name='';
}
return '<li class="flex1 ' + className + '">' + name + '</li>';
}
})
</script>
<!-- 左右滑屏切换 end -->- 利用zepto里面的longTap事件实现消息列表长按弹窗提示、通讯录长按提示
// 聊天记录页面（长按操作）
$("#J__recordChatList").on("longTap", "li", function(e){
var _this = $(this);
wcPop({
skin: 'androidSheet',
shadeClose: true,
btns: [
{text: '标为未读', style: 'font-size:14px;line-height:50px;'},
{text: '置顶聊天', style: 'font-size:14px;line-height:50px;'},
{
text: '删除该聊天',
style: 'font-size:14px;line-height:50px;',
onTap() {
wcPop({
skin: 'android',
content: '删除后，将会清空该聊天记录',
btns: [
{
text: '取消',
onTap() {
wcPop.close();
}
},
{
text: '删除',
style: 'color:#ffba00',
onTap() {
_this.remove();
wcPop.close();
}
}
]
});
}
}
]
});
});$("#J__addrFriendList").on("longTap", ".row", function(e){
var _this = $(this);
wcPop({
skin: 'androidSheet',
shadeClose: true,
btns: [
{
text: '设置备注及标签',
style: 'font-size:14px;line-height:50px;',
onTap() {
wcPop.close();
}
}
]
});
});聊天页面底部则是使用div属性contenteditable模拟富文本框，可以输入表情
<!-- 输入框模块 -->
<div class="wc__editor-panel wc__borT flexbox">
<div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true" style="user-select:text;-webkit-user-select:text;"></div></div>
<i class="btn btn-emotion"></i>
<i class="btn btn-choose"></i>
<button class="btn-submit J__wchatSubmit">发送</button>
</div>底部的表情、动图gif模块可以左右滑动切换，效果类似微信表情滑动效果，也是采用了swiper滑动功能；另外还有一些红包、霸屏、打赏等微交互功能。
/* ...霸屏事件.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:#00c1de;color:#fff;font-size:16px;',
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:#00c1de;color:#fff;font-size:16px;',
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:#00c1de;color:#fff;font-size:16px;',
onTap() {
alert("塞钱成功！");
wcPop.close(bpidx);
}
}
]
});
});
/* ...红包事件.end */
// ...关闭
$("body").on("click", ".wc__popupTmpl .wc-xclose", function(){
wcPop.close();
});// ...处理编辑器信息
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);