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

网友投稿 409 2023-11-11

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

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

1.实现效果展示

2.room.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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

5.room.wxss

?
1
2
3
4
5
6
7
8
9
10
.container {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 80rpx;
padding-bottom: 30rpx;
}
您可能感兴趣的文章:微信小程序实现聊天室详解微信小程序开发聊天室—实时聊天，支持图片预览微信小程序websocket聊天室的实现示例代码微信小程序 聊天室简单实现微信小程序实现简单聊天室

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 示例
上一篇:微信小程序按钮巧妙用法
下一篇:微信小程序实现登录界面
相关文章

 发表评论

暂时没有评论，来抢沙发吧~