微信小程序前端聊天功能

<–wxml

**

  <!-- 单个消息1 客服发出（左） -->
  <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
    <view style='width: 11vw; height: 11vw;'>
      <image style='width:11vw; height: 11vw; border-radius: 10rpx;' src='/images/doctor.png'></image>
    </view>
    <view style='width: 8vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
      <image style='width: 4vw;' src='' mode='widthFix'></image>
    </view>
    <view class='leftMsg'>{{item.content}}</view>
  </view>

  <!-- 单个消息2 用户发出（右） -->
  <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
    <view  style='display: flex; justify-content: flex-end;flex-wrap:wrap;flex-direction:column; padding: 2vw 2vw 2vw 11vw;'>
    <text wx:if='{{item.contentType}}' class='rightMsg'>{{item.content}}</text>
    <image wx:else class='rightP' src='{{item.image}}' mode='widthFix' data-index="{{index}}"  bindtap="previewImage"></image>
    </view>
     
    <view style='width: 11vw; height: 11vw; margin: 2vw 4vw 2vw; display: flex; align-items: center; z-index: 9;'>
      <image style='width: 11vw;' src='/images/huan.jpg' mode='widthFix' ></image>
    </view> 
  </view>

</block>


<!-- </view> -->

<!-- 占位 -->
<view style='width: 100%; height: 18vw;'><image src='{{img_arr}}'></image></view>

**

`<------------------------wxss

**

page {
  background-color: #f1f1f1;
}

.inputRoom {
  width: 100vw;
  height: 16vw;
  border-top: 1px solid #cdcdcd;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 20;
}

input {
  width: 76vw;
  height: 9.33vw;
  background-color: #fff;
  border-radius: 40rpx;
  margin-left: 2vw;
  padding: 0 3vw;
  font-size: 28rpx;
  color: #444;
}

.leftMsg {
  font-size: 35rpx;
  color: #444;
  line-height: 7vw;
  padding: 2vw 2.5vw;
  background-color: #fff;
  margin-left: -1.6vw;
  border-radius: 10rpx;
  z-index: 10;
}

.rightMsg {
  font-size: 35rpx;
  color: #444;
  line-height: 7vw;
  padding: 2vw 2.5vw;
  background-color: #96EB6A;
  margin-right: -1.6vw;
  border-radius: 10rpx;
  z-index: 10;
}
.rightP{
  width:22vw;
}

**

<----------------js

const app = getApp();
var inputVal = '';
var msgList = [];
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;

/**
 * 初始化数据
 */
function initData(that) {
  inputVal = '';
  

  msgList = [{
    speaker: 'server',
    contentType: 'text',
    content: '欢迎来到英雄联盟，敌军还有30秒到达战场，请做好准备！'
  },
  {
    speaker: 'customer',
    contentType: 'text',
    content: '我怕是走错片场了...',
    image: [],
   }
  ]
  that.setData({
    msgList,
    inputVal
  })
}

/**
 * 计算msg总高度
 */
// function calScrollHeight(that, keyHeight) {
//   var query = wx.createSelectorQuery();
//   query.select('.scrollMsg').boundingClientRect(function(rect) {
//   }).exec();
// }

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollHeight: '100vh',
    
    inputBottom: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    initData(this);
    this.setData({
      //cusHeadIcon: app.globalData.userInfo.avatarUrl,
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 获取聚焦
   */
  focus: function (e) {
    keyHeight = e.detail.height;
   
    this.setData({
   
      scrollHeight: (windowHeight - keyHeight) + 'px'
    });
    this.setData({
      toView: 'msg-' + (msgList.length - 1),
      inputBottom: keyHeight + 'px'
    })
    //计算msg高度
    // calScrollHeight(this, keyHeight);

  },

  //失去聚焦(软键盘消失)
  blur: function (e) {
    this.setData({
      scrollHeight: '100vh',
      inputBottom: 0
    })
    this.setData({
      toView: 'msg-' + (msgList.length - 1)
    })

  },

  /**
   * 发送点击监听
   */
  sendClick: function (e) {
    
        msgList.push({
        speaker: 'customer',
        contentType: 'text',
        content: e.detail.value,

      })
      inputVal = '';
      this.setData({
        msgList,
        inputVal
      });
  
      
   


  },

  /**
   * 退回上一页
   */
  toBackClick: function () {
    wx.navigateBack({})
  },

  //图片
  sendImage: function() {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有

      success: function(res) {
        msgList.push({
          speaker: 'customer',
          mode: 'scaleToFill',
          image:res.tempFilePaths,
        })
        
        
        that.setData({
          msgList,
          inputVal
        });
        
      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete
      }

    })
    
   
    
  },
  previewImage: function (e) {
    var index = e.currentTarget.dataset.index;
    wx.previewImage({
      
      //数据源
      urls:this.data.msgList[index].image
    })
   
  }


  

  
})