国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

一、界面布局

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

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

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

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

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

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

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

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

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

二、事件處理

1、中繼器list事件處理

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

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

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

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

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

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

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

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

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

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

4、消息自動(dòng)滾屏處理

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

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

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

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

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

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

小結(jié)

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

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

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

源文件下載鏈接:

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

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

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