微信小程序怎么實現聊天室功能

這篇文章主要介紹了微信小程序怎么實現聊天室功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

本文通過實例為大家分享了微信小程序實現聊天室的具體代碼，供大家參考，具體內容如下

1.實現效果展示

2.room.wxml

<view class="container" >
  <chatroom
    
    envId="{{chatRoomEnvId}}"
    collection="{{chatRoomCollection}}"
    groupId="{{chatRoomGroupId}}"
    groupName="{{chatRoomGroupName}}"
    userInfo="{{userInfo}}"
    onGetUserInfo="{{onGetUserInfo}}"
    getOpenID="{{getOpenID}}"
  ></chatroom>
</view>

3.room.js

const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: null,
    logged: false,
    takeSession: false,
    requestResult: '',
    // chatRoomEnvId: 'release-f8415a',
    chatRoomCollection: 'chatroom',
    chatRoomGroupId: 'demo',
    chatRoomGroupName: '聊天室',

    // functions for used in chatroom components
    onGetUserInfo: null,
    getOpenID: null,
  },

  onLoad: function() {
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })

    this.setData({
      onGetUserInfo: this.onGetUserInfo,
      getOpenID: this.getOpenID,
    })

    wx.getSystemInfo({
      success: res => {
        console.log('system info', res)
        if (res.safeArea) {
          const { top, bottom } = res.safeArea
          this.setData({
            containerStyle: `padding-top: ${(/ios/i.test(res.system) ? 10 : 20) + top}px; padding-bottom: ${20 + res.windowHeight - bottom}px`,
          })
        }
      },
    })
  },

  getOpenID: async function() {
    if (this.openid) {
      return this.openid
    }

    const { result } = await wx.cloud.callFunction({
      name: 'login',
    })

    return result.openid
  },

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onShareAppMessage() {
    return {
      title: '即時通信 Demo',
      path: '/pages/im/room/room',
    }
  },
})

4.room.json

{
  "usingComponents": {
    "chatroom": "/components/chatroom/chatroom"
  }
}

5.room.wxss

.container {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 80rpx;
  padding-bottom: 30rpx;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序怎么實現聊天室功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!