我居然做了一个智障？（聊天机器人的界面实现与交互）

一文教你如何制作一个聊天机器人小程序

废话不多说先上图

从动图可以看出这个聊天机器人可以功能包括

• 发送方输入信息

• 发送信息渲染

• 接收信息回复的时候显示加载动画

• 回复信息渲染

接下来我们一步一步按照上面功能来说明

1.发送方输入信息发送

输入框布局上图

WXML代码

 <view class="chat-up" >
      <image 
        bindtouchstart='startRecognize' 
        bindtouchend='endRecognize' 
        class="chat-up-mic" 
        src="../../static/iconfont/mdcubs/mic.svg" />
      <input 
        class="chat-up-input" 
        bindinput="chatChange" 
        placeholder="说点什么吧" 
        value="{
    {chatMyself}}" />
      <view bindtap="sendChatValue">
          <i class="iconfont icon-fasong"></i>
     </view>
 </view>

WXSS

.chat-up{
   
  display: flex;
  justify-content: space-around;
  align-items: center;
  position:fixed;
  bottom:80rpx;
  left: 50%;
  transform: translateX(-50%);

  height: 80rpx;
  width: 80%;
  border-radius: 80rpx;

  padding:20rpx;
  background: #e3f6f1;
}

.chat-up-input{
   
  width: 80%;
  height: 80rpx