微信小程序用雲開發實現多人聊天2020/05/21

微信小程序用雲開發實現多人聊天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 = this
  if(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 = this
      if(!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;
}```