微信 / 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:'评论'
})
}
})
}
})
}
},