目介紹

采用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頁面營銷制作