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

對于中繼器的基本用法，一般用來展示二維表格數(shù)據(jù)或者列表數(shù)據(jù)，高級一點(diǎn)的用來顯示縮略圖，類似dribbble.com網(wǎng)站的作品縮略圖。或者是電商網(wǎng)站的一些商品數(shù)據(jù)，商品圖片、名稱、價格等等信息。

今天說的創(chuàng)新型的用法也只是對中繼器的常規(guī)用法的一點(diǎn)小小變通，但卻能做到比較高級一點(diǎn)的用法。正如文章標(biāo)題所說，我們今天要做的是關(guān)于微信公眾號的自動回復(fù)交互原型。

點(diǎn)擊這里查看在線效果。 ?發(fā)送“幫助”、“A”、“B”、“C”、“D”等查看。

一、界面布局

1、標(biāo)題欄和輸入欄

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

2、添加一個中繼器，放在標(biāo)題欄下方，命名為list，雙擊進(jìn)入編輯狀態(tài)。

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

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

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

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

設(shè)置動態(tài)面板list的垂直間距為10。

設(shè)置動態(tài)面板數(shù)據(jù)，添加三列，seq，obj和msg，分別表示消息的序號，發(fā)消息的對象和消息內(nèi)容。

二、事件處理

1、中繼器list事件處理

這是實(shí)現(xiàn)交互式聊天的關(guān)鍵地方，在前面我們將中繼器的內(nèi)容設(shè)置為一個動態(tài)面板，有兩個狀態(tài)，分別用來顯示公眾號的自動回復(fù)內(nèi)容，一個是顯示自己發(fā)送的內(nèi)容。

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

我們可以發(fā)現(xiàn)中繼器預(yù)覽時，默認(rèn)的3條數(shù)據(jù)已經(jīng)初步顯示成了交互式聊天的效果。

2、刪除中繼器第2、3條數(shù)據(jù)，只保留第一條，并設(shè)置內(nèi)容如下：

這樣默認(rèn)顯示一條微信公眾號被關(guān)注時的自動回復(fù)內(nèi)容。

3、發(fā)送按鈕事件

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

繼續(xù)添加其它事件分支，在回復(fù)A、B、C、D或其它時分別添加其它自動回復(fù)內(nèi)容：

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

自動回復(fù)內(nèi)容已經(jīng)設(shè)置好了，在回復(fù)不同的內(nèi)容時會有自動的響應(yīng)。

4、消息自動滾屏處理

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

選擇中繼器list，右鍵轉(zhuǎn)換為動態(tài)面板，命名為msg_list，再選擇msg_list，右鍵再轉(zhuǎn)換為動態(tài)面板，調(diào)整大小和顯示窗口一樣大小，高為580，寬為480。

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

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

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

當(dāng)內(nèi)容超過顯示區(qū)域時，會自動滾屏顯示。

小結(jié)

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

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

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

源文件下載鏈接:

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

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

?

本文由 @ Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載