模仿微信群組聊天的H5頁面

開始

上半年小米Max發布的時候，做了一個在朋友圈傳播的模仿微信的群聊界面H5頁面：一群公司的大咖在群裡聊小米Max，用戶可以向大咖們提問，以此了解產品。

頁面的主體是群組聊天對話，同時在對話中包含了許多互動：圖片、影片、動畫、翻譯等。如果用戶是用微信打開的鏈接，還會獲取用戶名和頭像，作為頁面裡的“我”來聊天，效果有點逼真~

不囉嗦，先看頁面效果。頁面地址（手機瀏覽效果較好）。微信裡訪問這個連結 頁面裡有“彩蛋”，還能求紅包喔~

圖片描述

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

Codepen 鏈接點擊預覽

整體佈局

整體佈局還是很簡單的：一個可以滾動的div，承載所有對話；一個固定在底部的“輸入框”，包含所有選項。

人物 & 對話資料

群聊裡的所有人物都保存在 js 物件 _members 裡，包含人物的 id、姓名、和頭像。

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

所有的對話內容都保存在一個js 物件_dialog 裡，_dialog 裡保存了每段對話（用戶不用做任何操作，自動播放的一組，幾條訊息），每段對話都包含若干條訊息，透過為每個訊息設定類型、作者、內容、特殊事件，讓聊天內容作為元資料逐條展示。

每個訊息都包括：

類型（五種） - plain, picture, video, system, animation；

作者- _member 裡的一個人物；

內容- 訊息內容

作者- _member 裡的一個人物；

內容- 訊息內容；後停頓多久繼續播放下一句對話（不設定的話則隨機停頓時間）；

特殊標誌（會觸發特殊事件） - 用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多次..）~ 還是很開心的~