微信/QQ聊天功能
实现和微信QQ聊天一样的功能，用户先进来注册，然后注册用户直接登录即可。登录后可以切换账号，也可以重新注册账号。一个用户可以注册多个账号，就像QQ一样。您可以根据好友账号添加好友，然后申请成为好友。对方同意后，就可以聊天了。
页面分为消息页面、通讯录/好友列表页面、我的页面。聊天页面布局与QQ微信相同。聊天页面的布局效果和QQ微信一样。
从技术上讲，使用了 JavaScript、html 和 css。数据库存储在云数据库中，图片存储在云存储中。核心是数据库的设计和业务逻辑的排序，以及js的灵活使用。
CMS管理后台，如果需要，可以按照我的教程实现。这是一个附加的后台管理功能。如果你在网上管理数据，那就很方便了！
我会为大家踩一些坑，然后与大家分享交流。希望大家多多提意见和三连。
遇见华，编程更简单，生活更自由！
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）
应用页面索引
申请微信/QQ账号
号码、头像、昵称、账号、密码
消息页面消息
右上角加好友
头像|昵称|上一条记录|上一条记录发布时间
联系页面好友
推荐联系人：
头像|昵称|加好友
我的朋友们：
头像|昵称|
聊天页面聊天
聊天记录
底部标签
消息|联系人|朋友圈|我
一、初始化项目
需要创建的内容：
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-阿里巴巴矢量图标库
聊天页面发送消息代码
发送
/* 发布评论 */
.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:'评论'
})
}
})
}
})
}
},