欧美中文字幕第一页-欧美中文字幕一区-欧美中文字幕一区二区三区-欧美中文字幕在线-欧美中文字幕在线播放-欧美中文字幕在线视频

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

我是創(chuàng)始人李巖:很抱歉!給自己產(chǎn)品做個廣告,點(diǎn)擊進(jìn)來看看。  

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

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

二、事件處理

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)。

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

這樣默認(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)容。

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

繼續(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í)中~”。

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

自動回復(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。

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

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

中繼器的創(chuàng)新應(yīng)用:微信公眾號自動回復(fù)

當(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)載

隨意打賞

提交建議
微信掃一掃,分享給好友吧。
主站蜘蛛池模板: 天天干夜夜看 | 美女精品 | 久久国产欧美日韩精品 | 99国产超薄丝袜足j在线观看 | 久操中文在线 | 精品四虎免费观看国产高清午夜 | 免费久久精品视频 | 欧美在线视频a | 成人黄色在线 | 99涩涩| 久久精品视频亚洲 | 亚洲国产欧美视频 | 国产精品入口麻豆午夜 | 精品无码久久久久久国产 | 日韩h视频 | 中文字幕免费在线观看 | 亚洲国产综合精品 | 五月激情在线 | 欧美成人免费观看国产 | 4虎影院永久地址www | 豆国产97在线 | 亚洲 | 免费观看呢日本天堂视频 | 久久黄色影片 | 亚洲日本一区二区三区 | 日韩性大片免费 | 日本亚洲国产精品久久 | 午夜性福 | 免费一级特黄欧美大片久久网 | 国产精品美女自在线观看免费 | 国产免费美女视频 | 国产毛片在线 | 精品国免费一区二区三区 | 久久66热re国产毛片基地 | 久久精品在线播放 | 国产精品欧美亚洲区 | 日本一级毛片视频网站 | 色天使色婷婷丁香久久综合 | 国产精品2020在线看亚瑟 | 日韩手机看片 | 亚洲精品国产一区二区三 | 夜夜操夜夜骑 |