微信小程序实现简单聊天室

// pages/chat/chat.js// 获取小程序实例let app = getApp();Page({  /**   * 页面的初始数据   */  data: {    nickname:'',    avatar:'',    chatlists:[      {        nickname:'小林',        avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg',        content:`你好呀！`      }    ],    invalue:''  },  sendMsg:function(){    let _this = this;    let obj = {      nickname:_this.data.nickname,      avatar:_this.data.avatar,      content:_this.data.invalue    };    let arr = _this.data.chatlists;    arr.push(obj)    _this.setData({      chatlists:arr,      invalue:''    });    // 把聊天内容发送到服务器，处理完成后返回，再把返回的数据放到chatlist里面  },  getInput:function(e){    console.log(e.detail.value);    this.setData({invalue:e.detail.value});  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    console.log(app.globalData.userInfo.nickName);    this.setData({      nickname:app.globalData.userInfo.nickName,      avatar:app.globalData.userInfo.avatarUrl    });  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})

<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind"><view class="chat self" wx:if="{{nickname == chat.nickname}}"> <view class="right">  <view class="content">   {{chat.content}}  </view> </view> <view class="left">  <image class="avatar" src="{{chat.avatar}}"></image> </view></view><view class="chat" wx:else> <view class="left">  <image class="avatar" src="{{chat.avatar}}"></image> </view> <view class="right">  <view class="nickname">{{chat.nickname}}</view>  <view class="content">      {{chat.content}}  </view> </view></view></block><view class="form"> <view class="weui-cell weui-cell_input">  <input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="请输入聊天内容" /> </view> <button type="primary"  bindtap="sendMsg">发送</button></view>

/* pages/chat/chat.wxss */.avatar{  width: 130rpx;  height: 130rpx;  border-radius: 50%;}.chat{  display: flex;  align-items: center;  margin-top: 15px;}.self{  justify-content: flex-end;  margin-top: 15px;}.left{  padding: 20rpx;  align-self: flex-start;}.self .left{  padding-top: 0;}.right{  margin-left: 10px;}.right .content{  background-color: #eee;  color: #123;  font-size: 16px;  /* border:1px solid #ddd; */  padding: 10px;  line-height: 26px;  margin-right: 10px;  border-radius: 3px;  position: relative;  min-height: 20px;}.right .content::before{  content: ' ';  display: block;  width: 0;  height: 0;  border: 12px solid transparent;  border-right-color:#eee;  position: absolute;  top: 10px;  left: -23px;}.self .right .content::before{  border: 0;}.self .right .content::after{  content: ' ';  display: block;  width: 0;  height: 0;  border: 12px solid transparent;  border-left-color:#1ad409;  position: absolute;  top: 10px;  right: -23px;}.self .right .content{  background-color: #1ad409;}.form{  position: fixed;  bottom: 0;  background-color: #eee;  width: 750rpx;  display: flex;  height: 39px;  align-items: center;}.form input{  width: 600rpx;  background-color: #fff;  height: 36px;  line-height: 36px;  padding: 0  5px;}button{  width:65rpx;  height:36px;}