全栈开发之基于云开发实现微信聊天功能

大家好，好久没有更新博文了，最近主要是有一些学校的比赛，所以比较忙，请大家多多原谅！

本文主要讲述基于云开发实现全栈开发，并实现微信/qq以及其他交友软件的聊天功能。

我把它嵌入到了我之前写的程序里面的一个功能模块，并将之前的程序提升到了2.1.0版本！

同时也欢迎大家来从我的1.0版本看起，会更加的帮助我们沥青此程序的开发思路！

基于微信小程序云开发（校园许愿墙app）妄想替代学校的表白墙_lqj_本人的博客-CSDN博客
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线_lqj_本人的博客-CSDN博客
 

 

目录

 主要功能

效果展示

 主要的思路

部分重要源代码

---

 主要功能

1.注册：本次更新的功能主要是在底部功能栏添加一个通信功能，将其添加两个选项“登录”及“注册”，我们如果没有账号时，我们可以通过“注册”这个选项通道来先注册，当我们注册完之后呢，他会自动实现一个跳转到“登录” 的页面，然后我们可以登录了，当我们登录时，在登陆下面有一个试试刷新的你的账号、用户名、密码、继承微信的头像的显示！

2.登录：这里的账号是通过一个事件的来随机生成的number类型的一串数，所以每一个注册的用户都不相同！所以我们通过该功能可以实现一个搜索模块，通过注册时生成的唯一的账号。

3.列表生成：并有一个总的列表的页面作为，本程序的三级子页面，主要来存放“新的朋友”功能块、“消息列表”功能块、“全部推荐”的功能块、“我的好友”功能块。

4.新的朋友：当我们点击新的朋友时，会进入本程序的四级子页面，其中有两个功能块“搜索新朋友”与“申请好友列表”

4-1.搜索新朋友：

        1.我们可以通过我峨嵋你登录时，手动返回登录界面的方式来获取注册时系统帮我们生成唯一的账号！

        2.也可以通过，返回到手动返回总列表的页面在“全部推荐"中查看我们全部注册的用户！

4-2.申请好友：当我们完成上一步搜索新的朋友并点击添加时，这时页面会进行自动返回到上一个页面，同时你申请为好友的那个人，“新的朋友”这个页面的“申请好友”这个功能块中会显示，主动邀请成为好友的那个人的头像以及昵称！

5.消息列表：当我们在总列表的功能也点击进入“消息列表”时，我们与好友之间的聊天记录都会记录在里面并且将最新的一天聊天记录显示在页面指定的位置，并实现一个聊天事件的记录，在数据库中成逆序排列，可以实现一个最新时间的显示！

6.实时通信：当我们通过“消息列表”或者“总列表”里的“我的好友”功能块的“聊天”按钮进去“试试通信”页面，这里我们可以像微信或qq一样进行好友与好友之间的实时通信！

效果展示

一级页面的两个通道，目前已实现通道一的所有功能块！

 二级页面中两个按钮可以实现上述“主要功能”里面的登录功能以及注册功能的跳转！

注册功能页面，实现新用户的注册功能！

 三级页面：登录功能页面，实现老用户的登录功能！

 三级页面：当我们输入账号密码时，下方会出现自己的信息！（账号、用户名、密码、头像、继承的微信昵称）！

 

 四级页面“：总列表功能集合页面，包括了“新的朋友”、“消息列表”、"全部推荐"，“我的好友”

 

五级页面：”搜索新朋友“功能页面，通过好友唯一账号的搜索来实现实现搜索，并将其搜索的结构渲染到页面上，并进行判断都是已经为好友，或者正在盛情好友中，如果时满足前面的两个条件中的任意一个条件，添加好友的按钮就会变为文字，并不能使用按钮再次添加该好友！

五级页面：通过”我的好友“功能页面进入也可以，通过”消息列表“进入也可以！

实现一个与好友实时聊天的功能！

 主要的思路

进入最初页面：

1.我们需要在此程序原有的2.0版本的基础上，在添加两个数据库：

一个为：record主要存储添加好友以及聊天功能的数据记录

另一个为：users主要存储用户的注册以及登录的数据记录

2.登录时，会传该用户的数据进入users数据库中，先进一个该用户数据的存储！

3.你的信息的显示，根据2.的登录时传进数据库中的数据，来进行页面的实时渲染

然后进入总列表页面：

4.全部推荐，也是通过2.的登录时传入数据库中的数据，来进行”选择性的渲染“用户数据！

5-1.新的朋友，点击时还会进入它的下一级页面，我们可以通过搜索登录时存入数据库中的num

 这个生成的唯一的数值，来进行一个好友搜索！

5-2.判断是否为好友，我们通过一个record里面的一个参数来判断，当这个参数之为0时，就是你与你要申请的好友处于一个未添加或者正在申请中的状态，如果当这个参数为1时，就是你与医药申请的好友处于一个已经添加完成的状态，此时判断结果过打印出来，并渲染到页面上，体现”正在申请中“或”已是好友“！

5-3.申请好友列表，我们通过两个不同的用户来进行设计两个不同的名称但是类型一致的参数：

这里的userA与userB是在申请好友阶段的相同类型的参数，userA代表主动发起申请的用户，userB代表被动接收申请的用户！

我们同时，也是在进行的一个判断

如果数值为是1，说明已经是好友，不被渲染到被动受申请者的”申请好友列表“中，反之则会被渲染到页面中！

6.消息页面，当点击进入消息页面时，我们会看到我们所有的与好友的通信的聊天记录以及最新的聊天记录的时间，（因为这里的时间成逆序排列，所以会实现一个最新的时间）！

7.聊天页面，当我们点击进入聊天页面时，我们发送信息会存储在record这个参数下面，并用一个定时器来进行间隔每1秒的刷新，做到真正的同步实时刷新你与好友的聊天内容！

部分重要源代码

注册时自动生成账号：

    var that = this;
    wx.cloud.database().collection('chat_users').add({
      data:{
        num:Date.now(),//自动生长账号
        faceImg:that.data.userInfo.avatarUrl,
        nickName:that.data.userInfo.nickName,
        admin:that.data.zh,
        Password:that.data.pas1
      },
      success(res){
        wx.cloud.database().collection('chat_users').doc(res._id).get({
          success:function(res){
            console.log(res)
            app.globalData.userInfo = res.data
          }
        })
        console.log(res)
        wx.navigateTo({
          url: '../denglu/denglu',
          success(){
            wx.showToast({
              title: '注册成功',
            })
          }
        })
        // app.globalData.userInfo = res.data
        
      }
    })

添加好友：

  addFriend(e){
    // console.log(e.currentTarget.dataset.index)
    // console.log('打印申请好友用户',app.globalData.userInfo[0].admin)
    var index = e.currentTarget.dataset.index
    var that = this;
    console.log('打印被申请好友的用户',that.data.userList[index].admin)
    wx.cloud.database().collection('chat_record').add({
      data:{
        //因为这里是申请好友的用户，所以同一时间只能有一个用户账号作为一个用户账户去申请，所以我们这里只要获取到下标为0的数组数据就可以了
        userA_admin: app.globalData.userInfo.admin,
        userA_id: app.globalData.userInfo._id,
        userA_faceImg: app.globalData.userInfo.faceImg,
        userA_nickName: app.globalData.userInfo.nickName,
 
        userB_admin: that.data.userList[index].admin,
        userB_id: that.data.userList[index]._id,
        userB_faceImg: that.data.userList[index].faceImg,
        userB_nickName: that.data.userList[index].nickName,
 
        record:[],//聊天记录[]
        friend_status:0,//0:申请中，1：已经是好友
        time:util.formatTime(new Date())
      },
      success(res){
        console.log(res)
        wx.navigateBack({
          delta:0,
          success(){
            wx.showToast({
              title: '已发送添加申请',
            })
          }
        })
      }
    })
  },

发送聊天信息：

publishChat(){
    var that = this;
      // console.log(that.data.recordId)
      var that = this;
      wx.cloud.database().collection('chat_record').doc(that.data.recordId).get({
        success(res){
          console.log('对话',res)
          var record = res.data.record
 
          var msg = {}
          msg.userId = app.globalData.userInfo._id
          msg.nickName = app.globalData.userInfo.nickName
          msg.admin = app.globalData.userInfo.admin
          msg.faceImg = app.globalData.userInfo.faceImg
          msg.openid = app.globalData._id
          msg.text = that.data.inputValue
          msg.time = util.formatTime(new Date())
          // msg.toOpenid = that.data.toOpenid
          // msg.toNickname = that.data.toNickname
 
          record.push(msg)
          wx.cloud.database().collection('chat_record').doc(that.data.recordId).update({
            data: {
              record: record
            },
            success(res){
              console.log(res)
              wx.showToast({
                title: '发送成功！',
              })
              //刷新页面
              that.getChatRecord()
 
              that.setData({
                inputValue :'',
                plcaceHolder:'信息'
              })
            }
          })
 
 
        }
      })
 
    
 
 
  },

时间戳：

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
 
  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
 
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}
 
module.exports = {
  formatTime: formatTime,
  }

消息列表：

  getMyFriend(){
    var that = this;
     const _ = wx.cloud.database().command
      wx.cloud.database().collection('chat_record').where(
        _.or([
          {
          userA_id:app.globalData.userInfo._id,
          friend_status:1
        },{
          userB_id:app.globalData.userInfo._id,
          friend_status:1
        }
      ])
      )
      .orderBy('time','desc')
      .get({
        success(res){
          console.log(res)
          that.setData({
            myMsgList:res.data
          })
        }
      })
  }, 

根据用户的不同跳转：

  toChat(e){
    console.log(e.currentTarget.dataset.id)
    wx.navigateTo({
      url: '../chat/chat?id='+e.currentTarget.dataset.id,
    })
  },

 

 

想要源码的同学，可以私我（部分内容有偿）！