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


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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
js实现无缝轮播图特效
May 09 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
You might like
用PHP实现递归循环每一个目录
2010/08/08 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python海龟绘图实例教程
2014/07/24 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
PyTorch基本数据类型(一)
2019/05/22 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python标识符命名规范原理解析
2020/01/10 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python如何修改文件时间属性
2021/02/05 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
Python文件操作的面试题
2013/06/22 面试题
户外用品商店创业计划书
2014/01/29 职场文书
新护士岗前培训制度
2014/02/02 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
销售主管竞聘书
2014/03/31 职场文书
学习雷锋活动总结
2014/04/29 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
留守儿童工作方案
2014/06/02 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书