uni-app ChatGPT机器人聊天案例

当然，以下是一个基于uni-app框架的简单ChatGPT机器人聊天案例代码示例。这个示例将展示如何在uni-app中集成ChatGPT API并创建一个基本的聊天界面。

首先，确保你已经安装了uni-app的开发环境，并创建了一个新的uni-app项目。

1. 在项目中添加页面： 在pages目录下创建一个新的页面，例如chat.vue。

2. 编写chat.vue页面代码：

<template>
  <view class="container">
    <view class="chat-box">
      <scroll-view scroll-y="true" style="height: 300px;">
        <view v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
          {{ message.text }}
        </view>
      </scroll-view>
      <view class="input-box">
        <input v-model="inputText" placeholder="Type a message..." @keyup.enter="sendMessage" />
        <button @click="sendMessage">Send</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      messages: []
    };
  },
  methods: {
    async sendMessage() {
      if (this.inputText.trim()) {
        try {
          const response = await fetch('https://api.chatgpt.com/your-endpoint', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ prompt: this.inputText })
          });
          const data = await response.json();
          this.messages.push({ text: this.inputText, type: 'user' });
          this.messages.push({ text: data.response, type: 'bot' });
          this.inputText = '';
        } catch (error) {
          console.error('Error fetching ChatGPT response:', error);
        }
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.chat-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}
.message {
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
}
.message.user {
  align-self: flex-end;
  background-color: #dcf8c6;
}
.message.bot {
  align-self: flex-start;
  background-color: #e6f7ff;
}
.input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
button {
  padding: 10px 20px;
  border: none;
  background-color: #007aff;
  color: white;
  border-radius: 5px;
}
</style>

注意：

• 这里的https://api.chatgpt.com/your-endpoint是一个占位符，你需要替换为实际的ChatGPT API端点。
• 你可能需要在请求头中添加API密钥或其他认证信息。
• 本示例仅用于演示目的，并未处理所有可能的错误情况。

这个简单的聊天应用展示了如何在uni-app中创建一个基本的聊天界面，并通过API与ChatGPT进行交互。你可以根据需要进一步扩展和优化这个示例。