介绍小程序聊天群，发送语音，文字，图片（微信小程序发送语音）

介绍小程序聊天群，发送语音，文字，图片（微信小程序发送语音）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

效果图：

实现代码：

wxml

群成员({{userNumber}}) 发图片 发图片 群公告 去首页 暂无聊天数据 {{item.sendOutname}} {{item.dataTime}} {{item.text}} {{item.sendOutname}} {{item.dataTime}} {{item.text}} 语音 禁言中 -

wxss

page { background: #f2f2f2;}-_bo { display: flex; background: white; flex-direction: row;}-_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

相关免费学习推荐：微信小程序开发教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。