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


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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
网上抓的一个特效
May 11 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
PHP7新特性简述
Jun 11 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jquery选择器需要注意的问题
2014/11/26 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
详解jquery和vue对比
2019/04/16 jQuery
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python中装饰器的一个妙用
2015/02/08 Python
深入解析Python中的上下文管理器
2016/06/28 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
通信生自我鉴定
2014/01/18 职场文书
教师教学评估方案
2014/05/09 职场文书
经营理念标语
2014/06/21 职场文书
教师节活动总结
2014/08/29 职场文书
大一新生检讨书
2014/10/29 职场文书
先进个人申报材料
2014/12/30 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL