当然可以!下面是一个简单的示例代码,实现了一个基本的微信小程序客服聊天页面,客服会自动调用ChatGPT进行回复。
首先,你需要在微信小程序开发者工具中创建一个新的页面,然后将下面的代码粘贴到新页面的js文件中。
const gptChatUrl = 'https://api.openai.com/v1/chat/completions'; // ChatGPT API的URL
const gptApiKey = 'Your-API-Key'; // ChatGPT的API密钥
Page({
data: {
messages: [], // 存储聊天消息的数组
inputMsg: '', // 输入框中的消息
},
// 页面加载时自动调用
onLoad: function () {
// 初始化聊天消息数组
this.setData({
messages: [],
});
},
// 输入框内容变化时自动调用
onInputMsgChange: function(e) {
// 更新输入框中的消息
this.setData({
inputMsg: e.detail.value,
});
},
// 发送按钮点击事件处理函数
onSendClick: function() {
// 获取输入框中的消息
const inputMsg = this.data.inputMsg;
// 如果输入框中没有消息,则不执行任何操作
if (inputMsg === '') return;
// 向聊天消息数组中添加用户发送的消息
const messages = this.data.messages;
messages.push({ type: 'user', content: inputMsg });
// 调用ChatGPT API获取回复
this.getGptChatReply(inputMsg)
.then((reply) => {
// 向聊天消息数组中添加ChatGPT的回复
messages.push({ type: 'bot', content: reply });
// 清空输入框
this.setData({
inputMsg: '',
messages,
});
})
.catch((error) => {
console.error('Failed to get ChatGPT reply.', error);
});
},
// 调用ChatGPT API获取回复
getGptChatReply: function(inputMsg) {
return new Promise((resolve, reject) => {
// 构造请求参数
const params = {
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: inputMsg },
],
max_tokens: 50,
};
// 发起网络请求
wx.request({
url: gptChatUrl,
method: 'POST',
header: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${gptApiKey}`,
},
data: params,
success: (res) => {
if (res.statusCode === 200) {
// 从响应中获取ChatGPT的回复
const reply = res.data.choices[0].message.content;
// 完成Promise
resolve(reply);
} else {
reject(res.data);
}
},
fail: (error) => {
reject(error);
},
});
});
},
});
接下来,在新页面的wxml文件中,你可以使用下面的代码来构建聊天页面的UI。
<view class="container">
<scroll-view class="message-container" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation>
<block wx:for="{{messages}}" wx:key="index">
<view class="message-item {{item.type}}">
<view class="message-content">{{item.content}}</view>
</view>
</block>
</scroll-view>
<view class="input-container">
<input class="input-msg" type="text" placeholder="输入消息" value="{{inputMsg}}" bindinput="onInputMsgChange" />
<button class="send-button" type="primary" bindtap="onSendClick">发送</button>
</view>
</view>
最后,在新页面的wxss文件中,你可以使用下面的代码为聊天页面的UI添加样式。
.container {
display: flex;
flex-direction: column;
height: 100vh;
padding: 20rpx;
}
.message-container {
flex: 1;
}
.message-item {
margin-bottom: 10rpx;
padding: 10rpx;
font-size: 16rpx;
border-radius: 10rpx;
}
.message-item.user {
background-color: #f3f3f3;
}
.message-item.bot {
background-color: #e1f5fe;
}
.input-container {
display: flex;
}
.input-msg {
flex: 1;
border: 1rpx solid #ccc;
border-radius: 20rpx;
padding: 10rpx;
font-size: 16rpx;
margin-right: 10rpx;
}
.send-button {
width: 80rpx;
height: 40rpx;
background-color: #4caf50;
color: #fff;
border-radius: 20rpx;
font-size: 16rpx;
}
现在,你可以在微信小程序开发者工具中预览并测试你的客服聊天页面了!当用户输入消息并点击发送按钮时,页面会自动调用ChatGPT API进行回复,并将回复显示在聊天窗口中。
请确保将代码中的Your-API-Key
替换为你在OpenAI平台上获取的ChatGPT的API密钥。
希望这个示例对你有帮助!如果有任何问题,请随时提问。