小程序-微信聊天功能開發詳解

需求：聊天功能（效果參照微信聊天）

直接先放效果圖吧！

       

框架： wepy (vue)

主要思路：

　　一、佈局只編寫一個消息組件，包括頭像和內容兩部分！flex佈局（左到右row），對方發來的消息正常顯示，我方發出去的消息右到左佈局（flex-direction: row-reverse;），這樣增長了消息組件的複用！如圖消息組件：

　　

 

　　二、消息數據所有存儲在一個Array中，demo如圖：text爲消息內容、isMine判斷該消息來自於對方仍是我本身，從而動態消息item的CSS佈局（左到右或右到左）

　　

　　三、底部input，綁定實時監聽屬性 bindinput，失焦事件會有一點小bug，效果不是很好，value值綁定data中userInputContent，做爲發送按鈕的發送數據。

　　

　　四、獲取input值和點擊發送按鈕方法以下圖，無論是服務器拉取的對方的消息，仍是咱們本身發送的消息，都在這個數組內存儲。至於爲啥要 unshift 反向壓入而不是 push 進去？答案往下看吶

　　

　　五、以上步驟基本能夠實現聊天功能demo了，可是有個瑕疵！本身發送的消息，在超過一屏的高度後，發送出去的消息會在屏幕可視區域下方，須要手動滑動才能夠看到，想要那種一發送消息就在最底部出現的效果，思路有不少，

　　　　好比:把屏幕自動拉倒最底部等等，個人解決辦法是：負負得正！flex佈局中消息item能夠左到右和右到左來佈局對方和個人消息框，即對方頭像在左，內容在右，個人則反過來。同理：消息要動態顯示在最底部，把消息Box的flex佈局變爲下到上，如圖msgBox的佈局，這樣第一條消息會顯示在最下方。咱們再把消息數組反向壓入數據 UNshift，獲得負負得正的效果，就實現了咱們發出的消息永遠在屏幕最底部。

　　

碼字不已，有更好的方法能夠一塊兒交流！

再補充一點，最近有童鞋私聊我說消息怎麼一加載列表就要自動滑到最底部？如同微信聊天那樣，點擊進去，展現的是最新的最底部的消息，例如一屏幕假設最多放10條消息，我有50條消息，點進來展現的是最新的第50條消息而且在屏幕最下端，個人解決思路是在onload時，根據消息數量和高度，讓屏幕往下滑必定距離便可，No nonsense， code it

pageScrollToBottom( msgLength ) {
        wx.createSelectorQuery().select('#contentBox').boundingClientRect(function(rect){      // 使頁面滾動到底部   
            log('rect', rect)   
            wx.pageScrollTo({
                scrollTop: rect.bottom + msgLength*60,
                duration: 80
            })
            log('msgBox的下邊界座標： ', msgLength )
        }).exec()  
    }

以上這個函數在onload時能夠調用，保證了進來後就是最底部，（固然得根據本身業務邏輯改動下，好比id，高度等），可是這樣弄完後還會存在一個問題，就是ios端發送消息會遮住最後一個消息，安卓卻不會有，爲啥呢？？？？我也不知道，難道是ios對flex的支持沒有安卓的全面？先無論，有問題先解決問題，既然遮住了，那麼咱們每次發送完消息後就在次調用上面的函數不就好了嗎

this.pageScrollToBottom( this.msgLength + 1 );

OK