WeChatアプレットがチャットルーム機能を実現

<view class="container" style="{{containerStyle}}">
  <チャットルーム
    スタイル="幅: 100%; 高さ: 100%"
    envId="{{チャットルームEnvId}}"
    コレクション="{{チャットルームコレクション}}"
    グループID="{{チャットルームグループID}}"
    グループ名="{{チャットルームグループ名}}"
    ユーザー情報="{{ユーザー情報}}"
    onGetUserInfo="{{onGetUserInfo}}"
    getOpenID="{{getOpenID}}"
  </チャットルーム>
</ビュー>

const アプリ = getApp()

ページ（{
  データ： {
    アバター URL: './user-unlogin.png',
    ユーザー情報: null、
    ログ: false、
    セッション取得: false、
    リクエスト結果: ''、
    // チャットルームEnvId: 'release-f8415a',
    チャットルームコレクション: 'チャットルーム',
    チャットルームグループID: 'デモ',
    chatRoomGroupName: 'チャットルーム',

    // チャットルームコンポーネントで使用される関数
    onGetUserInfo: null、
    getOpenID: null、
  },

  onLoad: 関数() {
    // ユーザー情報を取得する wx.getSetting({
      成功: res => {
        res.authSetting['scope.userInfo']の場合{
          // すでに承認されているので、ポップアップウィンドウなしで直接 getUserInfo を呼び出してアバターのニックネームを取得できます wx.getUserInfo({
            成功: res => {
              this.setData({
                アバター URL: res.userInfo.avatarUrl、
                ユーザー情報: res.userInfo
              })
            }
          })
        }
      }
    })

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

    wx.getSystemInfo({
      成功: res => {
        console.log('システム情報', res)
        （res.safeArea）の場合{
          const { 上、下 } = res.safeArea
          this.setData({
            コンテナスタイル: `パディングトップ: ${(/ios/i.test(res.system) ? 10 : 20) + 上}px; パディングボトム: ${20 + res.windowHeight - 下}px`,
          })
        }
      },
    })
  },

  getOpenID: 非同期関数() {
    （this.openid）の場合{
      this.openidを返す
    }

    const { 結果 } = wx.cloud.callFunction({
      名前: 'ログイン',
    })

    結果.openidを返す
  },

  onGetUserInfo: 関数(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        ログに記録: true、
        アバター URL: e.detail.userInfo.avatarUrl、
        ユーザー情報: e.detail.userInfo
      })
    }
  },

  onShareAppMessage() {
    戻る {
      タイトル: 「インスタントメッセージングデモ」
      パス: '/pages/im/room/room',
    }
  },
})

{
  "コンポーネントの使用": {
    "チャットルーム": "/components/チャットルーム/チャットルーム"
  }
}

。容器 {
  高さ: 100%;
  位置: 絶対;
  上: 0;
  下部: 0;
  左: 0;
  右: 0;
  パディングトップ: 80rpx;
  パディング下部: 30rpx;
}