一個模仿微信羣聊的H5頁面

開始

上半年小米Max發佈的時候，作了一個在朋友圈傳播的模仿微信的羣聊界面H5頁面：一羣公司的大咖在羣裏聊小米Max，用戶能夠向大咖們提問，以此瞭解產品。

頁面的主體是羣聊對話，同時在對話中包含了不少交互：圖片、視頻、動畫、翻譯等。若是用戶是用微信打開的連接，還會獲取用戶名和頭像，做爲頁面裏的「我」來聊天，效果有點逼真~

不囉嗦，先看頁面效果。頁面地址（手機瀏覽效果更好）。微信裏訪問這個連接 頁面裏有「彩蛋」，還能求紅包喔~

原頁面對話和交互都不少，我擇出了主要邏輯和交互放在codepen上，供有興趣的同窗參考~ 同時簡單分析了本身的想法和思路，也算是一個總結~

Codepen 連接

總體佈局

總體佈局仍是很簡單的：一個能夠滾動的div，承載全部對話；一個固定在底部的「輸入框」，包含全部選項。

人物 & 對話數據

羣聊裏的全部人物都保存在 js 對象 _members 裏，包含人物的 id、姓名、和頭像。

var _members = {
    lj: {
        id: 'lj',
        name: '雷軍',
        avatar: _imgUrl + 'a-lj.png',
    },
}

全部的對話內容都保存在一個 js 對象 _dialog 裏，_dialog 裏保存了每段對話（用戶不用作任何操做，自動播放的一組，幾條消息），每段對話都包含若干條消息，經過給每條消息設置類型、做者、內容、特殊事件，讓聊天內容做爲元數據逐條展現。

每條消息都包括：

1. 類型（五種） - plain, picture, video, system, animation；
2. 做者 - _member 裏的一我的物；
3. 內容 - 消息內容；
4. 停頓時間 - 消息出現後停頓多長時間繼續播放下一句對話（不設置的話則隨機停頓時間）；
5. 特殊標誌（會觸發特殊事件） - 用 flag 字段表示；

var _dialog = {
    d0: [{
        type: 'plain',
        author: _members.lj,
        content: userName + ' 你好，are you ok？',
        pause: 2000,
    }, {
        type: 'plain',
        author: _members.lwq,
        content: '歡迎 ' + userName + gif.welcome + gif.welcome + gif.welcome,
        flag: 'emoji-welcome',
    },]
    // ... more dialog
}

動起來！

有了元數據以後就很簡單了~ 循環某個對話，逐條將裏面的消息數據拼接成html, 而後添加到頁面上。當用戶點擊「輸入框」裏的某個問題以後，觸發相應的對話。若是消息裏包含 flag，經過 flag 的內容來觸發不一樣的特殊事件。

而後~ 噹噹噹~ 到此咱們的頁面已經初具雛形了~

真的就這麼簡單？

雖然頁面已經初具雛形，但是基礎的對話效果還很哏.. 想象一下每隔一小會兒頁面上就忽然多出一條消息，效果很奇怪的。爲何微信聊天的時候就沒有這種生硬的感受呢？筆者默默的去觀察了一下微信，發現每條消息出現的時候，都有一個輕輕向上冒的效果~ 同時上面的消息都會一塊兒向上滾動。

這種簡單的效果，對於能用css解決的事情，儘可能不寫js的筆者來講，簡直不要過輕鬆好吧。

因而給每條消息都添加了一個css動畫 goup，這樣在消息的 DOM 元素被添加到頁面上時，消息自動就有一個向上冒出的效果。同時，每添加一條消息，都把對話區域平滑滾動到底部（便於顯示最新的消息），固然這個須要寫js了.. 這樣以前的消息都會一塊兒向上滾動。

而後

接着添加各類交互，音效，完善動畫，對話等等（你不會想知道這包含了多少工做量的。。）
而後噹噹噹~ 這個H5頁面就算完成了。

最後

很想說，這個頁面的完成離不開咱們靠譜的設計師和策劃童靴，你們一次次的完善，記不清到底修改了多少次.. 看着頁面慢慢從一個雛形，直到終於上線的那一刻（雖然上線後也改了hin屢次..）~ 仍是很開心的~

第一次作H5，有收穫也有遺憾，但願下次更好~

原始連接

http://varnull.cn/h5wechat/