可以创建群，邀请群成员，群成员列表展示，图片发送，设置群公告，踢人，全体禁言，个人禁言，发送语音信息等功能。
效果图：
实现代码：
wxml
<view class="bo">  <view class="top_bo">    <view bindtap="number">群成员({{usernumber}})</view>    <view bindtap="upload" wx:if="{{prohibit=='0'}}">发图片</view>    <view bindtap="prohibittis" wx:if="{{prohibit=='1'}}">发图片</view>    <view bindtap="notice">群公告</view>    <view bindtap="gohome">去首页</view>  </view>  <scroll-view scroll-y="true" scroll-with-animation scroll-top="{{scrolltop}}">    <block wx:if='{{!list}}'>      <view class="nolist">        <view class="nomsg">暂无聊天数据</view>      </view>    </block>    <block wx:else>      <view class="body" wx:for='{{list}}' wx:key='index'>        <view wx:if='{{item.type==1}}' class="right_body">          <view class="flexroe posrit">            <view class="textbo">              <view class="datatime">{{item.sendoutname}} {{item.datatime}}</view>              <view wx:if="{{item.text!=''}}" class="rittxt">{{item.text}}</view>              <image wx:if="{{item.img!=''}}" mode='widthfix' src="{{item.img}}" class="textimg"></image>              <view wx:if="{{item.voice}}" class="rittxt2" bindtap='my_audio_click' src='{{item.voice}}'>                <image class='my_audio' src='/img/play.png'></image>              </view>            </view>            <image class="head" style=" margin-left:20rpx " src="{{item.sendouthand}}"></image>          </view>        </view>        <view wx:if='{{item.type==2}}' 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!=''}}" class="lfttxt">{{item.text}}</view>              <image wx:if="{{item.img!=''}}" mode='widthfix' src="{{item.img}}" class="textimg"></image>              <view wx:if="{{item.voice}}" class="lfttxt2" bindtap='my_audio_click' src='{{item.voice}}'>                <image class='my_audio' src='/img/play.png'></image>              </view>            </view>          </view>        </view>      </view>    </block>  </scroll-view>  <view class="inp">    <view>      <view class="p_r" wx:if="{{prohibit=='0'}}">        <input class="input" placeholder-class='placc' confirm-type="send" bindconfirm='sendout' placeholder='聊天，在这里' value="{{title}}"></input>        <view class="yuyin" catchtouchstart='voice_ing_start' catchtouchend="voice_ing_end">语音</view>      </view>      <view wx:if="{{prohibit=='1'}}" bindtap="prohibittis" class="prohibit">禁言中</view>    </view>  </view></view>
wxss
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;}
js
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    })  },  // 动态监听禁言状态  prohibit() {    console.log('8888888888888', qunid)    const watcher = db.collection('qunlist')      .where({        _id: qunid      })      .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({                        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)        }      })  },  // 发送图片  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('图片发送成功', 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('用户点击确定')        }      }    })  },  // 发送消息  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('消息发送', res)          that.setdata({            title: ''          })        },        fail(res) {          console.log('登录失败', res)        }      })    }  },  /**   * 用户点击右上角分享   */  onshareappmessage: function() {  },  // 手指点击录音  voice_ing_start: function () {    console.log('手指点击录音')    wx.showtoast({      title: '按住录音，松开发送',      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();  },  // 录音监听事件  on_recorder: function () {    console.log('录音监听事件');    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('发送语音发送', res)              },              fail(res) {                console.log('发送语音失败', 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    })  },})
相关免费学习推荐：微信小程序开发教程
以上就是介绍小程序聊天群，发送语音，文字，图片的详细内容。