微信小程序聊天系统

Posted on | In

摘要：

这是一篇关于小程序聊天系统的制作

  1. 聊天界面如何布局
  2. 聊天界面如何跑通逻辑

小程序聊天系统的制作：

先上效果图

image

编辑之后的效果

image

好的，开始上代码

首先呢进行页面布局，这是部分聊天框的代码，这部分我放在了标签里面，让它可进行滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<view class="time">2018-02-16 13:08</view>
<!-- 加了chat_reverse和reverse是对方发给我的信息 -->
<view class="chat chat_reverse">
  <view class="head"></view>
  <view class="send reverse">
    <text>周末有空吗</text>
    <view class="arrow"></view>
  </view>
</view>
<!-- 没有chat_reverse和reverse是我发给对方信息 -->
<view class="chat">
  <view class="send">
    <text>有的，周末你想去哪儿吗有的，周末你想去哪儿吗</text>
    <view class="arrow"></view>
  </view>
  <view class="head"></view>
</view>

这里有一个要注意的地方和一个难点：

聊天框得自适应对不对，不能给他固定一个width，因此呢我给了他一个最大宽度 max-width，那么他在超过最大宽度时候就可以换行。

难点呢在于聊天框的箭头指向，就这个小小的三角形。我绞尽脑汁啊想到了一个办法。我发现如果不给div设置宽度和高度，只给他设置边框的话，那么这个边框就由四个小三角形组成。于是就有了下边的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.send {
  position: relative;
  top: 2rpx;
  width: auto;
  height: auto;
  max-width: 500rpx;
  background: #3c98e7;
  border-radius: 16px;
  /* 圆角 */
  white-space: pre-wrap;
  display: inline-block;
}

.send .arrow {
  position: absolute;
  top: 4px;
  right: -24rpx;
  width: 0;
  height: 0;
  font-size: 0;
  border-top: 8rpx solid;
  border-left: 16rpx solid;
  border-bottom: 6rpx solid;
  border-right: 16rpx solid;
  border-color: transparent transparent transparent #3c98e7;
  transform: rotate(-28deg);
}

这里呢，父元素就是聊天框，子元素就是指向的箭头，聊天框相对定位，箭头绝对定位，将他的位置固定再聊天框边边那块地方。然后箭头的大小啊，位置啊，通过top、border-top等这几个元素慢慢调吧。这里我还给他设置了一个角度transform: rotate(-28deg);

那么到这里，界面构建的应该都没太大问题了吧？然后开始写一写逻辑部分。

首先呢既然是聊天系统，你发送的话信息得出去吧。那么这里的逻辑是这样的：

HTML部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<scroll-view scroll-y='true' scroll-top="{{scrollTop}}" class="content">
  <view class="time">2018-02-16 13:08</view>

  <!-- 这里模拟聊天数据 -->
  <view class="chat {{item.receive?'':'chat_reverse'}}" wx:for="{{chatData}}" wx:key="index">
    <!-- 如果对方发送消息，头像在左边 -->
    <view class="head" wx:if="{{!item.receive}}"></view>
    <view class="send {{item.receive?'':'reverse'}}">
      <text>{{item.content}}</text>
      <view class="arrow"></view>
    </view>
    <!-- 如果我发送消息，头像在右边 -->
    <view class="head" wx:if="{{item.receive}}"></view>
  </view>
  <!-- 底部的距离 -->
  <!-- <view style="width: 100%;height: 120rpx;float:left;"></view> -->
</scroll-view>

<!-- 信息发送框 -->
<view class="message">
  <input value="{{mySend}}" placeholder="想说点什么..." placeholder-class="placeholder" confirm-type="send" bindconfirm="bindSend"
    maxlength="-1" />
</view>
CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
bindSend: function(e) {
    var that = this;
    var obj = {}; // 给他一个对象，存放将要发送的消息
    console.log(e.detail.value);
    obj.content = e.detail.value;
    obj.receive = true;
    that.data.chatData.push(obj)
    that.setData({
      chatData: that.data.chatData,
      mySend: ''  //  发送之后，这里将聊天框清空
    })
    that.sendMessage();
  }

我用了 bindconfirm=”bindSend” 绑定键盘的完成按钮，当你放松时执行 bindSend，bindSend 的作用很简单，就是储存这一次的消息，并且 添加到消息的这个数组中的最后一位（这里还加了一个参数 receive，为了判断是我发送的还是我接收的）。

这里还有个稍难点

就是每次发送完毕之后，页面应该是要滚动到最底部，才能看到最新的消息对不对，不然不符合用户体验。于是乎我用了这个方法：

1
2
3
4
5
6
sendMessage: function () {
    var len = this.data.chatData.length //遍历的数组的长度
    this.setData({
      scrollTop: 1000 * len // 这里我们的单对话区域最高1000，取了最大值，应该有方法取到精确的  
    });
  }

代码很简单，我定义了一个值scrollTop，就是设置设置竖向滚动条位置，参考文档在这里，然后在scroll-view这个组建上的scroll-top属性绑定这个值就好了。

附送两个小技巧

点击发送之后键盘不收起

1
<input confirm-type="send" bindconfirm="bindSend" confirm-hold="true"/>

页面滚动到最底部时有个过度效果

1
<scroll-view scroll-y='true' scroll-with-animation="true">

好了，由于目前还没有对接后台，所以微信小程序聊天系统的讲解就先到这里了，对接后小程序的WebSocket方法我估计也会写一篇文章，在此多谢大家的观看了