采用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 | 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 | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運行于移動端和主流PC瀏覽器。
http://www.mescroll.com/
https://github.com/mescroll/mescroll
注意:如果你是uni-app開發者,下面是mescroll的uniapp版本
http://www.mescroll.com/uni.html
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頁面營銷制作
著微信應用的成功推廣,中國移動互聯網達到了一個全新的廣度和高度。據CNNIC統計,中國目前已有7.6億手機用戶,其中智能手機用戶高達5.6億之眾。可以說,幾乎人人微信,人人手機,人人移動互聯。這種場景是空前的,智能手機成了凌駕于電視、報紙、廣播、雜志等傳統媒體之上的最龐大、最活躍的媒體,移動互聯網無時不在、無處不在。
一,變 化
互聯網的變化是巨大的,盡管使用者不怎么留意,發展速度依然是突飛猛進、一日千里。
終端變化:忽然一夜之間,電腦已經不那么重要了,平板火了一段時間也慢慢沉寂了,只有智能手機越來越普及,功能越來越強大,手機應用越來越多,現在人們已經幾乎離不開手機了。
入口變化:電腦終端時代,搜索引擎、門戶網站為最大入口,到了移動互聯網時代,社交網站、新聞內容成了最大的入口。其次就是各類應用,也就是app,更是繞開了所有的入口,直接鏈接消費者的終端。
應用變化:由于微信的普及,html5已經成了網站的標配,隨著即將推出的【微信應用號】,html5將會達到前所未有的火爆,傳統的原生app很可能會逐步被html5取代。
生態變化:從終端到入口,從入口到應用,整個互聯網的生態已經發生了劇烈的變化。原來企業可以做個網站,通過搜索引擎或門戶網站上的廣告,就有訪問量,現在不行了,只有讓消費者安裝app,網站才有人訪問。即使有人從傳統的路徑訪問了你的網站,手機瀏覽時界面不友好,訪問者馬上就會關閉。就算你在火爆的app上做了廣告,訪問到達后,瀏覽者也不會駐留。原因很簡單,你的網頁不適合手機瀏覽。
二,優 勢
隨著手機的普及,html5網站越來越受到重視。究其原因,還是html5的優勢所導致。Html5到底具備哪些優勢呢?
自動適應顯示設備的尺寸和分辨率。一個基于html5開發的網站,既可以用電腦瀏覽,也可以用平板瀏覽,還可以用手機瀏覽。安卓系統和蘋果系統都可以流暢地瀏覽。更重要的是,頁面隨著顯示屏尺寸和分辨率自動縮放,內容也可以通過觸摸放大縮小。
支持各種瀏覽器。無論是微軟的瀏覽器還是安卓的瀏覽器,或者其他的任何瀏覽器,都可以順暢瀏覽。
設備兼容。HTML5為網頁應用開發者們提供了更多功能上的優化選擇,帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入的開放接口,使外部應用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。
網頁多媒體特性。支持網頁端的音頻、視頻等多媒體功能, 與網站自帶的APPS、攝像頭,影音功能相得益彰。
還有其他的很多功能,比如三維圖形、性能與集成特性、在線游戲開發等。
最重要的是,只有基于html5的網頁,才能在手機app和瀏覽器里廣泛轉載、瀏覽。一旦進入了【微信應用號】,幾億會員就成了你的營銷對象。
還有一條超級有用的就是,你可以隨時向會員或訂閱者推送信息,這個是前所未有的。
總之,html5帶來的是全新的用戶體驗,可實現多媒體和游戲接入,可以 直接推送,可以在手機上隨意轉載分享。
三,超 車
或許,你錯過了門戶時代,或許你錯過了搜索引擎時代,但你不能錯過移動互聯網時代。在移動互聯網時代,html5是彎道超車的發動機。
與傳統的互聯網生態不同,移動互聯網的接口是app,任何app的接口都是html5網頁,微信分享的外部資源也是html5網頁。也就是說,你有了html5網站,就融入了5.6億中國智能手機用戶,就可以在微信這個龐大的群體里恣意營銷。
首先,你必須拋棄小而全、大而全的傳統理念,只做自己核心的內容。其次,你要真正把用戶當上帝,時刻注意應用場景和界面的友好,然后才可以設計制作網站。網站一旦制作成功,你就可以進入微信的應用號了。當然,你也可以制作網頁版的app。
需要注意的是,app一般是原生的,與基于html5的app稍有不同,部分品牌的安卓手機(我就不列出來了,有過類似經歷的人都知道,期望這些廠商趕緊升級自己的操作系統)不能上傳圖片、視頻等內容,其他的與原生app沒什么不同。如果你不需要用戶上傳照片、視頻等文件,就沒有必要花巨資去制作原生app。但社交類、電商類的網站,經常要用到圖片上傳,建議做兩套app。
Html5正在高速發展,由于是開源的,所以現在的不足,不能成為你裹足不前的理由,或許不要多久,html5的網頁app也能上傳圖片視頻,從而可能徹底消滅了原生app。
找個公司,開發出一個基于html5的網站,生成app,然后進入【微信應用號】,打通與微信的聯系,你就掌握了先機。剩下來的就是維護好你的客戶關系和網站內容了。
在應用號沒出來之前,H5網站可以在手機桌面生成快捷圖標。這需要用戶在瀏覽器中收藏本站到左面或菜單,一般人比較懶,也不知道這個操作。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。