WeChat applet implements simple chat room

This article shares the specific code of the WeChat applet to implement a simple chat room for your reference. The specific content is as follows

cha.js

// pages/chat/chat.js
// Get the mini program instance let app = getApp();
Page({

  /**
   * Initial data of the 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:`Hello! `
      }
    ],
    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:''
    });

    // Send the chat content to the server, return after processing, and then put the returned data into chatlist},
  getInput:function(e){
    console.log(e.detail.value);
    this.setData({invalue:e.detail.value});
  },

  /**
   * Life cycle function--listen for page loading*/
  onLoad: function (options) {
    console.log(app.globalData.userInfo.nickName);
    this.setData({
      nickname:app.globalData.userInfo.nickName,
      avatar:app.globalData.userInfo.avatarUrl
    });
  },

  /**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function () {

  },

  /**
   * Life cycle function--monitor page display*/
  onShow: function () {

  },

  /**
   * Life cycle function--listen for page hiding*/
  onHide: function () {

  },

  /**
   * Life cycle function--monitor page uninstallation*/
  onUnload: function () {

  },

  /**
   * Page related event processing function - listen to user pull-down action */
  onPullDownRefresh: function () {

  },

  /**
   * The function that handles the bottoming event on the page*/
  onReachBottom: function () {

  },

  /**
   * User clicks on the upper right corner to share*/
  onShareAppMessage: function () {

  }
})

chat.wxml

<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="Please enter the chat content" />
 </view>
 <button type="primary" bindtap="sendMsg">Send</button>
</view>

chat.css

/* 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;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat applet realizes chat room function
WeChat applet implements chat room
Detailed explanation of WeChat applet development chat room—real-time chat, support for image preview
Example code for implementing the WeChat applet websocket chat room
WeChat applet chat room simple implementation

<<: MySQL 5.7.17 installation and configuration method graphic tutorial

>>: Problems with changing password and connecting to Navicat when installing and using MySQL 8.0.16 under Windows 7