小程序-微信聊天功能开发详解

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

直接先放效果图吧！

       

框架： 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