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

可以创建群，邀请群成员，群成员列表展示，图片发送，设置群公告，踢人，全体禁言，个人禁言，发送语音信息等功能。

效果图：

实现代码：

可以帮忙制作，手机号、wx：17610241271

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' data-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' data-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;
}

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 = srcinnerAudioContext.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._openIdif (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.fileIDwx.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 = thisqunId = options.qunIdthis.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.valueif (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, //指定录音的时长，单位 mssampleRate: 8000, //采样率numberOfChannels: 1, //录音通道数encodeBitRate: 24000, //编码码率format: 'mp3', //音频格式，有效值 aac/mp3audioSource: '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_dateif (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) => {returnconsole.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_dateif (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})},
})

小程序聊天群，发送语音，文字，图片。相关推荐

云开发微信小程序聊天群
功能支持创建群,邀请群成员,群成员列表展示,图片发送,设置群公告,踢人,全体禁言,个人禁言,发送语音信息等相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
小程序聊天室开发，发送文字，表情，图片，音频，视频，即时通讯，快速部署，可定制开发
效果图: 微信小程序聊天功能模块,现在已经支持发送图片,文字,音频,视频,表情,在线即时聊天啦. 需要做的可以联系我微信.13977284413 上代码: <view class="b ...
php 小程序即时聊天,网易云IM小程序聊天室集成。PHP版SDK API使用示例
搜索热词出售微信小程序聊天室完整源码,也可定制开发微信小程序.扫码加微信详聊 /** 网易云信server API 接口使用示例 1.6 @author hzchensheng15@corp.ne ...
简单的小程序聊天对话窗口界面
一个简单的微信小程序聊天对话窗口界面,包括发送文本功能直接上代码,js代码: // 简单版 Page({data: {content: '',// 当前登录者信息login: {id: '2023' ...
如何开发一个微信小程序聊天软件
使用微信小程序框架建立一个聊天的应用. 选择一个开发语言编写程序,如HTML.CSS.JavaScript等. 创建聊天页面,用来显示发送的消息. 使用Websocket服务器编写服务端的程序,实现客 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
一款社区论坛小程序源码（修复登录图片发布上传问题）
简介: 这是一款社区论坛小程序源码(修复登录图片发布上传问题) 内涵强大的功能支持多种多样的发帖模式比如发图文,发语音,发涂鸦,发视频等另外也可以设置为只能会员才可以发另外还拥有礼物功能,可以 ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...

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

小程序聊天群，发送语音，文字，图片。相关推荐

最新文章

热门文章