文章概述今天的文章是更适合界面设计部分，在demo中，我们实现了一个业务组件——聊天输入框，所以本文将教大家聊天输入框的业务实现以及如何修改和调整聊天输入框的实现聊天输入框1.样式分析根据两种聊天输入框模式，我们可以将样式分为以下两种文字模式：语音模式：其实demo中提供的聊天输入框组件已经涵盖了两种输入文件、发送表情、长按说话、上滑取消等模式操作。当然，我们要想很好的掌握这个组件，还得分析组件中的代码逻辑。2.代码分析整个demo工程整体上设计了组件的解耦。各个组件文件的对应关系如下。由于聊天输入框的组件是ChatInputBox.vue，所以我们可以重点分析这个文件中的代码。.1.data数据结构data(){letsysInfo=uni.getSystemInfoSync()return{ios:sysInfo.platform.toLowerCase()=='ios',pageHeight:sysInfo.windowHeight,text:'',showText:'',focus:false,speechMode:false,faceMode:false,extraMode:false,speechIng:false,hoverOnSpeechCancelBtn:false}}，从data中的数据结构我们不难看出，根据speechMode,faceMode,extraMode切换text,voice,For表情、扩展等操作方式的变化，我们相应地看一下界面中的代码。2.界面控制模式切换界面中通过切换speechMode来显示文本输入框和语音按钮，实现语音和文本的切换操作按下并说话send3.语音聊天覆盖特别实现的特点是语音聊天有一个“speaking”覆盖层，我们在模板最后添加一个语音聊天覆盖层，通过监听speechMode是否为true来控制显示和隐藏，从而实现语音聊天的效果:src="hoverOnSpeechCancelBtn？'/static/icon_cancel_record.png':'/static/recording.gif'"mode="widthFix">{{hoverOnSpeechCancelBtn?'向上滑动取消发送':(speechIng.time>50000?`剩余${60-(speechIng.time/1000).toFixed(0)}秒`:'松开手指取消发送')}}2.上滑取消语音算法一般来说，长按说话时用户很难进行点击取消按钮等操作。语音一般使用上滑操作来取消语音，但是对于组件来说，内部实现长按时的手指移动算法如下。首先，我们需要监听界面上的触摸事件。这个事件的监听可以在vue/nvue下获取。统一反馈，但是nvue下y轴坐标计算负值需要修正长按说话touchOnSpeech主要是录音当前的长按事件，做好了其他UI控件的事件冲突处理，同时也标记了开始录制。asynctouchOnSpeech(){this.speechIng={time:0,timer:null}this.speechIng.timer=setInterval(e=>{this.speechIng&&(this.speechIng.time+=500);//这里判断超时if(this.speechIng.time>=60000){this.hoverOnSpeechCancelBtn=falsethis.touchOffSpeech()}},500)console.log('speech-start')letsuccess=awaitthis.$imUtils.startRecord()如果(!success){this.touchOffSpeech()uni.showToast({icon:'none',position:'bottom',title:'录音失败，请检查麦克风权限是否已授权'})}}touchOffSpeech主要录音当前释放长按事件判断结束/取消录制。这里使用了lodash的防抖处理，因为在nvue下touchOffSpeech可能会触发多次：=this.speechIng.timethis.speechIng=nullif(this.hoverOnSpeechCancelBtn){this.hoverOnSpeechCancelBtn=falsereturn}if(timeLen<1000){return}让filePath=awaitthis.$imUtils.endRecord()if(!filePath){return}this.$emit('sendAudio',{filePath,timeLen})},500,{leading:true,trailing:false}),touchMoveSpeech主要是计算当前手指移动位置，如果到达取消区域，则设置取消状态为true，这样实现取消语音的处理touches=touches[0]letminScope=0letmaxScope=this.pageHeight-50//这里我们默认只要【长按说话】按钮一直在取消语音处理，开发者可以根据实际需要调整业务逻辑效果查看：项目介绍请点击项目开源e地址：https://gitee.com/ckong/Zhimi...Uniapp开发交流群：755910061
