微信小程序聊天室（云开发）

绝地灬酷狼 2021-07-24 19:32 602阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]         ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]       ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2][]

在写聊天是之前我们可以先看一需要建四个云数据表，user（用户列表），qunList (群列表)，qunUserList（群用户列表），news（消息列表）接下来就是页面布局，这个布局看个人其需求我这里就讲讲大概逻辑，数据的增删改查我上篇文章已经讲过了，今天我就不详细写了

### 一.登录 ###

1.必须有个授权按钮，授权之后将用户基本信息跟opinId存入缓存，跟数据库

登录页面加载的时候判断用户是否受过权，我这里用的是缓存中的openId，判断缓存中是否有openId，有直接跳转到首页，

onLoad(options) {
        that = this
          if (wx.getStorageSync('openId')) {
            wx.reLaunch({
              url: '../group/group',
            })
          }
      },

没有就点击授权，获取用户基本信息；然后判断数据库中是否有对应用户信息，有的话把基本信息跟opinId存入缓存然后跳转首页

// 登录
      login() {
        wx.showLoading({
          title: '加载中，请稍等...',
        })
          wx.login({
            success: function(res) {
              code = res.code
              wx.getUserInfo({
                success: function(res) {
                  name = res.userInfo.nickName
                  hend = res.userInfo.avatarUrl
                  wx.setStorageSync('userInfo', res.userInfo)
                  wx.cloud.callFunction({
                    name: "openId",
                    success(res) {
                      wx.setStorageSync('openId', res.result.openid)
                      openId = res.result.openid
                      // 判断数据库中是否已经有数据
                      DB.collection('user').where({
                          _openId: openId,
                        })
                        .get({
                          success: function(res) {
                            console.log(1234321, res)
                            if (res.data.length == 0) {
                              console.log(1)
                              that.userAdd()
                            } else {
                                wx.reLaunch({
                                  url: '../group/group',
                                })
                            }
                          }
                        })
                    },
                    fail(res) {
                      console.log('登录失败', res)
                    }
                  })
                }
              })
            }
          })
      },

没有的话就将对应基本信息传到云函数

// 添加用户信息
      userAdd() {
        wx.cloud.callFunction({
          name: "login",
          data: {
            openId: openId,
            name: name,
            hend: hend,
          },
          success(res) {
              wx.hideLoading()
              wx.showToast({
                title: '授权成功！',
              })
              setTimeout(() => {
                wx.reLaunch({
                  url: '../group/group',
                })
              }, 1000)
             
          },
          fail(res) {
            console.log('登录失败', res)
          }
        })
      }

云函数将接收数据存入数据库；然后跳转首页

// 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: ''
    })
    
    const db = cloud.database()
    exports.main = async(event, context) => {
      var name = event.name
      var hend = event.hend
      var openId = event.openId
      return await db.collection('user').add({
        // data 字段表示需新增的 JSON 数据
        data: {
          name: name,
          hend: hend,
          _openId: openId
        }
      })
    
    }

授权登录差不多到这里就完了

### 二.建群  ###

写一个加群的按钮和群的展示列表

<view >
      <block wx:for="{
       {list}}" wx:key=''>
        <view class="list_bo" bindtap="list" data-_id="{
       {item.qunId}}" bindlongpress="longPress" data-index="{
       {index}}" data-_openId="{
       {item._openId}}">
          
          <image class="list_hand" src="{
       {item.establishHend}}"></image>
          <view class="establishName">{
       {item.establishName}} {
       {item.qunName}}</view>
          <view class="delbtn" wx:if="{
       {index==delId&memberTis=='删除'}}" data-_id="{
       {item.qunId}}" catchtap="deleteBtn">删除</view>
          <view class="delbtn" wx:if="{
       {index==delId&memberTis=='退出'}}" data-_id="{
       {item.qunId}}" catchtap="signOutBtn">退出</view>
        </view>
      </block>
      <view class="del">长按可删除</view>
      <view class="jia" bindtap="jia">+</view>
    </view>

1.创建一个群聊，我这里群信息只写了个群名称跟简介，群头像就用创建用户的头像

创建群的时候获取到所输入的群的信息传到云函数存入数据库，然后再将个人基本信息存入群的用户列表，数据字段看个人需求；每个聊天室需求不一样，数据也不一样

const DB = wx.cloud.database()
    var util = require('../../utils/util.js');
    var qunId
    Page({
      data: {
        qunName: '',
        qunTitle: '',
      },
     
      // 群名
      qunName(e) {
        let val = e.detail.value
        this.setData({
          qunName: val
        })
      },
      // 说明
      qunTitle(e) {
        let val = e.detail.value
        this.setData({
          qunTitle: val
        })
      },
      // 提交
      subm() {
        wx.showLoading({
          title: '加载中，请稍等...',
        })
        let qunName = this.data.qunName
        let qunTitle = this.data.qunTitle
        let _openId = wx.getStorageSync('openId')
        let userInfo = wx.getStorageSync('userInfo');
        wx.cloud.callFunction({
          name: "add_qun",
          data: {
            // 禁言状态
            prohibit: '0',
            // 创建者的 openid
            _openId: _openId,
            // 群名称
            qunName: qunName,
            // 群说明
            qunTitle: qunTitle,
            // 创建时间
            dataTime: util.nowTime(),
            establishName: userInfo.nickName,
            establishHend: userInfo.avatarUrl,
    
          },
          success(res) {
            console.log(222222222, qunTitle)
            qunId = res.result._id
    
            wx.cloud.callFunction({
              name: "qunUserList",
              data: {
                qunId: qunId,
                _openId: _openId,
                typeId: '0',
                dataTime: util.nowTime(),
                // 创建者名称
                establishName: userInfo.nickName,
                //创建者头像
                establishHend: userInfo.avatarUrl,
                // 群名称
                qunName: qunName,
                // 群说明
                qunTitle: qunTitle,
    
              },
              success(res) {
                console.log(333333333, res)
                wx.hideLoading()
                wx.showToast({
                  title: '创建成功',
                  icon: 'none',
                })
                setTimeout(() => {
                  wx.reLaunch({
                    url: '../news/news?qunId=' + qunId
                  })
                },1000)
              },
              fail(res) {
                console.log('登录失败', res)
              }
            })
    
          },
          fail(res) {
            console.log('登录失败', res)
          }
        })
      },
    
    })

存群信息

// 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: 'y1831836688'
    })
    
    const db = cloud.database()
    exports.main = async (event, context) => {
      return await db.collection('qunList').add({
        // data 字段表示需新增的 JSON 数据
        data: event
      })
    
    }

存群用户信息

// 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: ''
    })
    
    const db = cloud.database()
    exports.main = async(event, context) => {
      return await db.collection('qunUserList').add({
        data: event
      })
    
    }

群建完之后，接下来我们，获取群数据并展示到群群列表；

getList() {
        let openId = wx.getStorageSync('openId')
    
        DB.collection('qunUserList').where({
            _openId: openId
          })
          .get({
            success: function(res) {
              console.log('我所在的群', res)
              let qunList = res.data;
              that.setData({
                listLength: qunList.length,
                list: qunList
              })
             
            }
          })
      },

### 三.聊天界面 ###

1.聊天界面我就不写了；我就写一下大概逻辑：获取输入框输入的内容；存入数据库

发送消息：

// 发送消息
      sendOut(e) {
        console.log(1111, e)
        let title = e.detail.value
        if (title == '') {
          wx.showToast({
            title: '请输入聊天内容',
            icon: 'none',
          })
        } else {
          var data = {
            _qunId: qunId,
            _openId: wx.getStorageSync('openId'),
            // 消息
            text: title,
            // 消息
            img: '',
            // 时间
            dataTime: util.nowTime(),
            // 头像
            sendOutHand: wx.getStorageSync('userInfo').avatarUrl,
            // 昵称
            sendOutname: wx.getStorageSync('userInfo').nickName
          }
          console.log(data)
          wx.cloud.callFunction({
            name: "news",
            data: data,
            success(res) {
              console.log('消息发送', res)
              that.setData({
                title: ''
              })
    
            },
            fail(res) {
              console.log('登录失败', res)
            }
          })
        }
      },

发送图片：

// 发送图片
      upLoad() {
        var that = this
        // 让用户选择一张图片
        wx.chooseImage({
          success: chooseResult => {
            // 将图片上传至云存储空间
            wx.cloud.uploadFile({
              // 指定上传到的云路径
              cloudPath: util.imgName() + 'textImg.png',
              // 指定要上传的文件的小程序临时文件路径
              filePath: chooseResult.tempFilePaths[0],
              // 成功回调
              success: res => {
                console.log('上传成功', res)
                let imgUrl = res.fileID
                wx.cloud.callFunction({
                  name: "news",
                  // data: {
                  //   imgUrl: imgUrl
                  // },
                  data: {
                    _qunId: qunId,
                    _openId: wx.getStorageSync('openId'),
                    // 消息
                    text: '',
                    // 消息
                    img: imgUrl,
                    // 时间
                    dataTime: util.nowTime(),
                    // 头像
                    sendOutHand: wx.getStorageSync('userInfo').avatarUrl,
                    // 昵称
                    sendOutname: wx.getStorageSync('userInfo').nickName
                  },
                  success(res) {
                    console.log('图片发送成功', res)
                  },
                  fail(res) {
                    console.log('返回失败', res)
                  }
                })
              },
            })
          },
        })
      },

获取聊天数据；这是个动态监听数据库数据变化的；只要数据变化就会走，不用担心消息发送成功之后不会实时更新问题；左右布局，我这里是判断消息列表存入的opinId来判断的；如果列表里的opinId字段跟缓存里的opinId相同的话就显示右边，其它的都显示到左边。

// 获取成员消息
      onMsg(qunId) {
        console.log('2222222', qunId)
        const watcher = DB.collection('news')
          // 按 progress 降序
          // .orderBy('progress', 'desc')
          // 取按 orderBy 排序之后的前 10 个
          // .limit(10)
          .where({
            _qunId: qunId
          })
          .watch({
            onChange: function(snapshot) {
              console.log('snapshot', snapshot)
              var listArr = snapshot.docs;
              // console.log('---', listArr)
              listArr.forEach((item, idx) => {
                // console.log('---', item)
                // console.log(wx.getStorageSync('openId') + ':' + item._openId)
                item.type = wx.getStorageSync('openId') == item._openId ? 1 : 2;
                item.sendOutname = wx.getStorageSync('openId') == item._openId ? '我' : '';
              })
    
              that.setData({
                list: listArr
              })
              setTimeout(() => {
                that.bottom()
              }, 500)
              console.log('-----------------------s', listArr)
            },
            onError: function(err) {
              console.error('----------------error', err)
            }
          })
      },

源码链接： https://download.csdn.net/download/qq\_41241504/12351483

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200219152616458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200219152623806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2]: /images/20210724/1ac2e2d55ee1414d8e9ff509351968a1.png