微信小程序用云开发实现多人聊天2020/05/21

最新推荐文章于 2025-02-18 22:45:00 发布

置顶

编程小西瓜

最新推荐文章于 2025-02-18 22:45:00 发布

阅读量2.5k

点赞数 5

分类专栏：小程序文章标签：小程序 javascript java

本文链接：https://blog.youkuaiyun.com/mygame668/article/details/106266678

版权

本文介绍如何使用微信小程序的云开发功能，无需后台支持，轻松创建多人聊天室。文章提供js、wxml和wxss代码示例，并展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序用云开发实现多人聊天2020/05/21

用微信云开发实现聊天室无需后台新手也能开发直接的聊天室，话不多说直接上效果图和代码（也可以私信我一对一教学哦）

效果图片

在这里插入图片描述

js

//index.js
const db = wx.cloud.database()
const chatroomCollection = db.collection("chatroom")
var util = require('../../utils/util.js');

Page({
   
  data: {
   
    isShowUserName: false,
    userInfo:null,
    textInputValue:"",
    chats:[],
    openid:""
    
  },
  onLoad(){
   
    this.setData({
   
      openid:wx.getStorageSync("openid")
    })
  },

 onReady(){
   
   chatroomCollection.watch({
   
     onChange:this.onChange.bind(this),
     onError(err){
   
       console.log(err)
     }
   })
 },

 onChange(e){
   
   console.log(e)
   let that = this
  if(e.type=="init"){
   
    that.setData({
   
      chats:[
        ...that.data.chats,
        ...[...e.docs]
      ]
    })
  }else{
   
    const chats = [...that.data.chats]
    for(const docChange of e.docChanges){
   
      switch(docChange.queueType){
   
        case 'enqueue':
        chats.push(docChange.doc