整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
1、登錄郵箱后點擊右上角“郵箱設(shè)置”，在左側(cè)展開設(shè)置功能列表中點擊"假期回復(fù)”，然后勾選“在以下時間內(nèi)啟用自動回復(fù)”，選擇時間，輸入回復(fù)內(nèi)容保存即可。
阿里云郵箱如何設(shè)置自動轉(zhuǎn)發(fā)郵件？
1、登錄郵箱后點擊右上角“郵箱設(shè)置”，在左側(cè)展開設(shè)置功能列表中點擊“自動轉(zhuǎn)發(fā)”，輸入轉(zhuǎn)發(fā)郵箱地址然后點擊“添加轉(zhuǎn)發(fā)郵箱地址”。
2、添加后會在轉(zhuǎn)發(fā)郵箱收到一封確認(rèn)郵件，轉(zhuǎn)發(fā)郵箱地址顯示“待驗證”狀態(tài)，點擊確認(rèn)郵件中的鏈接進(jìn)行驗證后，回到自動轉(zhuǎn)發(fā)設(shè)置頁面保存修改，自動轉(zhuǎn)發(fā)設(shè)置成功。
3、最后選擇對已轉(zhuǎn)發(fā)的郵件執(zhí)行保留原郵件、刪除原郵件或標(biāo)記原郵件為已讀的操作。
使用AJAX實現(xiàn)ChatGPT自動回復(fù)微信群聊消息的技術(shù)實踐
## 引言：賦予智能助手實時互動能力
在當(dāng)今社交媒體時代，自動化處理與回應(yīng)用戶消息的需求日益增強。設(shè)想一下，如果你的微信公眾號或微信群能夠集成ChatGPT的強大人工智能回復(fù)功能，無疑會給用戶帶來全新的交互體驗。本文將以“使用AJAX實現(xiàn)ChatGPT自動回復(fù)微信群聊消息”為主題，探討如何借助Web前端技術(shù)，結(jié)合ChatGPT API構(gòu)建一個實時響應(yīng)并自動回復(fù)微信群聊消息的小程序。由于微信平臺自身的限制，我們將模擬這個過程，并非直接在微信平臺上實現(xiàn)（微信官方并不開放此類接口給第三方）。下面將從設(shè)計思路、技術(shù)選型到代碼實現(xiàn)逐步展開。
### **一、需求分析與設(shè)計思路**
#### **1. 需求概述**
- **獲取群聊消息**：模擬從微信服務(wù)器接收群聊消息。
- **調(diào)用ChatGPT API**：將接收到的消息發(fā)送至ChatGPT API以獲取智能回復(fù)。
- **自動發(fā)送回復(fù)**：將ChatGPT生成的回復(fù)模擬發(fā)送回群聊。
#### **2. 技術(shù)路線**
- 使用HTML5構(gòu)建前端頁面模擬微信聊天界面。
- 利用AJAX進(jìn)行異步通信，模擬從微信服務(wù)器拉取消息及發(fā)送回復(fù)。
- 調(diào)用OpenAI提供的ChatGPT API接口，獲取智能回復(fù)內(nèi)容。
### **二、搭建基礎(chǔ)環(huán)境與模擬接口**
#### **1. HTML基本布局**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ChatGPT自動回復(fù)微信群聊</title>
<!-- 添加樣式 -->
<style>
/* CSS代碼省略，用于美化聊天窗口樣式 */
</style>
</head>
<body>
<div id="chat-container">
<!-- 模擬聊天記錄區(qū)域 -->
<div id="message-list"></div>
<!-- 消息輸入框與發(fā)送按鈕 -->
<input type="text" id="message-input" placeholder="請輸入消息...">
<button id="send-button">發(fā)送</button>
</div>
<script src="main.js"></script>
</body>
</html>
```
#### **2. 模擬API服務(wù)**
由于無法直接接入微信API，我們可以自行搭建簡單的模擬服務(wù)來模擬獲取和發(fā)送消息的過程。這里僅做演示，實際場景中請?zhí)鎿Q為合法且安全的來源。
```javascript
// 在main.js中定義模擬API
const MOCK_API_URL='https://your-mock-api.com';
const simulateFetchMessages=async ()=> {
// 模擬從服務(wù)器獲取群聊消息
const response=await fetch(MOCK_API_URL + '/fetch-messages');
const messages=await response.json();
// 處理并顯示消息
displayMessages(messages);
};
const simulateSendMessage=async (content)=> {
// 模擬發(fā)送消息到服務(wù)器
const payload={ content };
const response=await fetch(MOCK_API_URL + '/send-message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
// 模擬ChatGPT回復(fù)
const reply=await callChatGPT(content);
// 顯示ChatGPT回復(fù)
displayReply(reply);
};
```
### **三、調(diào)用ChatGPT API獲取回復(fù)**
#### **1. 注冊并獲取OpenAI密鑰**
前往OpenAI官方網(wǎng)站注冊并獲取API密鑰，以便調(diào)用ChatGPT API。
#### **2. 使用AJAX調(diào)用ChatGPT API**
```javascript
async function callChatGPT(message) {
const CHAT_GPT_API_URL='https://api.openai.com/v1/completions';
const OPEN_AI_KEY='your-openai-api-key';
const requestBody={
model: 'gpt-4',
prompt: `User: ${message}\n\nAI:` ,
max_tokens: 100,
};
const response=await fetch(CHAT_GPT_API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${OPEN_AI_KEY}`,
},
body: JSON.stringify(requestBody),
});
if (!response.ok) {
throw new Error(`Failed to get response from ChatGPT API: ${response.status}`);
}
const data=await response.json();
return data.choices[0].text.trim().replace(/^AI:/, '');
}
```
### **四、實現(xiàn)消息的實時顯示與發(fā)送**
#### **1. 顯示消息與回復(fù)**
```javascript
function displayMessages(messages) {
const messageList=document.getElementById('message-list');
// 渲染消息列表
// ...
}
function displayReply(reply) {
const messageList=document.getElementById('message-list');
// 創(chuàng)建回復(fù)消息DOM并添加到列表中
// ...
}
// 監(jiān)聽發(fā)送按鈕點擊事件
document.getElementById('send-button').addEventListener('click', ()=> {
const inputField=document.getElementById('message-input');
const userInput=inputField.value;
// 模擬發(fā)送用戶消息并獲取ChatGPT回復(fù)
simulateSendMessage(userInput);
// 清空輸入框
inputField.value='';
});
```
### **五、完整流程實現(xiàn)**
1. 初始化頁面加載時，模擬拉取歷史消息并顯示。
2. 用戶在輸入框中輸入消息后點擊“發(fā)送”按鈕，觸發(fā)模擬發(fā)送事件。
3. 發(fā)送事件中調(diào)用ChatGPT API獲取回復(fù)內(nèi)容。
4. 將ChatGPT回復(fù)內(nèi)容渲染到聊天記錄區(qū)域。
### **結(jié)語：**
雖然本文中介紹的方法無法直接應(yīng)用于微信平臺，但通過模擬流程展示了如何利用AJAX與ChatGPT API結(jié)合實現(xiàn)自動回復(fù)的功能。在實際項目中，可以嘗試將此方案與微信小程序、企業(yè)微信或其他可定制化的通訊平臺相結(jié)合，創(chuàng)造出更加智能化的交互體驗。同時，了解這一過程有助于我們理解和拓展其他具備類似機制的平臺或系統(tǒng)，讓ChatGPT等強大AI工具更好地服務(wù)于我們的日常生活與工作。盡管受限于現(xiàn)實條件，但這仍不失為一場富有啟發(fā)性的技術(shù)探索之旅。
天我們學(xué)習(xí)的內(nèi)容有：過渡，動畫，轉(zhuǎn)換，伸縮盒子。
可以說今天學(xué)習(xí)的內(nèi)容都是重量級的大佬，學(xué)好了，使用css3做出酷炫的效果 So Easy！~~
1.過渡
在css3中，有一個屬性可以設(shè)置過渡效果。
它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。
A.案例：通過transition設(shè)置焦點過渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意頁面中的代碼：
第一，我們給div添加了一個hover偽類樣式，當(dāng)我們鼠標(biāo)懸停在div上方的時候，會給div盒子添加一個藍(lán)色的盒子陰影。
第二，我們給div盒子添加了一個transition樣式，設(shè)置的值為：all 1s linear 0.3s;
這四個數(shù)據(jù)分別對應(yīng)
transition-property(需要過渡的屬性)：如果設(shè)置為all表示所有樣式屬性都需要過渡。
transition-duration(過渡的時間):以秒作為單位，設(shè)置過渡的時間
transition-timing-function(過渡的方式):常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延遲的時間):以秒作為單位進(jìn)行延遲，延遲之后開始進(jìn)行過渡效果。
所以，我們通過transition這個復(fù)合屬性設(shè)置的過渡效果為：
all:需要過渡所有的屬性
1s:過渡的時間為1秒
linear:勻速過渡
0.3s:在延遲0.3秒之后開始過渡動畫。
如果大家理解了上面的描述，那么也就不難理解咱們鼠標(biāo)放到div上之后，為啥會慢慢出現(xiàn)藍(lán)色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。
2.動畫：
在學(xué)習(xí)完了過渡之后，發(fā)現(xiàn)咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現(xiàn)一些過渡的動畫。
但是，有的時候，我們的需求會更加的復(fù)雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復(fù)雜的效果呈現(xiàn)。
那么，動畫animation就可以滿足我們的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代碼效果如下：
同樣，讓我們來關(guān)注編寫的代碼：
1.在樣式中，首先我們使用@keyframes 來定義了一個復(fù)雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：
/*動畫的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*動畫最初的時候，將left設(shè)置為0px，top設(shè)置為0px*/
0%{
left:0px;
top:0px;
}
/*當(dāng)動畫進(jìn)行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，
背景顏色過渡為綠色，圓角過渡為0(無圓角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*當(dāng)動畫進(jìn)行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，
背景顏色過渡為藍(lán)色，圓角過渡為50%(正圓)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*當(dāng)動畫進(jìn)行到75%的時候，使用動畫將left過渡到400px，top過渡到0，
背景顏色過渡為灰色，圓角過渡為0(無圓角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*當(dāng)動畫結(jié)束的時候，使用動畫將left過渡到0x，top過渡到0px，
背景顏色過渡為紅色，圓角過渡為50%(正圓)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
這是一個比較復(fù)雜的動畫效果，可以發(fā)現(xiàn)，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當(dāng)我們采用該動畫的元素就會按照設(shè)置的順序和樣式效果進(jìn)行動畫的過渡和展示。
2.上面我們只是通過@keyframes創(chuàng)建了一個動畫，我們還需要通過特定的語法來使用這個動畫。
就是下面這句代碼了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一個復(fù)合屬性，設(shè)置了6個值，分別對應(yīng)：
animation-name(設(shè)置動畫的名稱)：用來設(shè)置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創(chuàng)建的動畫。
animation-duration(設(shè)置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒
animation-timing-function(設(shè)置播放動畫的方式)：播放動畫的方式，常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。
animation-delay(設(shè)置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。
animation-iteration-count(設(shè)置動畫播放的次數(shù)):播放動畫的次數(shù)，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數(shù)字，那么就會播放數(shù)字對應(yīng)的次數(shù)。
animation-direction(設(shè)置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是
alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。
最終，我們通過@keyframes創(chuàng)建動畫，通過animation設(shè)置動畫，成功完成了這個復(fù)雜的動畫效果。
3.轉(zhuǎn)換
在css3中，我們通過transform屬性可以設(shè)置元素的轉(zhuǎn)換效果，具體的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子的位置是left:0,top:0;
但是我們通過transform: translate(300px,300px);將盒子進(jìn)行了偏移，所以，盒子的位置發(fā)生了改變。
B.旋轉(zhuǎn)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子應(yīng)該是四四方方的。
但是，經(jīng)過我們的代碼transform: rotate(45deg); //deg為單位，表示度數(shù)。
進(jìn)行了45度的旋轉(zhuǎn)之后，呈現(xiàn)出來的就是一個菱形的盒子了，旋轉(zhuǎn)的正方向為順時針，負(fù)方向為逆時針。
C.縮放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進(jìn)行的縮放
scale的第一個參數(shù)為0.5,表示橫向縮小為0.5倍
scale的第二個參數(shù)為0.25，表示縱向縮小為0.25倍。
scale的參數(shù)如果為1，則表示不進(jìn)行任何縮放，小于1就是做縮小，而大于1表示做放大。
小結(jié)：transform轉(zhuǎn)換中其實還包含了skew(傾斜)，matrix(矩陣轉(zhuǎn)換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。
4.flex布局
Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代碼效果如下：
如圖所示，咱們通過display:flex將.parent元素設(shè)置為了flex盒子，那么子元素將會按照justify-content設(shè)置的方式進(jìn)行元素的排列，目前看來，和我們沒有設(shè)置flex盒子的效果是一致的。
接下來我們更改一下，將justify-content設(shè)置為flex-end，效果如下圖所示：
所以我們就應(yīng)該發(fā)現(xiàn)，flex-start是讓所有的子元素從父元素的左側(cè)開始排列
而flex-end是讓所有的子元素從元素的右側(cè)開始排列。
我們再來更改一下，將justify-content設(shè)置為center，效果如下圖所示：
更厲害了，子元素在父盒子的中央位置排列顯示了。
然后，我們再將justify-content設(shè)置為space-around，效果如下圖所示：
它是平均分配的形式為每一個子元素設(shè)置了間距，但是看起來有點變扭。
所以我們推薦將justify-content設(shè)置為space-between，效果如下圖：
我們還可以通過flex-wrap來設(shè)置子元素是否換行顯示，以及flex-direction設(shè)置子元素排列的順序。
這兩個屬性可以設(shè)置的值如下：
flex-wrap: nowrap;//不換行，會自動收縮
flex-wrap: warp;//換行，會自動收縮
flex-wrap: warp-reverse;//反轉(zhuǎn)，從默認(rèn)的從上到下排列反轉(zhuǎn)為從下到上。
flex-direction:row; //從左至右一行一行進(jìn)行子元素的排列
flex-direction:column; //從上到下一列一列進(jìn)行子元素的排列
flex-direction:row-reverse; //從右至左一行一行進(jìn)行子元素的排列
flex-direction:column-reverse; //從下到上一列一列進(jìn)行子元素的排列
案例代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我們設(shè)置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）
代碼效果如下：
如果設(shè)置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：
如果將flex-direction: column;,則會縱向排列元素，效果如下圖：
除了上面的這些給伸縮盒子父元素設(shè)置的樣式之外，我們還可以可以伸縮盒子的子元素設(shè)置flex屬性，用來設(shè)置平均分配整個父盒子的空間。
代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現(xiàn)在被拉伸了。
除此之外，咱們還可以使用flex屬性進(jìn)行進(jìn)一步的設(shè)置，代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下圖：
我們分別給四個子盒子設(shè)置了flex:1 , flex:2, flex:2 ,flex:1.
這是什么意思呢？
四個flex加起來一共是6.那么第一個盒子就占據(jù)整個父盒子的1/6寬度。
同理，另外三個盒子分別占據(jù)2/6,2/6,1/6的寬度，所以就形成了我們現(xiàn)在看到的效果。
原文來源于：黑馬程序員社區(qū)
學(xué)習(xí)資源：
想學(xué)習(xí)css，可以關(guān)注：黑馬程序員頭條號，后臺回復(fù)：css
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
