微信小程序实现聊天室功能


Posted in Javascript onJune 14, 2021

本文通过实例为大家分享了微信小程序实现聊天室的具体代码,供大家参考,具体内容如下

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python常用库推荐
2016/12/04 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python书籍信息爬虫实例
2018/03/19 Python
Python3多线程基础知识点
2019/02/19 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
解决Django中多条件查询的问题
2019/07/18 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
美国羊皮公司:Overland
2018/01/15 全球购物
西部世纪面试题
2014/12/05 面试题
《我要的是葫芦》教学反思
2014/02/23 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
企业年会主持词
2014/03/27 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
关键在于落实心得体会
2014/09/03 职场文书
布达拉宫导游词
2015/02/02 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL