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

这篇文章主要介绍了微信小程序如何实现简单聊天室的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序如何实现简单聊天室文章都会有所收获，下面我们一起来看看吧。

公司主营业务：网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出定结免费做网站回馈大家。

cha.js

// 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 () {

  }
})

chat.wxml

 
  
   {{chat.content}}
  
 
 
  
 



 
  
 
 
  {{chat.nickname}}
  
      {{chat.content}}
  
 






 
  
 
 发送

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

关于“微信小程序如何实现简单聊天室”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序如何实现简单聊天室”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。