uniapp只能发送文字聊天模板

Uniapp 可以支持发送文字、图片、语音等多种聊天类型，以下是一个发送文字聊天的示例模板：

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <div v-if="msg.type === 'sent'"> <!-- 发送的消息 -->
        <div v-if="msg.contentType === 'text'" class="sent-msg">{{ msg.content }}</div>
      </div>
      <div v-else> <!-- 接收的消息 -->
        <div v-if="msg.contentType === 'text'" class="received-msg">{{ msg.content }}</div>
      </div>
    </div>
    <div class="input-area">
      <input type="text" v-model="newMessage" @keyup.enter="sendTextMessage">
      <button @click="sendTextMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { type: 'received', contentType: 'text', content: '你好' },
        { type: 'sent', contentType: 'text', content: '你好，我是uniapp' },
        { type: 'received', contentType: 'text', content: '很高兴认识你' }
      ],
      newMessage: ''
    }
  },
  methods: {
    sendTextMessage() { // 发送文字消息
      if (this.newMessage) {
        this.messages.push({ type: 'sent', contentType: 'text', content: this.newMessage })
        this.newMessage = ''
      }
    }
  }
}
</script>

<style>
.sent-msg {
  background-color: #ddf0ff;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  float: right;
}

.received-msg {
  background-color: #f0f0f0;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  float: left;
}

.input-area {
  margin-top: 20px;
}
</style>

在这个示例中，只支持发送文字消息。可以看到，每条消息都有一个 `contentType` 属性，用于表示消息的类型，这里设置为 `text` 表示文字消息。在发送消息时，调用 `sendTextMessage` 方法，将当前输入的消息添加到 `messages` 数组中，同时清空输入框中的内容。

如果需要支持发送图片或语音等其他类型的消息，需要使用相应的组件和 API 进行开发。