You can create a group, invite group members, display the group member list, send pictures, set group announcements, kick people, ban all, ban individuals, send voice messages and other functions.

Rendering:

<view class="bo">
??<view class="top_bo">
????<view bindtap="number">群成員({{userNumber}})</view>
????<view bindtap="upLoad" wx:if="{{prohibit==&#39;0&#39;}}">發(fā)圖片</view>
????<view bindtap="prohibitTis" wx:if="{{prohibit==&#39;1&#39;}}">發(fā)圖片</view>
????<view bindtap="notice">群公告</view>
????<view bindtap="goHome">去首頁</view>
??</view>
??<scroll-view scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">
????<block wx:if=&#39;{{!list}}&#39;>
??????<view class="noList">
????????<view class="noMsg">暫無聊天數據</view>
??????</view>
????</block>
????<block wx:else>
??????<view class="body" wx:for=&#39;{{list}}&#39; wx:key=&#39;index&#39;>

????????<view wx:if=&#39;{{item.type==1}}&#39; class="right_body">
??????????<view class="flexRoe posRit">
????????????<view class="textBo">
??????????????<view class="dataTime">{{item.sendOutname}}?{{item.dataTime}}</view>
??????????????<view wx:if="{{item.text!=&#39;&#39;}}" class="ritTxt">{{item.text}}</view>
??????????????<image wx:if="{{item.img!=&#39;&#39;}}" mode=&#39;widthFix&#39; src="{{item.img}}" class="textImg"></image>
??????????????<view wx:if="{{item.voice}}" class="ritTxt2" bindtap=&#39;my_audio_click&#39; src=&#39;{{item.voice}}&#39;>
????????????????<image class=&#39;my_audio&#39; src=&#39;/img/play.png&#39;></image>
??????????????</view>
????????????</view>
????????????<image class="head" style=" margin-left:20rpx " src="{{item.sendOutHand}}"></image>
??????????</view>
????????</view>
????????<view wx:if=&#39;{{item.type==2}}&#39; class="p_r left_body">
??????????<view class="flexRoe ">
????????????<image class="head" style=" margin-left:20rpx " src="{{item.sendOutHand}}"></image>
????????????<view class="lfBo">
??????????????<view class="dataTime">{{item.sendOutname}}?{{item.dataTime}}</view>
??????????????<view wx:if="{{item.text!=&#39;&#39;}}" class="lftTxt">{{item.text}}</view>
??????????????<image wx:if="{{item.img!=&#39;&#39;}}" mode=&#39;widthFix&#39; src="{{item.img}}" class="textImg"></image>
??????????????<view wx:if="{{item.voice}}" class="lftTxt2" bindtap=&#39;my_audio_click&#39; src=&#39;{{item.voice}}&#39;>
????????????????<image class=&#39;my_audio&#39; src=&#39;/img/play.png&#39;></image>
??????????????</view>
????????????</view>
??????????</view>
????????</view>
??????</view>
????</block>

??</scroll-view>

??<view class="inp">
????<view>
??????<view class="p_r" wx:if="{{prohibit==&#39;0&#39;}}">
????????<input class="input" placeholder-class=&#39;plaCC&#39; confirm-type="send" bindconfirm=&#39;sendOut&#39; placeholder=&#39;聊天，在這里&#39; value="{{title}}"></input>
????????<view class="yuyin" catchtouchstart=&#39;voice_ing_start&#39; catchtouchend="voice_ing_end">語音</view>
??????</view>
??????<view wx:if="{{prohibit==&#39;1&#39;}}" bindtap="prohibitTis" class="prohibit">禁言中</view>
????</view>
??</view>
</view>

page?{
??background:?#f2f2f2;
}

.top_bo?{
??display:?flex;
??background:?white;
??flex-direction:?row;
}

.top_bo?view?{
??flex:?1;
??font-size:?28rpx;
??text-align:?center;
??border:?1rpx?solid?#ccc;
??line-height:?80rpx;
}

scroll-view?{
??height:?82vh;
??/*?padding-bottom:?30rpx;?*/
}

.noList?{
??background:?white;
??margin-top:?30rpx;
??/*?height:?230rpx;?*/
??width:?100%;
??padding-top:?25%;
}

.noMsg?{
??text-align:?center;
??color:?#999;
??font-size:?28rpx;
}

.inp?{
??position:?absolute;
??bottom:?0;
??width:?100%;
??background:?white;
??height:?100rpx;
}

.inp?input?{
??background:?#d0d0d0;
??border-radius:?15rpx;
??padding-left:?20rpx;
??height:?84rpx;
??margin-top:?10rpx;
??width:?94%;
??margin-left:?2%;
}

.prohibit?{
??background:?#d0d0d0;
??border-radius:?15rpx;
??padding-left:?20rpx;
??height:?84rpx;
??margin-top:?10rpx;
??width:?94%;
??margin-left:?2%;
??text-align:?center;
??line-height:?84rpx;
??color:?rgb(34,?34,?34);
}

.plaCC?{
??margin-left:?5rpx;
}

.p_r?{
??display:?flex;
??flex-direction:?row;
}

.flexRoe?{
??display:?flex;
??flex-direction:?row;
}

.body?{
??width:?100%;
??position:?relative;
??/*?border:?1rpx?solid?#ccc;?*//*?height:?200rpx?*/
}

.right_body?{
??width:?100%;
??/*?border:?1rpx?solid?red;?*/
??padding:?20rpx;
??margin-top:?50rpx;
}

.left_body?{
??margin-top:?50rpx;
}

.posRit?{
??right:?20rpx;
}

.textBo?{
??width:?620rpx;
??text-align:?right;
}

.lfBo?{
??margin-left:?10rpx;
}

.ritTxt?{
??background:?#44426a;
??padding:?10rpx?20rpx?10rpx?20rpx;
??color:?white;
??border-radius:?15rpx?0?15rpx?15rpx;
??margin-top:?20rpx;
??float:?right;
??max-width:?500rpx;
??word-wrap:?break-word;
??text-align:?left;
}

.ritTxt2?{
??background:?white;
??color:?white;
??border-radius:?15rpx?0?15rpx?15rpx;
??padding:?0rpx?20rpx?10rpx?20rpx;
??margin-top:?20rpx;
??float:?right;
??max-width:?500rpx;
??word-wrap:?break-word;
??text-align:?left;
}

.lftTxt?{
??background:?#44426a;
??padding:?10rpx?20rpx?10rpx?20rpx;
??color:?white;
??border-radius:?0rpx?15rpx?15rpx?15rpx;
??margin-top:?20rpx;
??float:?left;
??max-width:?500rpx;
??word-wrap:?break-word;
??text-align:?left;
}
.lftTxt2?{
??background:?#fff;
??padding:?0rpx?20rpx?10rpx?20rpx;
??color:?white;
??border-radius:?0rpx?15rpx?15rpx?15rpx;
??margin-top:?20rpx;
??float:?left;
??max-width:?500rpx;
??word-wrap:?break-word;
??text-align:?left;
}
.my_audio?{
??height:?60rpx;
??width:?60rpx;
??z-index:?2;
??position:?relative;
??top:?10rpx;
??left:?20rpx;
??margin-right:?30rpx;
}


.dataTime?{
??font-size:?28rpx;
}

.textImg?{
??width:?200rpx;
??margin-top:?5rpx;
}

.head?{
??width:?80rpx;
??height:?80rpx;
}

._?{
??height:?130rpx;
??width:?100%;
??background:?#ccc;
}

.inpBo?{
??display:?flex;
??flex-direction:?row;
}

.yuyin?{
??flex:?1;
??line-height:?104rpx;
??text-align:?center;
}

.input?{
??flex:?5;
}

const?DB?=?wx.cloud.database()
var?util?=?require('../../utils/util.js');
var?recorder?=?wx.getRecorderManager();
const?innerAudioContext?=?wx.createInnerAudioContext()?//獲取播放對象
var?qunId,?that;
Page({

??/**
???*?頁面的初始數據
???*/
??data:?{
????list:?[],
????userNumber:?'0',
????userList:?[],
????c:?"",
????prohibit:?'',
??},

??//?點擊錄音開始播放事件
??my_audio_click:?function?(e)?{
????var?src?=?e.currentTarget.dataset.src;
??????console.log('url地址',?src);
??????innerAudioContext.src?=?src
??????innerAudioContext.seek(0);
??????innerAudioContext.play();
??},
??//?首頁
??goHome()?{
????wx.switchTab({
??????url:?'../group/group'
????})

??},
??
??//?群成員
??number()?{
????let?userList?=?JSON.stringify(this.data.userList)
????wx.navigateTo({
??????url:?'../member/member?qunId='?+?qunId,
????})
??},
??bottom:?function()?{
????var?that?=?this;
????this.setData({
??????scrollTop:?100000
????})
??},
??//?動態(tài)監(jiān)聽禁言狀態(tài)
??prohibit()?{
????console.log('8888888888888',?qunId)
????const?watcher?=?DB.collection('qunList')
??????.where({
????????_id:?qunId
??????})
??????.watch({
????????onChange:?function(res)?{

??????????let?arr?=?res.docs[0]
??????????console.log('動態(tài)監(jiān)聽禁言狀態(tài)',?arr._openId?+?':'?+?wx.getStorageSync('openId'))
??????????let?opid?=?arr._openId
??????????if?(arr.prohibit?==?'1')?{
????????????if?(arr._openId?==?wx.getStorageSync('openId'))?{
??????????????that.setData({
????????????????prohibit:?'0'
??????????????})
????????????}?else?{
??????????????that.setData({
????????????????prohibit:?'1'
??????????????})
????????????}
??????????}?else?{
????????????const?watcher?=?DB.collection('qunUserList')
??????????????.where({
????????????????qunId:?qunId,
????????????????_openId:?wx.getStorageSync('openId')
??????????????})
??????????????.watch({
????????????????onChange:?function(res)?{

??????????????????let?arrr?=?res.docs[0]
??????????????????console.log('動態(tài)監(jiān)聽禁言狀態(tài)',?arrr._openId?+?':'?+?wx.getStorageSync('openId'))
??????????????????if?(arrr.prohibit?==?'1')?{
????????????????????if?(arrr._openId?==?opid)?{
??????????????????????that.setData({
????????????????????????prohibit:?'0'
??????????????????????})
????????????????????}?else?{
??????????????????????that.setData({
????????????????????????prohibit:?'1'
??????????????????????})
????????????????????}
??????????????????}?else?{
????????????????????that.setData({
??????????????????????prohibit:?'0'
????????????????????})
??????????????????}


????????????????},
????????????????onError:?function(err)?{
??????????????????//?console.error('----------------error',?err)
????????????????}
??????????????})
??????????}


????????},
????????onError:?function(err)?{
??????????//?console.error('----------------error',?err)
????????}
??????})
??},

??//?禁言提示
??prohibitTis()?{
????wx.showToast({
??????title:?'禁言中......',
??????icon:?'none'
????})
??},
??//?獲取成員消息
??onMsg(qunId)?{
????console.log('2222222',?qunId)
????const?watcher?=?DB.collection('news')
??????//?按?progress?降序
??????//?.orderBy('progress',?'desc')
??????//?取按?orderBy?排序之后的前?10?個
??????//?.limit(10)
??????.where({
????????_qunId:?qunId
??????})
??????.watch({
????????onChange:?function(snapshot)?{
??????????console.log('snapshot',?snapshot)
??????????var?listArr?=?snapshot.docs;
??????????console.log('---',?listArr)
??????????listArr.forEach((item,?idx)?=>?{
????????????console.log('---',?item)
????????????console.log(wx.getStorageSync('openId')?+?':'?+?item._openId)
????????????item.type?=?wx.getStorageSync('openId')?==?item._openId???1?:?2;
????????????item.sendOutname?=?wx.getStorageSync('openId')?==?item._openId???'我'?:?'';
??????????})

??????????that.setData({
????????????list:?listArr
??????????})
??????????setTimeout(()?=>?{
????????????that.bottom()
??????????},?500)
??????????console.log('-----------------------s',?listArr)
????????},
????????onError:?function(err)?{
??????????console.error('----------------error',?err)
????????}
??????})
??},
??//?發(fā)送圖片
??upLoad()?{
????var?that?=?this
????//?讓用戶選擇一張圖片
????wx.chooseImage({
??????success:?chooseResult?=>?{
????????//?將圖片上傳至云存儲空間
????????wx.cloud.uploadFile({
??????????//?指定上傳到的云路徑
??????????cloudPath:?util.imgName()?+?'textImg.png',
??????????//?指定要上傳的文件的小程序臨時文件路徑
??????????filePath:?chooseResult.tempFilePaths[0],
??????????//?成功回調
??????????success:?res?=>?{
????????????console.log('上傳成功',?res)
????????????let?imgUrl?=?res.fileID
????????????wx.cloud.callFunction({
??????????????name:?"news",
??????????????//?data:?{
??????????????//???imgUrl:?imgUrl
??????????????//?},
??????????????data:?{
????????????????_qunId:?qunId,
????????????????_openId:?wx.getStorageSync('openId'),
????????????????//?消息
????????????????text:?'',
????????????????//?消息
????????????????img:?imgUrl,
????????????????//?時間
????????????????dataTime:?util.nowTime(),
????????????????//?頭像
????????????????sendOutHand:?wx.getStorageSync('userInfo').avatarUrl,
????????????????//?昵稱
????????????????sendOutname:?wx.getStorageSync('userInfo').nickName
??????????????},
??????????????success(res)?{
????????????????console.log('圖片發(fā)送成功',?res)
??????????????},
??????????????fail(res)?{
????????????????console.log('返回失敗',?res)
??????????????}
????????????})
??????????},
????????})
??????},
????})
??},
??onLoad:?function(options)?{
????console.log(options)
????that?=?this
????qunId?=?options.qunId
????this.onMsg(options.qunId);
????that.userFun()
????that.prohibit()

??},
??//?獲取群成員
??userFun()?{
????DB.collection('qunUserList').where({
????????qunId:?qunId
??????})
??????.get({
????????success:?function(res)?{
??????????console.log(666666666,?res)
??????????that.setData({
????????????userNumber:?res.data.length,
????????????userList:?res.data
??????????})

????????}
??????})
??},

??//?群公告
??notice()?{
????wx.showModal({
??????title:?'群公告',
??????content:?this.data.userList[0].qunTitle,
??????showCancel:?false,
??????success(res)?{
????????if?(res.confirm)?{
??????????//?console.log('用戶點擊確定')
????????}
??????}
????})
??},
??//?發(fā)送消息
??sendOut(e)?{
????console.log(1111,?e)
????let?title?=?e.detail.value
????if?(title?==?'')?{
??????wx.showToast({
????????title:?'請輸入聊天內容',
????????icon:?'none',
??????})
????}?else?{
??????var?data?=?{
????????_qunId:?qunId,
????????_openId:?wx.getStorageSync('openId'),
????????//?消息
????????text:?title,
????????//?消息
????????img:?'',
????????//?時間
????????dataTime:?util.nowTime(),
????????//?頭像
????????sendOutHand:?wx.getStorageSync('userInfo').avatarUrl,
????????//?昵稱
????????sendOutname:?wx.getStorageSync('userInfo').nickName
??????}
??????console.log(data)
??????wx.cloud.callFunction({
????????name:?"news",
????????data:?data,
????????success(res)?{
??????????console.log('消息發(fā)送',?res)
??????????that.setData({
????????????title:?''
??????????})

????????},
????????fail(res)?{
??????????console.log('登錄失敗',?res)
????????}
??????})
????}
??},

??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage:?function()?{

??},

??//?手指點擊錄音
??voice_ing_start:?function?()?{
????console.log('手指點擊錄音')
????wx.showToast({
??????title:?'按住錄音，松開發(fā)送',
??????icon:?'none'
????})
????this.setData({
??????voice_ing_start_date:?new?Date().getTime(),?//記錄開始點擊的時間
????})
????const?options?=?{
??????duration:?10000,?//指定錄音的時長，單位?ms
??????sampleRate:?8000,?//采樣率
??????numberOfChannels:?1,?//錄音通道數
??????encodeBitRate:?24000,?//編碼碼率
??????format:?'mp3',?//音頻格式，有效值?aac/mp3
??????audioSource:?'auto',
??????frameSize:?12,?//指定幀大小，單位?KB
????}
????recorder.start(options)?//開始錄音

????this.animation?=?wx.createAnimation({
??????duration:?1200,
????})?//播放按鈕動畫
????that.animation.scale(0.8,?0.8);?//還原
????that.setData({

??????spreakingAnimation:?that.animation.export()
????})
??},
??onReady:?function?()?{
????this.on_recorder();
??},

??//?錄音監(jiān)聽事件
??on_recorder:?function?()?{
????console.log('錄音監(jiān)聽事件');
????recorder.onStart((res)?=>?{
??????console.log('開始錄音');
????})
????recorder.onStop((res)?=>?{
??????let?{
????????tempFilePath
??????}?=?res;
??????console.log('停止錄音,臨時路徑',?tempFilePath);
??????var?x?=?new?Date().getTime()?-?this.data.voice_ing_start_date
??????if?(x?>?1000)?{
????????let?timestamp?=?new?Date().getTime();
????????wx.cloud.uploadFile({
??????????cloudPath:?"sounds/"?+?timestamp?+?'.mp3',
??????????filePath:?tempFilePath,
??????????success:?res?=>?{
????????????console.log('上傳成功',?res)
????????????that.setData({
??????????????soundUrl:?res.fileID,
????????????})

????????????var?data?=?{
??????????????_qunId:?'fb16f7905e4bfa24009098dc34b910c8',
??????????????_openId:?wx.getStorageSync('openId'),
??????????????//?消息
??????????????text:?'',
??????????????voice:?res.fileID,
??????????????img:?'',
??????????????//?時間
??????????????dataTime:?util.nowTime(),
??????????????//?頭像
??????????????sendOutHand:?wx.getStorageSync('userInfo').avatarUrl,
??????????????//?昵稱
??????????????sendOutname:?wx.getStorageSync('userInfo').nickName
????????????}
????????????console.log(data)
????????????wx.cloud.callFunction({
??????????????name:?"news",
??????????????data:?data,
??????????????success(res)?{
????????????????console.log('發(fā)送語音發(fā)送',?res)
??????????????},
??????????????fail(res)?{
????????????????console.log('發(fā)送語音失敗',?res)
??????????????}
????????????})
??????????},
????????})
??????}
????})
????recorder.onFrameRecorded((res)?=>?{
??????return
??????console.log('onFrameRecorded??res.frameBuffer',?res.frameBuffer);
??????string_base64?=?wx.arrayBufferToBase64(res.frameBuffer)

??????console.log('string_base64--',?string_base64)
????})
??},
??//?手指松開錄音
??voice_ing_end:?function?()?{
????console.log('手指松開錄音')

????that.setData({
??????voice_icon_click:?false,
??????animationData:?{}
????})
????this.animation?=?"";
????var?x?=?new?Date().getTime()?-?this.data.voice_ing_start_date
????if?(x?<?1000)?{
??????console.log('錄音停止，說話小于1秒！')
??????wx.showModal({
????????title:?'提示',
????????content:?'說話要大于1秒！',
??????})
??????recorder.stop();
????}?else?{
??????//?錄音停止，開始上傳
??????recorder.stop();
????}
??},
??//?點擊語音圖片
??voice_icon_click:?function?()?{
????this.setData({
??????voice_icon_click:?!this.data.voice_icon_click
????})
??},
})

Related free learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of Introducing the mini program chat group to send voice, text and pictures. For more information, please follow other related articles on the PHP Chinese website!