项目简介
使用Html5 css3 Zepto swiper wcPop Flex等技术开发的聊天实例。
实现发送消息/表情，图片/视频预览，添加好友/群聊，语音模块，地图定位模块，整体功能界面效果类似微信聊天。使用技术
效果演示
了解Flex布局
Flex | Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
如上图：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
想要了解Flex布局更多的用法，可以去网上查阅相关资料，这里不作详细概述了。
下拉刷新插件mescroll
mescroll | 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器。
注意：如果你是uni-app开发者，下面是mescroll的uniapp版本
uni.html 运行效果图
弹窗组件wcPop
wcpop是一个手机端弹窗插件，提供了多种类型的弹窗功能，有ios、android弹窗效果
// 基本使用
wcPop({
//传入参数
}) 如上图 弹窗菜单，使用下面代码即可实现
$("#J_chatList").on("contextmenu", ".item", function (e) {
e.preventDefault();
//获取长按坐标点
var _points = [e.pageX, e.pageY];
wcPop({
skin: 'contextmenu',
follow: _points,
opacity: 0,
btns: [
{
text: '发送给朋友',
style: 'color:#212121;',
onTap() {...}
},
{text: '复制'},
{text: '收藏'},
{text: '撤回'},
{text: '删除'},
]
});
});聊天功能模块
- 滚动聊天消息至最底部
function wchat_ToBottom() {
$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}- 获取光标位置 | 在光标处插入表情
// 定义最后光标位置
var _lastRange = null, _sel = window.getselection && window.getSelection();
var _rng = {
getRange: function () {
if (_sel && _ > 0) {
return _(0);
}
},
addRange: function () {
if (_lastRange) {
_();
_(_lastRange);
}
}
}
// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
var that = $(this), range;
var img = that[0].cloneNode(true);
if (!_edi) {
_edi();
}
_edi(); //输入表情时禁止输入法
setTimeout(function () {
if && document.) {
document.().pasteHTML(img);
} else if && window.getSelection().getRangeAt) {
range = _rng.getRange();
range.insertNode(img);
range.collapse(false);
//记录当前光标位置 (否则光标会跑到表情前面)
_lastRange = range;
_rng.addRange();
}
}, 10);
});- 判断编辑框信息是否为空
function isEmpty() {
var html = $edi();
html = (/<br[\s\/]{0,2}>/ig, "\r\n");
html = (/<[^img].*?>/ig, "");
html = (/ /ig, "");
return (/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}❤️ 最后
如果你觉得这篇文章对你有帮助，麻烦点个「关注/转发」，让更多的人也能看到你的分享！