微信小程序?qū)崿F(xiàn)聊天室功能
本文通過實(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 獲取頭像昵稱,不會(huì)彈框 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: '即時(shí)通信 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í)有所幫助,也希望大家多多支持腳本之家。
- 如何利用微信小程序和php實(shí)現(xiàn)即時(shí)通訊聊天功能
- python實(shí)現(xiàn)簡單的聊天小程序
- 微信小程序?qū)崿F(xiàn)聊天室
- 小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼
- 微信小程序聊天功能的示例代碼
- 微信小程序websocket實(shí)現(xiàn)即時(shí)聊天功能
- 微信小程序視頻彈幕發(fā)送功能的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
- 微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
- 微信小程序?qū)崿F(xiàn)聊天界面發(fā)送功能(示例代碼)
相關(guān)文章
在線一元二次方程計(jì)算器實(shí)例(方程計(jì)算器在線計(jì)算)
在線一元二次方程式計(jì)算器實(shí)例分享,大家參考使用吧2013-12-12JavaScript通過setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了JavaScript通過setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法,涉及javascript操作時(shí)間顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法
這篇文章主要介紹了JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法,涉及javascript中Math.Min方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JS實(shí)現(xiàn)按比例縮放圖片的方法(附C#版代碼)
這篇文章主要介紹了JS實(shí)現(xiàn)按比例縮放圖片的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)等比例縮放圖片的原理與具體實(shí)現(xiàn)技巧,并附上C#版的圖片縮放代碼做對比參考,需要的朋友可以參考下2015-12-12簡單談?wù)刼ffsetleft、offsetTop和offsetParent
這篇文章主要給大家介紹了offsetleft、offsetTop和offsetParent的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12頁面調(diào)用單個(gè)swf文件,嵌套出多個(gè)方法。
頁面調(diào)用單個(gè)swf 文件,嵌套出多個(gè)方法,需要的朋友可以參考下。2011-11-11