微信小程序：实战聊天功能，带详细代码、截图与注释

GIwqwqF.gif

下面是完整代码，可以实现发送以后自动把屏幕的焦点放在最后一条信息

<view class='tab'>
  <view class='lan'>{{tabdata.title}}</view>
  <view class='tent'>
    <text>{{tabdata.attribute_attribute}}</text>
    <text class='fl_r '>{{tabdata.num}}</text>
  </view>
  <view class='xiahuaxian1'></view>
  <view>
    <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>
  </view>
</view>
<view class='news'>
  <view class='xiahuaxian1 xiahuaxia'></view>
  <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>
  <view class="historycon">
    <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>
      <view>
        <text class='time'>{{item.time}}</text>
      </view>
      <block wx:if="{{item.is_show_right ==1}}">
        <view class='my_right'>
          <view class='page_row'>
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
            <image wx:if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'></image>
            <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>
            <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
             <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
          </view>
        </view>
      </block>
      <block wx:else>
        <view class='you_left'>
          <view class='page_row'>
            <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
             <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
            <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
            <image wx:if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'></image>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
  <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />
  <button catchtap="add">发送</button>
  <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
  <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>
</view>```
```// pages/index/to_news/to_news.js
var app = getApp();
var util = require("../../../utils/util.js")
var message = '';
var text = '';
var user = {};
var length;
var zx_info_id;
var openid_talk;
Page({
  data: {
    news: '',
    scrollTop: 0,
    message: '',
    text: text,
    centendata: '',
    nickName: '',
    avatarUrl: '',
    news_input_val:'',
    tabdata: ''
  },
  bindChange: function (e) {
    message = e.detail.value
  },
  //事件处理函数
  add: function (e) {
    var that = this
    var data = {
      program_id: app.jtappid,
      openid: app._openid,
      zx_info_id: zx_info_id,
      content: message,
      openid_talk:openid_talk
    }
    util.request('/session_submit', 'post', data, '正在加载数据', function (res) {
      if (res.data.state == 1) {
        var a = true;
        that.loaddata(a);
        that.setData({
          news_input_val:''
        })
        message = ''
      } else {
        wx.showToast({
          title: '网络错误,请稍后',
        })
      }
    })
  },

  onLoad: function (options) {
    openid_talk = options.openid_talk;
    zx_info_id = options.zx_info_id;
    console.log(openid_talk)
    //调用应用实例的方法获取全局数据
    this.setData({
      zx_info_id: zx_info_id,
      nickName: app.nickName,
      avatarUrl: app.avatarUrl,
    });
    this.loaddata()
  },
  // 页面加载
  loaddata: function (a) {
    var that = this;
    var is_img = true;
    var data = {
      program_id: app.jtappid,
      openid: app._openid,
      zx_info_id: zx_info_id,
      openid_talk: openid_talk
    }
    util.request('/session_page', 'post', data, '', function (res) {
      if (res.data.k1) {
        res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)
      }
      for (var i = 0; i < res.data.k2.length; i++) {
        res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)
        var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);
        switch (n) {
          case 'g':
            res.data.k2[i].is_img = is_img
            break;
          default:
        }
      }
      that.setData({
        tabdata: res.data.k1,
        centendata: res.data.k2.reverse()
      })
      wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });
      if (a) {
        setTimeout(function () {
            that.bottom()
        }, 500);
      }
    })
    setTimeout(function () {
      if (that.data.centendata.length != length) {
        length = that.data.centendata.length
      }
      that.loaddata()
    }, 3000);
    
  },
  // 获取hei的id节点然后屏幕焦点调转到这个节点
  bottom: function () {
    var query = wx.createSelectorQuery()
    query.select('#hei').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      wx.pageScrollTo({
        scrollTop: res[0].bottom  // #the-id节点的下边界坐标
      })
      res[1].scrollTop // 显示区域的竖直滚动位置
    })
  },
  // 选择图片并把图片保存  
  upimg1: function () {
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var data = {
          program_id: app.jtappid,
          openid: app._openid,
          zx_info_id: zx_info_id,
        }
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: '/session_submit', //提交信息至后台
          filePath: tempFilePaths[0],
          name: 'content', //文件对应的参数名字(key)
          formData: data,  //其它的表单信息
          success: function (res) {
            var a = true;
            that.loaddata(a);
            message = ''
          }
        })
      }
    })
  }
})```

```/* pages/index/to_news/to_news.wxss */

page {
  background-color: #f7f7f7;
}

.tab {
  padding: 20rpx 20rpx 40rpx 50rpx;
  height: 20%;
  background-color: white;
}

.tab .tent {
  font-size: 33rpx;
  margin-bottom: 30rpx;
}
.jia_img{
  height: 80rpx;
  width: 90rpx;
}
.new_imgtent{
    height: 180rpx;
  width: 190rpx;
}
.tab .fabu {
  font-size: 33rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.xiahuaxia {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 60rpx;
}

.time {
  text-align: center;
  padding: 5rpx 20rpx 5rpx 20rpx;
  width: 200rpx;
  font-size: 26rpx;
  background-color: #E8E8E8;
}

.new_top_txt {
  width: 50%;
  position: relative;
  top: 38rpx;
  text-align: center;
  margin: 0 auto;
  font-size: 30rpx;
  color: #787878;
  background-color: #f7f7f7;
}

/* 聊天内容 */

.news {
  margin-top: 30rpx;
  text-align: center;
  margin-bottom: 150rpx;
}

.img_null {
  height: 60rpx;
}

.l {
  height: 5rpx;
  width: 20%;
  margin-top: 30rpx;
  color: #000;
}

/* 聊天 */

.my_right {
  float: right;
  position: relative;
  right: 40rpx;
}

.you_left {
  float: left;
  position: relative;
  left: 5rpx;
}

.new_img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.new_txt {
  width: 380rpx;
  border-radius: 7px;
  background-color: #95d4ff;
  padding: 0rpx 30rpx 0rpx 30rpx;
}

.sanjiao {
  top: 20rpx;
  position: relative;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
}

.my {
  border-color: transparent transparent transparent #95d4ff;
}

.you {
  border-color: transparent #95d4ff transparent transparent;
}

.sendmessage {
  background-color: white;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  display: flex;
  flex-direction: row;
}

.sendmessage input {
  width: 80%;
  height: 40px;
  background-color: white;
  line-height: 40px;
  font-size: 14px;
  border: 1px solid #d0d0d0;
  padding-left: 10px;
}

.sendmessage button {
  border: 1px solid white;
  width: 18%;
  height: 40px;
  background: #fff;
  color: #000;
  line-height: 40px;
  font-size: 14px;
}

.historycon {
  height: 90%;
  width: 100%;
  flex-direction: column;
  display: flex;
  margin-top: 100rpx;
  border-top: 0px;
}
.hei{
  margin-top: 50px;
  height: 20rpx;
}
.history {
  height: 100%;
  margin-top: 15px;
  margin: 10px;
  font-size: 14px;
  line-height: 40px;
  word-break: break-all;
}