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

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

渲染:

实施代码:

wxml

& lt视图& gt& lt视图& gt& lt视图& gt群成员（{ { {用户编号} }）& lt }）《/view & gt；& lt视图& gt发送图片

page { background:# f2f2f 2；}.top _ bo { display:flex；背景:白色；flex -方向:排；}.top_bo视图{ flex:1；font -大小:28rpxtext-align:居中；边框:1rpx实心# cccline -高度:80rpx} scroll -view { height:82vh；/* padding -bottom:30 rpx；*/}.noList {背景:白色；margin -top:30 rpx；/*高度:230rpx*/宽度:100%；划水-top:25%；}.noMsg { text -align:center；颜色:# 999；font -大小:28rpx}.inp {位置:绝对；底部:0；宽度:100%；背景:白色；高度:100rpx}.inp输入{ background:# d0d0d 0；边界-半径:15rpxpadding -left:20 rpx；高度:84rpxmargin -top:10 rpx；宽度:94%；margin -left:2%；}.禁止{ background:# d0d0d 0；边界-半径:15rpxpadding -left:20 rpx；高度:84rpxmargin -top:10 rpx；宽度:94%；margin -left:2%；text-align:居中；line -高度:84rpx颜色:RGB（34，34，34）；}.plaCC { margin -left:5r px；}.p_r { display: flexflex -方向:排；}.flex roe { display:flex；flex -方向:排；}.正文{宽度:100%；位置:相对；/*边框:1rpx 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；}.ritxt { background:# 44426 a；填充:10 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；边框-半径:15rpx 0 15rpx 15rpxmargin -top:20 rpx；浮动:对；max -宽度:500rpxword -wrap:break -word；text -align:left；}。ritt XT 2 {背景:白色；颜色:白色；边框-半径:15rpx 0 15rpx 15rpx填充:0 rpx 20 rpx 10 rpx 20 rpx；margin -top:20 rpx；浮动:对；max -宽度:500rpxword -wrap:break -word；text -align:left；}.lft txt { background:# 44426 a；填充:10 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；边框-半径:0 rpx 15 rpx 15 rpx 15 rpx；margin -top:20 rpx；浮动:左；max -宽度:500rpxword -wrap:break -word；text -align:left；}。lfttxt 2 { background:# fff；填充:0 rpx 20 rpx 10 rpx 20 rpx；颜色:白色；边框-半径: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；位置:相对；顶部:10rpx左:20rpxmargin -right:30 rpx；}.data time { font -size:28 rpx；}.text img { width:200 rpx；margin -top:5 rpx；}.头部{宽度:80rpx高度:80rpx}._ {身高:130rpx宽度:100%；背景:# ccc}.inbo { display:flex；flex -方向:排；}.余音{ flex:1；line -高度:104rpxtext-align:居中；}.input { flex:5；}js

const DB = wx . cloud . database（）var util = require（‘../../utils/util . js’）；var recorder = wx . getrecordermanager（）；const inner audio context = wx . createinneraudio context（）//获取播放对象var qunId，thatPage（第{/* * *页*/data页的初始数据:{列表:【】，用户编号:“0”，用户列表:【】，c:“& quot；，禁止:‘‘，}，//单击录音开始播放事件my _ audio _ Click:function（e）{ var src = e . current target . dataset . src；console . log（‘URL地址’，src）；inner audio context . src = src inner audio context . seek（0）；inner audio context . play（）；}，//主页gohome（）{ wx . switch tab（{ URL:‘.../group/group‘}）}，//组成员号（）{ let userlist = JSON . stringify（this . data . userlist）wx . navigate to（{ URL:‘../会员/会员？qunId =‘+qunId，}）}，bottom:function（）{ var that = this；这个。setdata（{ scroll top:100000 }）}，//动态监视禁止状态{ console . log（‘888888888‘，qunId）const watcher = db . collection（‘qunList‘）。where（{ _ id:qu NID }）。watch（{ onChange:function（RES）{ let arr = RES . docs【0】console . log（‘动态监视静默状态‘，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（‘动态监视静默状态’，arrr。_ openId+‘:‘+wx . getstoragesync（‘openId‘）if（arrr . prohibit = =‘1‘）{ if（arrr。_ openId = = opid）{ that . setdata（{禁止:“0“}）} else { that . setdata（{禁止:“1“}）} } else { that . setdata（{禁止:“0“}）} }，onError: function（err）{//console . error（‘-----------err‘，err）}）} }，on error:function，icon:‘none‘}）}，//按进度降序获取msg（Qunid）{ console . log（‘222222，Qunid）const watcher = db . collection（‘news‘）//上的成员消息。order by（‘progress’，desc）//取前10名。限制（10）。其中（{_ qunid: qunid}）按orderBy排序。。watch（{ onChange:function（snapshot）{ console . log（‘snapshot‘，snapshot）var listArr = snapshot . docs；console . log（‘---‘，list arr）list arr . foreach（（item，idx）= & gt；{ console . log（‘---‘，item）console . log（wx . getstoragesync（‘openId‘）+‘:‘+item。_ openId）item . type = wx . getstoragesync（‘openId‘）= = item。_openId？1 : 2;item . send outname = wx . getstoragesync（‘openId‘）= = item。_openId？我“:”；}）that . setdata（{ list:listArr }）setTimeout（（）= & gt；{ that . bottom（）}，500）console . log（‘-----------------s‘，listArr）}，on error:function（err）{ console . error（‘---------------error‘，err）}）} 652tempfile paths【0】，//成功回调成功:res = & gt{ console . log（‘上传成功‘，RES）let imgur = RES . fileidwx . cloud . call function（{ name:“news & quot；，// data: { // imgUrl: imgUrl // }，data: { _qunId: qunId，_ OpenID:wx . getstoragesync（‘OpenID‘），//Message text:‘‘，// Message img: imgUrl，//time dataTime: util.nowTime（），//avatar send outhand:wx . getstoragesync（‘userinfo‘）。头像URL，//昵称send outname:wx . getstoragesync（‘userinfo‘）。昵称}，Success（RES）{ console . log（‘图片发送成功’，RES）}，fail（RES）{ console . log（‘返回失败’，RES）} }）}，}）}，onLoad:function（options）{ console . log（options）that = this qunId = options . qunId this . onmsg（options . qunId）that . user fun（）that . prohibit（）}，//获取组成员user fun（）{ db . collection（‘qun userlist‘）。where（{ qunid:qunid }）。get（{ success:function（RES））。{ console . log（66666666，RES）that . setdata（{ user number:RES . data . length，Userlist:RES . data }）}），//群公告notice（）{ wx . show modal（{ title:‘群公告’，content:this . data . Userlist【0】。qunTitle，showCancel: false，Success（RES）{ if（RES . confirm）{//console . log（‘用户单击确定‘）} }，//发送消息Send out（E）{ console . log（1111，E）let title = E . detail . value if（title = =‘）{ wx . show toast（{ title:‘请输入聊天内容‘，icon:‘头像URL，//昵称send outname:wx . getstoragesync（‘userinfo‘）。昵称} console . log（data）wx . cloud . call function（{ name:“news & quot；，data: data，success（RES）{ console . log（‘消息发送’，RES）that . setdata（{ title:‘}），Fail（RES）{ console . log（‘登录失败’，RES）} } }，/* *用户点击右上角分享*/onshareappmessage:function（）{ }，//手指点击录音voice _ ing _ start:function（）{ console . loggetTime（），//记录点击开始的时间}）const options = { duration:10000，//以ms为单位指定录制持续时间sampleRate: 8000，//采样率:numberOfChannels: 1，//录制通道数为编码比特率:24000，//编码速率格式:‘MP3’，//音频格式，有效值AAC/MP3音频源:‘auto’，帧大小:12，//指定帧大小，单位KB } recorder . Start（options）//开始录制this.animation = wx .//Restore that . setdata（{ spreading:that . animation . export（）}）}，on ready:function（）{ this . on _ recorder（）；}，//记录监控事件on _ recorder:function（）{ console . log（‘记录监控事件‘）；recorder . onstar（（RES）= & gt；{ console . log（‘开始录制‘）；}）recorder . onstop（（RES）= & gt；{ let { tempFilePath } = resconsole . log（‘停止记录，临时路径‘，tempfile path）；var x =新日期（）getTime（）-this . data . voice _ ing _ start _ date if（x & gt；1000）{ let timestamp =新日期（）。getTime()；wx . cloud . uploadfile（{ cloud path:& quot；声音/& quot；+timestamp+“。MP3“，filePath: tempFilePath，success:RES = & gt；{ console . log（‘upload succeeded‘，RES）that . setdata（{ soundurl:RES . fileid，}）var data = { _ qunId:‘fb16f 7905 E4 BFA 24009098 DC 34 b 910 c8‘，_ openId:wx . getstoragesync（‘openId‘），//消息文本:‘‘，voice: res.fileID，img:‘‘‘，//time数据时间:util . now time（65头像URL，//昵称send outname:wx . getstoragesync（‘userinfo‘）。昵称} console . log（data）wx . cloud . call function（{ name:“news & quot；，data: data，success（RES）{ console . log（‘发送语音进行发送，RES）}，Fail（RES）{ console . log（‘发送语音失败，RES）} }）recorder。onFrameRecorded（（RES）=》{ return console . log（‘onFrameRecorded RES . frame buffer‘，RES . frame buffer）；string _ base 64 = wx . arraybuffertobase 64（RES . frame buffer）console . log（‘string _ base 64--‘，string _ base 64）}）}，//手指释放的录音voice _ ing _ end:function（）{ console . log（‘手指释放的录音‘）that . setdata（{ voice _ icon _ click:false，动画数据:{ }）this。动画=“& quot；；var x =新日期（）getTime（）-this . data . voice _ ing _ start _ date if（x & lt；blockquote & gt& ltp & gt& ltstrong & gt相关免费学习推荐:

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

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

本文由主机参考刊发，转载请注明：引入小程序聊天群，发送语音、文字和图片。 https://zhujicankao.com/114158.html