微信小程序?qū)崿F(xiàn)聊天室功能
更新時間：2021年06月14日 11:47:01 作者：dample小童鞋
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文通過實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)聊天室的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)效果展示
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']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 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;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文介紹了如何通過裝飾器實(shí)現(xiàn)GET請求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-10-10
JavaScript 實(shí)現(xiàn)輪播圖特效的示例
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)輪播圖特效，幫助大家更好的制作網(wǎng)頁，完成需求，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了JavaScript JMap類定義與使用方法,涉及javascript類的定義、內(nèi)部變量、函數(shù)的定義及使用相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁的過程中，你有時候需要知道某個元素在網(wǎng)頁上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識。有需要的小伙伴可以參考下。2015-05-05
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細(xì)的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時的注意事項(xiàng),需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了TypeScript的類型注解，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解javascript實(shí)現(xiàn)自定義事件
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)自定義事件的方法，自定義事件，顧名思義，就是自己定義事件類型，自己定義事件處理函數(shù)，javascript如何實(shí)現(xiàn)自定義事件,需要了解的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript制作3D旋轉(zhuǎn)相冊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
javascript自定義滾動條實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript自定義滾動條實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02