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


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 相关文章推荐
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
You might like
PHP Token(令牌)设计
2008/03/15 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
潜说js对象和数组
2011/05/25 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python实现多人聊天室
2020/03/31 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python异常处理和日志处理方式
2019/12/24 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
办公室主任岗位职责
2013/11/08 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
师范生求职信
2014/06/14 职场文书
校庆标语集锦
2014/06/25 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
优秀团队申报材料
2014/12/26 职场文书
酒会邀请函
2015/01/31 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书