微信小程序 - - 聊天室

一、准备

1.准备

2.utils.js - - 获取时间的配置文件

/*
 * @Author: wenmiao
 * @Date: 2021-11-12 16:11:21
 * @Last Modified by:   wenmiao
 * @Last Modified time: 2021-11-13 11:12:21 
 */
function formatTime(date) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
   
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
   
    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  }
   
  function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }
   
  module.exports = {
    formatTime: formatTime
  }

1.index.js

var util=require("../../utils/util.js")
// 1. 初始化，获取数据库引用
const db=wx.cloud.database()
// 2. 获取定义的集合
const chatList=db.collection('chatList')
Page({
  data: {
    InputBottom: 0,
    chatList:[
      {
        photoUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',   //发送人头像
        messageData:'内容1',   //发送内容
        time:'2018年3月23日 13:24',   //发送时间
        isMe:true,   //是不是我发送的，如果是true，发送人就是我，如果是false，发送人就是对方
      },
      {
        photoUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
        messageData:'内容2',
        time:'2018年3月23日 13:24',
        isMe:false,
      }
    ],
    message:'',    //输入的长文本（聊天内容）
  },
  onLoad(){
    var that=this
    //增删改查chaList -- 之查询
    chatList.get({
      success:function(res){
        var length=res.data.length
        var message=res.data[length-1]
        console.log("sabdabsn"+message)
        that.setData({
          chatList:message
        })
      }
    })
  },
  InputFocus(e) {
    this.setData({
      InputBottom: e.detail.height
    })
  },
  InputBlur(e) {
    this.setData({
      InputBottom: 0
    })
  },
  message(e){
    this.setData({
      message:e.detail.value    //输入的信息会自动保存到message中，并回显到页面
    })
  },
  cleanInput() {     //清除输入框的内容
    var setMessage = { sendInfo: this.data.message }       
    this.setData(setMessage) 
  },
  send(){
    //获取当前chatList数组的长度
    var index = this.data.chatList.length;
    //获取输入框中的文本内容
    var inputmessage=this.data.message.trim();
    //获取发送信息当前时间
    var nowtime=util.formatTime(new Date())
    this.setData({
      //属性对象的赋值
      [`chatList[${index}].messageData`]:inputmessage,
      [`chatList[${index}].photoUrl`]:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',  //每次登录获取登录人的头像存储到storage中
      [`chatList[${index}].time`]:nowtime,
      [`chatList[${index}].isMe`]:true,
    });
    // 将本地的chatList数组存储到云端数据库集合中
    const chatListData=this.data.chatList;
    // 3.插入数据
    chatList.add({
      // data 字段表示需新增的 JSON 数据
      data: {
        ...chatListData
      },
      success: function(res) {
        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
      }
    })
  },
})

2.index.wxml

<!-- <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">聊天</view></cu-custom> -->
<!-- 使用wx:for="{{chatList}}"进行循环，chatList是在index.js的data中定义的数组-->
<view class="cu-chat" wx:for="{{chatList}}" wx:key="unique">   
  <!-- 自己发送的信息 -->
  <view class="cu-item self" wx:if="{{item.isMe}}">
    <!-- 发送的内容 -->
    <view class="main">
      <view class="content bg-green shadow">
        <text>{{item.messageData}}</text>
      </view>
    </view>
    <!-- 自己的头像 -->
    <view class="cu-avatar radius" style="background-image:url({{item.photoUrl}});"></view>
    <!-- 发送的时间 -->
    <view class="date">{{item.time}}</view>
  </view>
  <!-- 别人发送的信息 -->
  <view class="cu-item"  wx:if="{{!item.isMe}}">
    <!-- 对方的头像 -->
    <view class="cu-avatar radius" style="background-image:url({{item.photoUrl}});"></view>
    <!-- 发送的内容 -->
    <view class="main">
      <view class="content shadow">
        <text>{{item.messageData}}</text>
      </view>
    </view>
    <!-- 发送的时间 -->
    <view class="date ">{{item.time}}</view>
  </view>
</view>

<!-- 底部 -->
<form bindreset="cleanInput">
  <view class="cu-bar foot input {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px">
    <!--cuIcon-sound声音小图标-->
    <view class="action">
      <text class="cuIcon-sound text-grey"></text>   
    </view>
    
      <!-- 输入框,bindinput="message"绑定多行文本输入框到index.js的data中的message属性中 -->
      <input class="solid-bottom" placeholder="输入消息" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"
      bindinput="message">
      </input>
      <!-- cuIcon-emojifill表情小图标 -->
      <view class="action">
        <text class="cuIcon-emojifill text-grey"></text>
      </view>
      <!-- 发送按钮,bindtap="send" -->
      <button class="cu-btn bg-green shadow" bindtap="send" formType="reset">发送</button>
  </view>
</form>

3.index.wxss

page{
  padding-bottom: 100rpx;
}