介绍小程序聊天群，发语音、文字、图片(微信群发语音、图片)

可以创建群，邀请群成员，显示群成员列表，发送图片，设置群公告，踢人，禁所有人，禁个人，发送语音消息等功能。

效果图:

实施代码:

页面结构

ltview class = 博 gt ltview class = top _ bo gt lt视图bindtap = 数字 gt群({ { user number } })</view gt； lt视图bindtap = 上传 wx:if = ；{ {禁止= = # 39；0'} } gt发送图片</view gt； lt视图bindtap = 禁令 wx:if = ；{ {禁止= = # 39；1'} } gt发送图片</view gt； lt视图bindtap = 注意 gt团体公告

page { background:# f2f2f 2；}.top_bo {显示:flex背景:白色；flex -方向:row}.top_bo视图{ flex:1；font -size:28 rpx；text-align:居中；边框:1rpx实心# cccline -高度:80rpx} scroll -view { height:82vh；/* padding -bottom:30 rpx；*/}.noList {背景:白色；margin -top:30 rpx；/*身高:230rpx*/宽度:100%；划-顶:25%；}.noMsg { text -align:center；颜色:# 999；font -size:28 rpx；}.inp {位置:绝对；底部:0；宽度:100%；背景:白色；高度:100rpx}.inp输入{背景:# d0d0d0border -半径:15rpx划-左:20rpx身高:84rpxmargin -top:10 rpx；宽度:94%；margin -left:2%；}.禁止{背景:# d0d0d0border -半径:15rpx划-左:20rpx身高:84rpxmargin -top:10 rpx；宽度:94%；margin -left:2%；text-align:居中；line -高度:84rpx颜色:rgb(34，34，34)；}.plaCC { margin -left:5 rpx；}.p_r {显示:flexflex -方向:row}.flex roe { display:flex；flex -方向:row}.正文{宽度:100%；位置:相对；/* border:1 rpx solid # CCC；*//*高度:200rpx */}。right _ body { width:100%；/*边框:1rpx纯红；*/padding:20 rpx；margin -top:50 rpx；}.left _ body { margin -top:50 rpx；}.posRit { right:20 rpx；}.text bo { width:620 rpx；text -align:right；}.lfBo { margin -left:10 rpx；}.ritTxt {背景:# 44426a填充:10 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；border -radius:15 rpx 0 15 rpx 15 rpx；margin -top:20 rpx；浮动:对；max -宽度:500rpxword -wrap:break -word；text -align:left；}.ritTxt2 {背景:白色；颜色:白色；border -radius:15 rpx 0 15 rpx 15 rpx；填充:0 rpx 20 rpx 10 rpx 20 rpx；margin -top:20 rpx；浮动:对；max -宽度:500rpxword -wrap:break -word；text -align:left；}.lftTxt {背景:# 44426a填充:10 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；border -radius:0 rpx 15 rpx 15 rpx 15 rpx；margin -top:20 rpx；浮动:左；max -宽度:500rpxword -wrap:break -word；text -align:left；}.lftTxt2 {背景:# fff填充:0 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；border -radius:0 rpx 15 rpx 15 rpx 15 rpx；margin -top:20 rpx；浮动:左；max -宽度:500rpxword -wrap:break -word；text -align:left；}.my _ audio { height:60 rpx；宽度:60rpxz-指数:2；位置:相对；top:10 rpx；左:20rpxmargin -right:30 rpx；}.data time { font -size:28 rpx；}.text img { width:200 rpx；margin -top:5 rpx；}.head { width:80 rpx；身高:80rpx}._ {身高:130rpx宽度:100%；背景:# ccc}.inppo { display:flex；flex -方向:row}.余音{ flex:1；line -高度:104rpxtext-align:居中；}.input { flex:5；}js

const DB = wx . cloud . database()var util = require( # 39；../../utils/util . js # 39；);var recorder = wx . getrecordermanager()；constinneraudicontext = wx . createinneraudiocontext()//获取回放对象var qunId，即；Page({ /** *页面的初始数据*/data: {list: []，用户号: # 39；0'，用户列表:[]，c: ；"，禁止: # 39；'}，//点击录音开始播放事件my _ audio _ Click:function(e){ var src = e . current target . dataset . src；console . log( # 39；网址 # 39；，src)；inneraudiocontext . src = src inneraudiocontext . seek(0)；inneraudiocontext . play()；}，//Home GoHome(){ wx . switch tab({ URL: # 39；../group/group # 39；}}}，//group member number(){ let userlist = JSON . stringify(this . data . userlist)wx . navigate to({ URL: # 39；../会员/会员？qunId = # 39+ qunId，}) }，bottom:function(){ var that = this；this . setdata({ scroll top:100000 })}，//动态监控禁止状态forbidden(){ console . log( # 39；8888888888888'，qunId)const watcher = db . collection( # 39；qunList # 39) .其中({ _id: qunId })。watch({ onChange:function(RES){ let arr = RES . docs[0]console . log( # 39；禁态的动态监控 # 39；，arr。_ openId+ # 39；:'+wx . getstoragesync( # 39；openId # 39))设opid = arr。_ openId if(arr . prohibit = = # 39；1'){ if (arr。_ openId = = wx . getstoragesync( # 39；openId # 39)){ that.setData({禁止: # 39；0'}) } else { that.setData({禁止: # 39；1'})} } else { const watcher = db . collection( # 39；qunUserList # 39) .其中({ qunId: qunId，_ openId:wx . getstoragesync( # 39；openId # 39) }) .watch({ onChange:function(RES){ let arrr = RES . docs[0]console . log( # 39；禁态的动态监控 # 39；，arrr。_ openId+ # 39；:'+wx . getstoragesync( # 39；openId # 39))if(arrr . prohibit = = # 39；1'){ if (arrr。_ openId = = opid){ that . setdata({ prohibit: # 39；0'}) } else { that.setData({禁止: # 39；1'}) } } else { that.setData({禁止: # 39；0'}) } }，on error:function(err){//console . error( # 39；--------------错误 # 39；，err) } }) } }，on error:function(err){//console . error( # 39；--------------错误 # 39；，err)}}}，//禁词提示prohibit tis(){ wx . show toast({ title: # 39；禁语...'，图标: # 39；无 # 39；}}}，//获取成员消息on msg(qunId){ console . log( # 39；2222222'，qunId)const watcher = db . collection( # 39；新闻 # 39；)//按进度降序//。order by( # 39；进步 # 39；, 'desc # 39；)//取前10//。极限(10)。其中({_ qunid: qunid})。watch({ onchange:function(snapshot){ console . log( # 39；快照 # 39；，snapshot)var list arr = snapshot . docs；console . log( # 39；---'，listArr) listArr.forEach((item，idx)= gt；{ console . log( # 39；---'，item)console . log(wx . getstoragesync( # 39；openId # 39) + ':'+项。_ openId)item . type = wx . getstoragesync( # 39；openId # 39)==项。_openId？1 : 2;item . send outname = wx . getstoragesync( # 39；openId # 39)==项。_openId？'我 # 39；: ''；})that . setdata({ list:list arr })setTimeout(()= gt；{ that.bottom() }，500)console . log( # 39；----------------------s # 39；，listArr) }，on error:function(err){ console . error( # 39；--------------错误 # 39；，err)}}，//发送图片上传(){var that = this //让用户选择一张图片wx . choose image({ success:choose result = >；{ //将图片上传到云存储空间wx.cloud.uploadFile({ //指定上传到的云路径:util . imgname()+ # 39；textImg.png # 39，//指定要上传文件的applet临时文件路径file path:choose result . tempfile paths[0]，//success:RES = >；{ console . log( # 39；上传成功 # 39；，RES)let imgUrl = RES . fileid wx . cloud . call function({ name: ；新闻 ，// data: { // imgUrl: imgUrl // }，data: { _qunId: qunId，_ openId:wx . getstoragesync( # 39；openId # 39)，//消息正文: # 39；'，//message img: imgur，//time dataTime: util.nowTime()，//avatar send outhand:wx . getstoragesync( # 39；userInfo # 39).avatarUrl，//昵称send outname:wx . getstoragesync( # 39；userInfo # 39).昵称}，成功(RES){ console . log( # 39；图片发送成功 # 39；，res) }，fail(RES){ console . log( # 39；退货失败 # 39；，res) } }) }，}) }，})})}，onLoad:function(options){ console . log(options)that = this qunId = options . qunId this . on msg(options . qunId)；that . user fun()that . forbidden()}，//获取群成员user fun(){ db . collection( # 39；qunUserList # 39).where({ qunId: qunId })。get({ success:function(Res){ console . log(666666666，Res)that . setdata({ user number:Res . data . length，userlist: res.data}}}}，//群公告notice(){ wx . show modal({ title: # 39；集团公告 # 39；，内容:this.data.userList[0]。qunTitle，showCancel: false，success(RES){ if(RES . confirm){//console . log( # 39；用户点击OK # 39}}}}}，//发送消息sendout (e) {console.log (1111，e)let title = e . detail . value if(title = = # 39；'){ wx . show toast({ title: # 39；请输入聊天内容 # 39；，图标: # 39；无 # 39；，}) } else { var data = { _qunId: qunId，_ openId:wx . getstoragesync( # 39；openId # 39)，//消息正文:标题，//消息img: # 39；'，//time dataTime: util.nowTime()，//avatar send outhand:wx . getstoragesync( # 39；userInfo # 39).avatarUrl，//昵称send outname:wx . getstoragesync( # 39；userInfo # 39).昵称} console . log(data)wx . cloud . call function({ name: ；新闻 ，data: data，success(RES){ console . log( # 39；发送消息 # 39；，RES)that . setdata({ title: # 39；'}) }，fail(RES){ console . log( # 39；登录失败 # 39；，res)}}}，/* *用户点击右上角分享*/onshareappmessage:function(){ }，//手指点击录音voice _ ing _ start:function(){ console . log( # 39；用手指点击录音 # 39；)wx . show toast({ title: # 39；按住录音并释放发送 # 39；，图标: # 39；无 # 39；})this . setdata({ voice _ ing _ start _ date:new date()。gettime()，//记录开始点击的时间}) constoptions = {duration: 10000，//指定记录的持续时间，单位ms sleRate: 8000，//采样率numberOfChannels: 1，//记录通道号encodibrate:24000，//编码比特率格式: # 39；mp3 # 39，//音频格式，有效值aac/mp3音频源: # 39；auto # 39，frameSize: 12，//以KB为单位指定帧大小} recorder.start(options) //开始录制this . animation = wx . create animation({ duration:1200，})//播放按钮动画this . animation . scale(0.8，0.8)；//还原that . setdata({ spreading animation:that . animation . export()})}，on ready:function(){ this . on _ recorder()；}，//记录监控事件on _ recorder:function(){ console . log( # 39；听事件 # 39；);recorder . onstart((RES)= gt；{ console . log( # 39；开始录制 # 39；);})recorder . onstop((RES)= gt；{ let { tempFilePath } = resconsole . log( # 39；停止录制，临时路径 # 39；，tempfile path)；var x =新日期()。getTime()-this . data . voice _ ing _ start _ date if(x gt；1000) {让时间戳=新日期()。getTime()；wx . cloud . uploadfile({ cloudPath: ；声音/ ；+时间戳+ # 39；. mp3 # 39，filePath: tempFilePath，success:RES = gt；{ console . log( # 39；上传成功 # 39；，RES)that . setdata({ sound URL:RES . fileid，})var data = { _ qunId: # 39；fb16 f 7905 E4 BFA 24009098 DC 34 b 910 c 8 # 39；，_ openId:wx . getstoragesync( # 39；openId # 39)，//消息正文: # 39；'，voice: res.fileID，img: # 39；'，//time dataTime: util.nowTime()，//avatar send outhand:wx . getstoragesync( # 39；userInfo # 39).avatarUrl，//昵称send outname:wx . getstoragesync( # 39；userInfo # 39).昵称} console . log(data)wx . cloud . call function({ name: ；新闻 ，data: data，success(RES){ console . log( # 39；发送语音发送 # 39；，res) }，fail(RES){ console . log( # 39；发送语音失败 # 39；，res) } }) }，})} })recorder . onframerecorded((RES)= gt；{ return console . log( # 39；on frame recorded RES . frame buffer # 39；RES . frame buffer)；string _ base64 = wx . arraybuffertobase 64(RES . frame buffer)console . log( # 39；string _ base64-- # 39；，string _ base64)}}}，//释放录音voice _ ing _ end:function(){ console . log( # 39；松开手指进行录制 # 39；)that . setdata({ voice _ icon _ click:false，animation data:{ } })this . animation = ；"；var x =新日期()。getTime()-this . data . voice _ ing _ start _ date if(x lt；1000){ console . log( # 39；停止录音，通话不到1秒！')wx . show modal({ title: # 39；提示 # 39；，内容: # 39；说话超过1秒！'，})recorder . stop()；} else {//录音停止，recorder.stop()开始上传；}}，//点击语音图片voice _ icon _ Click:function(){ this . setdata({ voice _ icon _ Click:！This.data.voice _ icon _ click})}})以上是小程序聊天群的详情，发送语音、文字、图片。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 引入小程序聊天群，发送语音、文字和图片。

本文由主机参考刊发，转载请注明：介绍小程序聊天群，发语音、文字、图片(微信群发语音、图片) https://zhujicankao.com/79109.html