微信小程序用云开发实现多人聊天2020/05/21

用微信云开发实现聊天室无需后台新手也能开发直接的聊天室，话不多说直接上效果图和代码（也可以私信我一对一教学哦）

效果图片

js

//index.js
const db = wx.cloud.database()
const chatroomCollection = db.collection("chatroom")
var util = require('../../utils/util.js');Page({data: {isShowUserName: false,userInfo:null,textInputValue:"",chats:[],openid:""},onLoad(){this.setData({openid:wx.getStorageSync("openid")})},onReady(){chatroomCollection.watch({onChange:this.onChange.bind(this),onError(err){console.log(err)}})},onChange(e){console.log(e)let that = thisif(e.type=="init"){that.setData({chats:[...that.data.chats,...[...e.docs]]})}else{const chats = [...that.data.chats]for(const docChange of e.docChanges){switch(docChange.queueType){case 'enqueue':chats.push(docChange.doc)break}}that.setData({chats:chats})}},sendMsg(){let that = thisif(!that.data.textInputValue){return}const doc = {avatar: that.data.userInfo.avatarUrl,nickName:that.data.userInfo.nickName,msgText:"text",textContent:that.data.textInputValue,sendTime: util.formatTime(new Date())}chatroomCollection.add({data:doc,})that.setData({textInputValue:"" })},getContent(e){this.data.textInputValue=e.detail.value},onGotUserInfo(e) {if (e.detail.userInfo) {var user = e.detail.userInfo;console.log(user)this.setData({userInfo: user,isShowUserName: true})} else {wx.showModal({title: '温馨提示',content: '请授权登录',})}}
})

wxml

<scroll-view scroll-into-view="{{toView}}" style="height: {{scroll_height}}px;"upper-threshold="100"  scroll-y="true" enable-back-to-top="true" class="message-list"><!-- 每一行 --><view class="row" wx:for="{{chats}}" wx:key="index" id="row_{{index}}"><!-- 日期 --><view class="datetime" wx:if="{{item.msgTime != ''}}">{{item.sendTime}}</view><!-- 头像与内容文本 --><view class="body" style="flex-flow: {{openid == item._openid ? 'row-reverse' : 'row'}}"><view class="avatar-container"><image class="avatar" src="{{item.avatar}}" /></view><!-- 画对话框 --><view class="triangle" style="{{openid == item._openid ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view><view class="content" style="{{openid == item._openid ? 'background: #7ECB4B' : ''}}"><view>{{item.textContent}}</view></view></view></view>
</scroll-view>
<view class="reply" wx:if="{{isShowUserName}}"><view class="opration-area"><input type="text" bindinput="getContent" value="{{textInputValue}}"/></view><view class="send" bindtap='sendMsg'>发送</view>
</view>
<view class="reply" wx:else><button class="buttonlongin" open-type="getUserInfo" lang="zh_CN" type="primary" bindgetuserinfo="onGotUserInfo">授权登录</button>
</view>

wxss

/** 聊天窗口样式* 54px为回复框高度，js同*//*聊天记录*/
.message-list {margin-bottom: 54px;background: rgb(235, 235, 235);
}/*单元行*/
.row {display: flex;flex-direction: column;margin: 0 30rpx;
}/*日期*/
.datetime {font-size: 10px;padding: 10px 0;color: #999;text-align: center;
}.send {font-size: 15px;padding-right: 10px;color: #999;text-align: center;
}/*主体*/
.body {display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;width: 100%;margin-top: 10px;
}/*头像容器*/
.body.avatar-container {width: 20%;
}/*头像*/
.body .avatar {width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 20rpx;
}/*文本消息*/
.body .content {font-size: 16px;background: #fff;border-radius: 5px;padding: 10px;line-height: 22px;margin-bottom: 10px;
}/* 三角箭头 */
.body .triangle {background: white;width: 20rpx;height: 20rpx;margin-top: 26rpx;transform: rotate(45deg);position: absolute;
}/*图片消息*/
.picture {width: 160px;
}/*回复框*/
.reply {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;position: fixed;bottom: 0;width: 100%;height: 54px;border-top: 1px solid rgb(215, 215, 215);background: rgb(245, 245, 245);
}.reply .voice-image {width: 25px;height: 25px;margin-left: 3%;
}/*文本输入或语音录入*/
.reply .opration-area {flex: 1;padding: 8px;
}/*回复文本框*/
.reply input {background: rgb(252, 252, 252);height: 36px;border: 1px solid rgb(221, 221, 221);border-radius: 6px;padding-left: 3px;
}/*选取图片*/
.reply .choose-image {width: 25px;height: 25px;margin-right: 3%;
}/*按住说话button*/
.voice-button {height: 36px;color: #818181;font-size: 14px;line-height: 36px;
}/*悬浮提示框*/
.hud-container {position: fixed;width: 150px;height: 150px;left: 50%;top: 50%;margin-left: -75px;margin-top: -75px;
}/*背景层*/
.hud-background {position: absolute;width: 100%;height: 100%;background: #999;opacity: .8;z-index: 11;border-radius: 10px;
}/*悬浮框主体*/
.hud-body {position: relative;width: 100%;height: 100%;z-index: 19;display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}/*图标*/
.hud-body image {margin-top: 20px;width: 80px;height: 80px;
}/*文字*/
.hud-body .tip {color: #fff;text-align: center;width: 90%;line-height: 34px;margin: 0 auto;margin-bottom: 10px;
}.hud-body .warning {background: #cc3333;border-radius: 5px;
}
.buttonlongin{width: 100%;background-color: palegreen;
}```

微信小程序用云开发实现多人聊天2020/05/21相关推荐

微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【微信小程序】云开发篇（一）——申请小程序
[微信小程序]云开发篇(一)--申请小程序 [微信小程序]云开发篇(二)--初始化云开发(微信开发者工具) [微信小程序]云开发篇(三)--代码管理 [微信小程序]云开发篇(四)--开通云开发 [微信 ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
小程序云开发服务器太慢,为什么微信小程序的云开发响应这么慢？
为什么微信小程序的云开发响应这么慢?Why is the response of WeChat applet cloud development so slow?为什么微信小程序的云开发响应这么慢? ...
微信小程序之云开发入门
一.小程序云开发程序的云开发: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器 ...
微信小程序update云开发数据库的数据时无响应
目录项目场景:在审批端来审批活动信息时候点击审批通过但是并无响应问题描述原因分析解决方案题外话项目场景:在审批端来审批活动信息时候点击审批通过但是并无响应这个小程序是集用户端和审批端为一 ...

微信小程序用云开发实现多人聊天2020/05/21

微信小程序用云开发实现多人聊天室

微信小程序用云开发实现多人聊天2020/05/21

效果图片

js

wxml

wxss

微信小程序用云开发实现多人聊天2020/05/21相关推荐

最新文章

热门文章