目录
效果描述
效果展示
代码实现
渲染层
逻辑层
效果描述
在与好友的对话框中，点击语音图标可以切换到给好友发送语音，长按发送语音的按钮即可开始录音：
如果录制时间 小于60s 时，松手则表示录音结束并将语音消息发送给对方；
如果录制的时间 超过60s 则自动结束，并将语音发送给对方；
如果在录制 60s之内 并且没有松手，而是上滑100像素，则表示取消发送该条语音；
效果展示
代码实现
发送语音部分的代码是全的，但是别的部分代码有缺失，如果需要对话框页面完整代码的可以私信。
渲染层
<view class="guding"><view class="bottom" :style="bottomStyle"><view class="mic"><uv-icon name="mic" color="#09B5BE" size="50rpx" v-if="!isVoice" @click="handleVoice(true)"></uv-icon><image src="../../static/message/keyboard.svg" mode="aspectFill" class="img" v-if="isVoice"@click="handleVoice(false)"></image></view><view class="b-cen" v-if="!isVoice"><!-- autoHeight：是否自动增加高度，设置auto-height时，height不生效 --><uv-textarea ref="textarea" v-model="msgText" autoHeight border="none" @input="input" :adjustPosition="true"@focus="focus" @blur="blur" :showConfirmBar="false" maxlength="100":customStyle="{minHeight:'30rpx',borderRadius:'20rpx'}" :textStyle="{fontSize:'30rpx'}"></uv-textarea><image v-if="isShowSmile" src="../../static/message/smile.svg" mode="aspectFill" class="img"@click="handleKeySmile('smile')"></image><image v-if="isShowKeyboard" src="../../static/message/keyboard.svg" mode="aspectFill" class="img"@click="handleKeySmile('key')"></image></view><view v-if="isVoice" class="b-cen"><view class="bc-text" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">按住 说话</view></view><view v-if="!msgText.length" class="mic" @click="handlePlus"><uv-icon name="plus" color="#09B5BE"size="50rpx"></uv-icon></view><view class="sendBtn" v-if="msgText.length" @click="handleSubmit">发送</view></view><view class="emoji" v-if="!isShowSmile"><text class="e-item" v-for="(item,index) in emojiList" :key="index" @click="handleEmoji(item)">{{item}}</text></view><view class="extra" v-if="isShowExtra"><view v-for="item in extraList" :key="item.id" class="ex-item" @click="handleExtra(item)"><uv-icon :name="item.icon" size="74rpx"></uv-icon><text>{{item.text}}</text></view></view></view>逻辑层
const recorderManager = ref('');const isVoice = ref(false) //是否显示语音const isshowVoiceBg = ref(false) //是否显示录音背景// 切换语音和键盘const handleVoice = (val) => {isVoice.value = valisShowExtra.value = falseinputh.value = 0isShowSmile.value = trueisShowKeyboard.value = falseif (val) {uni.authorize({scope: 'scope.record',desc: '需要获取您的录音权限',fail(res) {uni.showToast({title: "请点击右上角“…”功能菜单，进入设置界面，打开麦克风权限后，再重新录音",icon: "none",duration: 2000,});return false;},})}}const pageY = ref(0)const timer = ref(0) //计时器const vlength = ref(0) //录音时长// 点击开始录制语音const touchstart = (e) => {console.log("开始录制", e)let i = 1;timer.value = setInterval(() => {vlength.value = i;i++;console.log("计时器开始工作,第几秒", i)//结束计时，如果录制时间超过60s就强制停止录音if (i > 60) {clearInterval(timer.value);touchend();}}, 1000)recorderManager.value.start();pageY.value = e.changedTouches[0].pageY;isshowVoiceBg.value = true}const isCancel = ref(false)const recordSend = ref(true)// 结束录音const touchend = async (e) => {console.log("结束录制", e)recorderManager.value.stop();clearInterval(timer.value)isshowVoiceBg.value = false// 如果取消发送录音，则不发送if (isCancel.value) {recordSend.value = false} else {recordSend.value = true}// 结束录音后重置取消状态isCancel.value = false}// 删除录音const touchmove = (e) => {console.log('删除录音')// 如果手指移动距离大于100，则关闭录音界面if (pageY.value - e.changedTouches[0].pageY > 100) {// 关闭录音界面isshowVoiceBg.value = falseisCancel.value = true}}onMounted(() => {recorderManager.value = uni.getRecorderManager()// 处理录音停止的逻辑recorderManager.value.onStop(async (res) => {console.log("录制结束后生成的声音文件", res, vlength.value)await http.uploadFile(api.singleUpload, res.tempFilePath).then(res => {console.log("录制的时长为多少", vlength.value)let data = {voice: res.data.filePath,time: vlength.value};if (recordSend.value) {sendMsg({ type: 2, message: JSON.stringify(data) }) //语音} else {uni.showToast({icon: "none",title: "语音已取消发送"})}})// 重置时长和状态vlength.value = 0;isshowVoiceBg.value = false});})
