今天給大家送上模擬微信系列第二篇，我們使用簡單的函數組合來達到我們想要的顯示效果，只要懂得其原理，我們就可以使用axure提供的函數做更多的效果。另外，我們展示使用更多的交互來滿足微信消息列表消息的變化效果。
效果圖
第一，我們注意消息列表後邊的消息變化，顯示的時間是HH：MM，正常我們使用Axure自帶的函數是沒法顯示小時：分鐘這樣的時間效果的，因此我們使用小技巧，函數組合來實現更滿足微信效果的時間顯示方式。
第二，我們做一個小細節，讓每次收到新消息或者發送新消息的時候，在微信列表上都能看到最新的一條消息。
製作原理
我們知道，在使用axure函數的時候，需要將函數用[[]]框起來，而我們的案例是將兩個函數用[[]]框起來後，中間使用其他的符號連接起來。另外，我們接上一篇文章，我們點擊發送btn的時候，把消息帶到消息列表的位置，以滿足更細緻的交互需求。
本案例其實比較簡單，下邊就直接講操作步驟吧。（感覺相對熟練的鐵子們已經會了，哈哈）
操作步驟：函數組合
在發送btn處增加一個交互，設置文本，讓顯示時間的位置顯示文本[[Now.getHours()]]:[[Now.getMinutes()]]，一個是獲取當前時間的小時數，一個是獲取當前時間的分鐘數，中間用冒號連接，這樣顯示的效果就成了HH：MM這樣的效果，更符合微信現有的顯示方式。
本案例中，我們頁面中有兩個微信列表，那麼就需要注意，點擊任意一個發送按鈕的時候，需要將時間帶到兩個微信列表的時間位置。（本案例中還增加了每次發完消息，消息輸入框自動清空和無法發送空白消息的交互，大家可以自行研究）
操作步驟：消息列表
在發送btn處，點擊發送，每次都把發送的消息內容帶到微信消息列表對應的位置即可，帶文字的方式也很簡單，只要一個局部變量即可，這一步驟在之前的很多案例中都有提到。
總結一下，局部變量就是在這一個交互裡面設置的變量，該變量只對這一個交互負責，一般使用局部變量來記元件文字，元件選中狀態等居多，我們下邊直接展示交互即可。
同樣需要注意，我們案例中有兩個微信列表，我們在設置交互的時候需要考慮兩個用戶的微信列表同步變化，因此在設置文字的時候需要分別選擇兩個用戶微信列表的對應的元件。
結語
每一期的原型都會保留之前的交互，因此只要下載最新一期的原型即可涵蓋之前設置的交互，下載連結：
密碼：rxlg
溫馨提示：該文件需要使用Axure 9打開哦。
本文由 @王得宇AIPM 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議