中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)
微信公眾號其實(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)載