H5頁面 - 小米 Max 微信群聊

開始

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

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

頁面里有“彩蛋”，還能求紅包喔~

不啰嗦，先看頁面效果。 頁面地址 （手機瀏覽效果更好）。 微信里訪問這個鏈接

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

See the Pen Wechat Dialog Mimicking by Yawen DENG ( @Simona_Deng ) on CodePen .

整體布局

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

人物 amp; 對話數據

群聊里的所有人物都保存在 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. 停頓時間 - 消息出現后停頓多長時間繼續播放下一句對話（不設置的話則隨機停頓時間）；

3. 特殊標志（會觸發特殊事件） - 用 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，有收獲也有遺憾，希望下次更好~