微信公眾號其實也就是個聊天窗口，只不過你是在和一個類似智能機器人在聊天而已，并且能根據你的關鍵字做回復。

對于中繼器的基本用法，一般用來展示二維表格數據或者列表數據，高級一點的用來顯示縮略圖，類似dribbble.com網站的作品縮略圖?；蛘呤请娚叹W站的一些商品數據，商品圖片、名稱、價格等等信息。

今天說的創新型的用法也只是對中繼器的常規用法的一點小小變通，但卻能做到比較高級一點的用法。正如文章標題所說，我們今天要做的是關于微信公眾號的自動回復交互原型。

點擊這里查看在線效果。?發送“幫助”、“A”、“B”、“C”、“D”等查看。

一、界面布局

1、標題欄和輸入欄

此部分不再詳細描述，使用矩形框、圖標、輸入框、按鈕等完成界面布局，文本框隱藏了邊框并處理了鼠標移入和移出事件來模擬獲得焦點效果，將文本輸入框命名為txtMessage。

2、添加一個中繼器，放在標題欄下方，命名為list，雙擊進入編輯狀態。

添加一個頭像作為公眾號的頭像，再添加兩個矩形框，背景色為綠色，其中一個設置為三角形，大小為12*10，設置角度為270，另外一個矩形框大小為270*60，圓角大小為4。

將三角形和矩形移動到合適位置，合并兩個形狀，形成氣泡形狀的圖形，命名為txtPublic：

設置氣泡形狀的文本對齊方式為左對齊，并向上對齊，各個邊距為20、10、10、10。

選中頭像和氣泡形狀，右鍵轉換為動態面板，命名為msg_item，添加一個新的狀態，同理添加一個頭像和一個氣泡形狀，氣泡命名為txtMe。

設置動態面板list的垂直間距為10。

設置動態面板數據，添加三列，seq，obj和msg，分別表示消息的序號，發消息的對象和消息內容。

二、事件處理

1、中繼器list事件處理

這是實現交互式聊天的關鍵地方，在前面我們將中繼器的內容設置為一個動態面板，有兩個狀態，分別用來顯示公眾號的自動回復內容，一個是顯示自己發送的內容。

刪除中繼器默認的“每項加載時”事件，重新添加事件處理，并添加條件判斷，如果obj等于public的時候，顯示狀態state1，設置txtPublic內容為中繼器的msg。如果obj等于me的時候，顯示狀態state2，設置txtMe內容為中繼器的msg，這樣就實現了交互式聊天的兩個狀態。

我們可以發現中繼器預覽時，默認的3條數據已經初步顯示成了交互式聊天的效果。

2、刪除中繼器第2、3條數據，只保留第一條，并設置內容如下：

這樣默認顯示一條微信公眾號被關注時的自動回復內容。

3、發送按鈕事件

在文本框輸入內容后，點擊“發送”按鈕，給中繼器添加一條自己發送的消息，同時根據發送的內容，添加一條自動回復的內容。例如發送“幫助”時，自動回復“請回復A、B、C或D查看?！?。注意第5步是添加自己發送的消息，第6步是添加自動回復的內容。

繼續添加其它事件分支，在回復A、B、C、D或其它時分別添加其它自動回復內容：

• 發送A時：回復“我今年18啦，很年輕哦！”。
• 發送B時：回復“我家住在首都北京，來約呀！”。
• 發送C時：回復“身高體重和三維可是我的秘密，不能告訴你！”。
• 發送D時：回復“好吧，我的手機號碼是1888888888?！?。
• 發送其它內容時：回復“聽不懂你說的話，我還在不斷學習中~”。

自動回復內容已經設置好了，在回復不同的內容時會有自動的響應。

4、消息自動滾屏處理

如果消息超過顯示窗口時，需要滾屏顯示消息。

選擇中繼器list，右鍵轉換為動態面板，命名為msg_list，再選擇msg_list，右鍵再轉換為動態面板，調整大小和顯示窗口一樣大小，高為580，寬為480。

添加一個熱區元件，添加單擊事件，判斷動態面板msg_list的內容高度，如果超過580時，即超過顯示區域時，向上移動msg_list到位置[[580-LVAR1.height-10]]，配合線性動畫效果。

最后，發送按鈕的各個場景下都觸發一下這個熱區事件，只要內容超過顯示區域，則向上移動。

5、預覽一下效果，分別回復“幫助”、“A”、“B”、“C”、“D”，以及其它隨便內容，顯示效果如下：

當內容超過顯示區域時，會自動滾屏顯示。

小結

以上完成了微信公眾號的自動回復功能，只要場景設置的足夠多，它就是一個會聊天的智能機器人。它的實現最主要是應用了中繼器的“每項加載時”事件處理，以及中繼器的添加行功能。

這是中繼器的非常有意思的一個使用場景，通過事件的多分支處理，實現了交互式聊天的效果。

怎么樣？你也來試一試吧！

源文件下載鏈接:

作者源：https://pan.baidu.com/s/1o7Qv4bo 密碼: dpmn

人人官方源: https://pan.baidu.com/s/1skTDsKX 密碼: x9ea

本文由 @ Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載