小程序的聊天室功能怎么实现,方法是什�
Admin 2022-06-09 群英技术资�
本文通过实例为大家分享了微信小程序实现聊天室的具体代码,供大家参考,具体内容如下
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; }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了JavaScript 定时器,在JavaScript中定时器有两� setInterval() � setTimeout() 分别还有取消定时器的方法,下面来看看文章的详细介�
computed是vue的配置选项,它的值是一个对�,其中可定义多个计算属�,每个计算属性就是一个函�,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲�,需要的朋友可以参考下
本文主要给大家分享JS的URL对象的内容,一些朋友可能对JS的URL对象及使用不是很了解,因此这篇文章就给大家来详细的介绍一下JS的URL对象,感兴趣的朋友可以了解看看�
这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西)分页实现的效� 主要� 左侧上一� 右侧是下一� 中间显示主要是超�5个显� 省略� 然后是可配置选项实现之后的效果首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的�
本文是主要给大家介绍Vue中reactive和ref的内容,接下来会分别介绍reactive和ref的用法以及两者的区别,对大家学习和理解reactive和ref的使用有一定的参考价值,感兴趣的朋友接下跟随小编一起学习一下吧�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078