小程序即时通讯聊天控件（二）

小程序即时通讯（二）文本、语音输入控件实现原理

转载请注明出处：https://blog.csdn.net/sinat_27612147/article/details/78476241

集成请看小程序即时通讯聊天控件（一）输入组件及使用WebSocket通信
这个控件的编写主要分为三个部分：文本和语音信息的输入及获取、录音时手势操作的处理、自定义功能。其中文本信息的输入及获取使用微信官方控件input即可实现，语音输入也是，可以参考录音功能。这部分就是调用个API的事儿，不讲述了。文本和语音状态的切换、自定义功能的实现原理也非常简单，这里可以简单讲下。倒是手势操作这块花了一些时间，调试过程中也发现了一些问题，可以跟大家分享下。

先说下输入状态的切换吧

点击左侧的按钮会切换输入的状态

我把这个控件中用到的所有字段都用inputObj这个对象来管理，在调用chatInput.init(page,opt)方法时就在page的data对象中初始化了inputObj对象。那么是怎么点击左侧的按钮切换状态的呢？

没错！就是在点击时将inputObj.inputStatus这个字段置为text或voice，然后渲染到布局上，布局使用wx:if来控制对应控件的显示和隐藏。

上代码：

chat-input.wxml（布局的代码贴上来排版太乱了，所以我贴代码的时候删除了一些样式。。。把最主要的放了出来）

<!--左侧输入状态的图片切换-->
<image src="../../image/chat/voice/{
   {
   inputObj.inputStatus==='voice'?'keyboard':'voice'}}.png"
       bindtap="changeInputWayEvent" />
<!--控制显示语音输入-->
<block wx:if="{
   {
   inputObj.inputStatus==='voice'}}">
    <template is="voice" data="{
   {
   voiceObj:inputObj.voiceObj}}" />
</block>
<!--控制显示文本输入-->
<input wx:if="{
   {
   inputObj.inputStatus==='text'}}"
       confirm-type="send" value="{
   {
   textMessage}}" bindconfirm="chatInputSendTextMessage" />

chat-input.js

//在chat-input.wxml中绑定的changeInputWayEvent事件
//