微信 / QQ聊天的一个功能

微信 / QQ聊天的一个功能

实现跟微信QQ聊天相同的功能，用户进来首先进行注册，然后注册过的用户可以直接登录。登录完成后可以切换账号，也可以再注册账号，一个用户可以注册多个账号，和QQ一样。可以根据好友账号添加好友，然后申请成为好友，对方同意后，可以进行聊天。

页面分为消息页面、通讯录/好友列表页面，我的页面，和QQ微信的布局一样，聊天页面布局效果和QQ微信一样。

技术上采用JavaScript、html、css这些实现，数据库存储在云数据库里面，图片存储在云存储里面，核心是数据库的设计和业务逻辑的梳理，以及js的灵活运用。

CMS管理后台，大家需要的话，可以根据我的教程来实现，这个是额外的一个后台管理功能，这个管理数据的话再web端，非常的方便！

我会替大家把一些坑都踩下，然后分享交流和大家，希望大家可以多多留言和三连。

遇见华，编程更简单，人生更自由！

B站缺少的章节：4 7-1 7-2 8 12-1 12-2 14-1 17 18-1 20-1 20-2 23 24 26 27 29

数据库表

用户表（chat_users）、聊天记录表(chat_record)

申请页面 index

申请微信/QQ号

号码、头像、昵称、账号、密码

消息页面 message

右上角有添加朋友

头像|昵称|最后一条记录|最后一条记录发布时间

联系人页面 friends

推荐联系人：

头像 | 昵称| 添加好友

我的好友：

头像 | 昵称|

聊天页面 chat

聊天记录

底部Tabar

消息 | 联系人| 朋友圈 | 我

一、初始化项目

需要新建的内容：

app.js:

//云开发环境的初始化

wx.cloud.init({

env:"kaola-zr7sz"

})

project.config.json

"cloudfunctionRoot": "cloudFunctions/",

新建两张数据库表，并设置权限全为true

用户表（chat_users）、聊天记录表(chat_record)

"tabBar": {
    "color": "#616161",
    "selectedColor": "#2E312F",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/index_no.png",
        "selectedIconPath": "images/index_yes.png"
      },
      {
        "pagePath": "pages/twohand/twohand",
        "text": "二手置换",
        "iconPath": "images/yuyue_no.png",
        "selectedIconPath": "images/yuyue_yes.png"
      },
      {
        "pagePath": "pages/me/kefu/kefu",
        "text": "公司简介",
        "iconPath": "images/company_no.png",
        "selectedIconPath": "images/company_yes.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "images/me_no.png",
        "selectedIconPath": "images/me_yes.png"
      }
    ]
  },

图标下载网站：iconfont-阿里巴巴矢量图标库

聊天页面发送消息代码

<view class="pub-comment">
  <view class="pub-left">
    <input class="pub-input" placeholder="{{plcaceHolder}}" bindinput="getInputValue" value="{{inputValue}}"></input>
  </view>

  <view class="pub-button" bindtap="publishComment">发送</view>
</view>

/* 发布评论 */
.pub-comment {
  background-color: #F7F7F7;
  padding: 20rpx 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  bottom: 0;
}
.pub-left {
  background-color: #fff;
  color: #7F7F7F;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.pub-input {
  padding: 10rpx 20rpx;
  width: 500rpx;
}
.pub-button {
  color: #7F7F7F;
  border: solid 1rpx #7F7F7F;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
}

getInputValue(event){

    console.log(event.detail.value)

    this.data.inputValue = event.detail.value
    
  },
  publishComment(){
    var that = this;

    if(app.globalData.userInfo == null){
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }else {

      console.log(that.data.id)
      var that = this;
      wx.cloud.database().collection('actions').doc(that.data.id).get({
        success(res){
          console.log(res)
          var action = res.data
          var comment = {}
          comment.nickName = app.globalData.userInfo.nickName
          comment.faceImg = app.globalData.userInfo.avatarUrl
          comment.openid = app.globalData.openid
          comment.text = that.data.inputValue
          comment.time = Date.now()
          comment.toOpenid = that.data.toOpenid
          comment.toNickname = that.data.toNickname
          action.commentList.push(comment)
          wx.cloud.database().collection('actions').doc(that.data.id).update({
            data: {
              commentList: action.commentList
            },
            success(res){
              console.log(res)
              wx.showToast({
                title: '评论成功！',
              })
              that.getDetail()
              that.setData({
                inputValue :'',
                plcaceHolder:'评论'
              })
            }
          })


        }
      })

    }


  },