Axure變數函數就那麼簡單

大家好！我是海哥。歡迎閱讀學習《海哥交互行》精品課程。

本節課和大家一起分享axure的比較少用的一個部分變數與函數，為什麼說是一個比較少用的一個部分呢?因為它是一個需要演算法邏輯結構的，而針對於新設計師確實有一定難度的。那我們今天就以幾個在工作中比較常用到的幾個案例進行講解。

常用的第一個是搜索結果，我們會把一個搜索的值傳送的下一個頁面。第二個是我們用在輸入文字是，需要有文字輸入提示，也就是計算字數。第三個是輸入手機號，需要對位數分類。第四個就是控制跳轉頁面，我們需要選擇一個種類通過系統判斷以後，從而進入到該類型的一種操作。

變數與函數

在講變數與函數我會通過一個案例來說明什麼是變數，什麼是函數的。

變數-通過下面這個界面來說，大家可以把變數理解為一個抽屜，而這個抽屜是通過英文名字來存放這些信息。比如歌手的名字，歌曲的title，歌詞等，都是屬於抽屜裡面的東西，也就是數據。這種數據可以是字元串，也可以是英文字母。

函數-函數就比如我們需要播放音樂專輯的時候，底部的這些播放這些按鈕等操作。而函數也是有名字的，和變數一樣，最大的區別是函數有一個括符。有括符就代表是一個函數，這個函數裡面有一個動作，或者操作指令，這些指令會載入一些變數的數據。

我們需要理解axure的變數，我們需要從兩個維度去理解。第一個就是變數是自己帶有的，也就是系統變數。還是我們自己定義的變數也就是自定義變數。還有一個維度就是任何一個頁面都可以訪問的也就是全局變數。還是只存在於當前頁面訪問的也就是局部變數。

系統變數

系統變數就是一個系統自帶的變數，我們沒有辦法去改變這個變數。比如我們在案例所講的那樣，如何去獲取瀏覽器高度與寬度等。對象-內置的物件，類似於Windows、Cursor、This、Target，特點就是首個字母大寫。還有就是系統變數的屬性，而屬性就是物件的，一般來說我們用點號獲取。

自定義變數

首先自定義變數可以分為「局部變數」、和全局變數。全局變數就是任何一個頁面都可以訪問的到的一個值。局部變數只針對於當前頁面操作，而其它頁面是無法訪問的到。

變數名必須是字母數字，少於25個字元，並且不能包含空格。

函數

Axure中的函數是有括符的，設置函數參數時 字元串要用單引號括住，變數不需要。當然函數的使用種類也是特別的多，我就不每個去講了，我會把所有的函數列出來，大家多關注我的公眾號，會有詳細的函數使用方法列表。

下面我會用三個案例來向大家介紹變數函數，第一個就是把一個搜索得值傳送的下一個頁面中，因為這是一種跨頁面的方法，所以，會用到全局變數的方法。

首先我們在菜單欄中找到項目這個選項，在項目中找到全局變數。在這裡我不太建議大家使用默認的狀態變數，可以建一個屬於自己針對性項目名稱的變數，在這裡我們命名google。我們如何去實現呢，我們需要一個整體的思路，首先我們點擊搜索後，能夠獲取到搜索結果頁面，並需要獲取到輸入文本的狀態。噹噹滑鼠點擊搜索按鈕時，設置變數值，需要把數值給到google。設置局部變數值，並插入變數函數參數如下所示。

還需要就是就是跳轉頁面了，需要設置跳轉頁面到搜索結果。

我們還需要為搜索結果頁面設置變數。當頁面載入時，設置文本，設置文本值，插入變數值。

最後預覽一下效果。

第二個案例就是我們經常使用的文字輸入框對文字多少的限制，當文字輸入時，顯示文字剩餘的輸入字數。在這裡只存在兩種交互方式，一種是輸入文字，一種是文字字數發生變化。在文字剩餘多少時，這裡我們使用的文本輸入框，去掉描邊，並給與命名。需要我們到項目中去添加全局變數，並命名txtMum，這裡更具自己喜歡的命名方式。

接下來我們需要給上面的文本輸入框文本改變時，需要給全局變數設置變數值。變數的數值參考如下圖所示。

當輸入文字的時候，底部的字數提示也會反生變化。我們還需要在文本改變時，設置文本，設置變數值為值，並插入變數[[txtNum]]。

最後我們需要修改一下文字改變時的狀態,修改變數值為：你剩下：[[140-txtNum]]。

最後預覽一下效果是否完成。

第三個案例也是我們比較實用的一個案例。通過選擇性別，點擊跳轉到指定相關的頁面，這裡面需要用到條件判斷等操作。

首先我們在這裡需要把boy和girl兩個按鈕轉化為動態面板，並命名，然後添加兩個狀態分別是myBoy，myGirl。並分別通過複製的方法修改兩個狀態的選中狀態，然後為兩個狀態分別添加點擊交互事件，滑鼠單擊時，設置動態面板狀態,設置如下圖所示。

因為需要跨頁面操作，接下來我們需要給性別選擇添加全局變數，命名為boyGirl。

分別設置單擊時的全局變數。

上面我們已經設置完成變數和狀態了。下面我們需要做點擊下一步的頁面跳轉了，在這裡我們需要運用到條件判斷了。添加條件語句為：變數值 boyGirl==boy的時候，需要打開連接到男生頁面，類似的方法給女孩頁面也添加類似的條件語句。

最後預覽一下效果是否完成。