目介绍

采用html5+css3+Zepto+swiper+wcPop+flex等技术开发的聊天实例。实现发送消息/表情，图片/视频预览，添加好友/群聊，语音模块，地图定位模块，整体功能界面效果类似微信聊天。

使用技术

效果演示

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

了解Flex布局

Flex | Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

https://www.runoob.com/w3cnote/flex-grammar.html

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

如上图：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

想要了解Flex布局更多的用法，可以去网上查阅相关资料，这里不作详细概述了。

下拉刷新插件mescroll

mescroll | 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器。

http://www.mescroll.com/

https://github.com/mescroll/mescroll

注意：如果你是uni-app开发者，下面是mescroll的uniapp版本

http://www.mescroll.com/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 && _sel.rangeCount > 0) {
			return _sel.getRangeAt(0);
		}
	},
	addRange: function () {
		if (_lastRange) {
			_sel.removeAllRanges();
			_sel.addRange(_lastRange);
		}
	}
}

// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
	var that = $(this), range;
	
	var img = that[0].cloneNode(true);
	if (!_editor.childNodes.length) {
		_editor.focus();
	}
	_editor.blur(); //输入表情时禁止输入法

	setTimeout(function () {
		if (document.selection && document.selection.createRange) {
			document.selection.createRange().pasteHTML(img);
		} else if (window.getSelection && window.getSelection().getRangeAt) {
			range = _rng.getRange();
			range.insertNode(img);
			range.collapse(false);
			
			//记录当前光标位置 (否则光标会跑到表情前面)
			_lastRange = range;
			_rng.addRange();
		}
	}, 10);
});

• 判断编辑框信息是否为空

function isEmpty() {
	var html = $editor.html();
	html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
	html = html.replace(/<[^img].*?>/ig, "");
	html = html.replace(/ /ig, "");
	return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}

❤️ 最后

如果你觉得这篇文章对你有帮助，麻烦点个「关注/转发」，让更多的人也能看到你的分享！

章来源：墨鹊微站

随着移动终端的普及与发展，移动互联网营销逐渐超越了传统的电视广告、户外广告等，与PC网站成为了主流的营销推广渠道，越来越多的企业开始关注移动端并将其作为了重点营销推广渠道。那么h5网站为什么成为了移动端主要的营销工具，并受到企业的广泛关注与认可呢？小编今天带大家了解一下。

在2000年互联网时代，百度、新浪、搜狐、论坛成为了主要的流量聚集地，大小企业为官网SEO推广头疼的时候，移动端h5微网站异军突起，它基于微信朋友圈迅速传播，用户无需下载或输入网址就能随时访问，加上新颖酷炫的样式，受到广泛好评，并且随着4G覆盖全国，h5网页访问变得更加流畅、便捷。

h5网页有什么特点？

h5是基于HTML5框架下制作，h5也可以称为微信网页，它通过移动终端进行访问，不仅是微信，也可以通过手机浏览器、微博、贴吧、知乎、小红书等主流社交媒体平台分享、浏览。它酷炫的交互页面以及随时访问的便捷性，大大提高了用户的浏览及分享兴趣。

H5页面主要的作用

1、品牌传播：公益传播、人才招聘、品牌推广；

2、活动推广：活动邀约、宣传手册、互动游戏；

3、产品展示：产品手册、企业微官网。

H5微站通过不同的导航模式进行页面链接跳转，如九宫格、转盘导航、抽屉式导航、底部导航、轮播图等，并通过图文编辑、视频、音乐、资料下载、倒计时、日程、表单等组件制作的内容页来增加内容的交互功能，这样用户通过简洁的首页即可点击跳转至所感兴趣的模块。轻松实现如互动游戏、在线直播、地图导航、公司介绍、活动报名、在线签到等模块的跳转及浏览。

如果你需要给用户发送不同的板块的链接及应用，不妨来试试墨鹊的h5网站编辑器吧，一个h5网站即可集合所有的链接及内容页展示，h5网站作为功能“集合”再通过微信进行传播分享。

墨鹊-免费手机建站-微网站-H5页面营销制作