小程序|微信小程序云开发实现聊天（聊天室，一对一聊天）一对一聊天|云开发|微信小程序

主要使用小程序云开发的watch 监听集合中符合查询条件的数据的更新事件，支持 where, orderBy, limit，不支持 field。
一、云开发数据表设计
一个是用户表user ：用户头像（avatarUrl）、昵称(nickName)等用户基本信息，可在授权登录时获取并保存到user表中。
一个是对话表存储message：发送者（from）、接受者（to）、消息（message数组）
消息利用云开发的push 之前添加到message数组中。
信息收发使用watch 根据from to查询监听消息改变

二、页面代码
chat.js

const app = getApp() const { db, user } = app const User = db.collection('user') const Message = db.collection('message') const _ = db.command Page({/** * 页面的初始数据 */ data: { InputBottom: 0, user, to: '', // 发送给谁 toInfo: {}, //接受者信息 queueWatch: '',// 消息监听 content: '', // 发送内容 message: [], // 聊天信息 scrollLast: null, },/** * 生命周期函数--监听页面加载 */ onLoad({ to }) { this.setData({ to }) this.getToInfo() },/** * 获取接受者信息 */ getToInfo() { const { to } = this.data const that = this User.doc(to).get({ success: ({ data }) => { that.setData({ toInfo: data }) wx.setNavigationBarTitle({ title: '好友：' + data.nickName, }) } }) },/** * 生命周期函数--监听页面显示 */ onShow() { const { to, user } = this.data this.handleCreate(to, user._id) this.handleWatch(true) }, //消息自动到底部 getScollBottom() { this.setData({ scrollLast: 'lastPosition' }) }, //创建聊天 handleCreate(to, from, cb) { Message.where({ to, from }).get({ success: ({ data }) => { if (data.length == 0) { Message.add({ data: { to, from, message: [] }, success: () => { (typeof cb == 'function') && cb() } }) } else (typeof cb == 'function') && cb() } }) }, //添加信息 handleAddMessage(to, from, message, cb) { Message.where({ to, from }).update({ data: { message: _.push(message) }, success: ({ data }) => { (typeof cb == 'function') && cb() } }) }, // 信息发送 handleSend() { const { to, user, content } = this.data if (!content) return const from = user._id const message = { from, content } const that = this this.handleAddMessage(to, from, message, () => { console.log('添加成功') //接受者创建对话和添加信息 that.handleCreate(from, to, () => { that.handleAddMessage(from, to, message, () => { that.setData({ content: '' }) }) }) }) }, /** * 监听值改变 */ handleInput(e) { const { name, value } = app.dataset(e) const obj = {} obj[name] = value this.setData(obj) }, InputFocus({ detail: { height } }) { this.setData({ InputBottom: height }) }, InputBlur(e) { this.setData({ InputBottom: 0 }) },/** * 监听消息变化 */ handleWatch: async function (watch) { let { queueWatch, to, user } = this.data const that = this if (watch && !queueWatch) { // 监听 queueWatch = Message.where({ to, from: user._id }) .watch({// 发起监听 onChange: function ({ docs }) { const { message = [] } = docs[0] || {} that.setData({ message }) that.getScollBottom() }, onError: function (err) { console.error('the watch closed because of error', err) } }) this.setData({ queueWatch }) } else if (!watch && queueWatch) { // 取消监听 await queueWatch.close() this.setData({ queueWatch: '' }) } }, /** * 生命周期函数--监听页面卸载 */ onHide: function () { this.handleWatch(false) // 取消监听 }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() {},/** * 页面上拉触底事件的处理函数 */ onReachBottom() {},/** * 用户点击右上角分享 */ onShareAppMessage() {} })

chat.wxml