위 챗 애플 릿 채 팅 방 기능 구현

본 고 는 사례 를 통 해 위 챗 애플 릿 이 채 팅 방 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.효과 구현 전시

2.room.wxml

<view class="container" style="{{containerStyle}}">
  <chatroom
    style="width: 100%; height: 100%"
    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;
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.