本文作者與大家分享AXURE8.0是如何實(shí)現(xiàn)真實(shí)撥打電話，干貨滿滿，希望對(duì)你有幫助。

主要功能：實(shí)現(xiàn)撥號(hào)、刪除號(hào)碼、真實(shí)呼叫、判斷、全局變量……

難點(diǎn)：刪除電話號(hào)碼

重點(diǎn)：撥號(hào)功能：

tel：電話號(hào)碼

函數(shù)：字符截取函數(shù)，LVAR.substr(開始位置,截取長度)，this.name：獲取元件名稱

原型：

原型拆解：

1.全局界面

2.輸入號(hào)碼

命名：文本框命名為hm，主要接收按鍵按下的內(nèi)容；

3.按鍵

兩種制作方法：

1. 組合：將矩形+數(shù)字+字母組合到一起，方便寫交互
2. 編輯矩形：將按鍵制作成一個(gè)獨(dú)立元件，在矩形里輸入數(shù)字2，回車換行，再輸入字母ABC，然后調(diào)整字符大小即可

命名：以其具體數(shù)字或符號(hào)命名：如“1”號(hào)鍵命名1；“2”號(hào)鍵命名2；依此類推，“#”號(hào)鍵命名#。這樣我就可以通過[[this.name]],獲取到按鈕內(nèi)容；

交互：

1.數(shù)字按鍵交互—單擊時(shí)事件

• 需要完成的動(dòng)作：將按鍵內(nèi)容，輸入“輸入號(hào)碼”處（注意：電話號(hào)碼是以連接的格式進(jìn)行輸入，所以我們在輸入新的號(hào)碼時(shí)，先把“hm”框中的內(nèi)容獲取放在最前面）。
• 因此是“設(shè)置文本”動(dòng)作，如下：

2.刪除鍵交互—單擊時(shí)事件

• 需要完成的功能：每單擊一次從”hm”文本框中，將最后一位數(shù)字刪除
• 注意：每刪除一個(gè)數(shù)字后，還需要將新的字符串，放回hm文本框中，因此還是“設(shè)置文本”動(dòng)作
• 表達(dá)式解釋：[[LVAR1.substr(0,LVAR1.length-1)]]：將hm的值傳遞給局部變量LVAR1

每單擊一次，從hm文本框中進(jìn)行截取，0：表示從第一位開始截取，LVAR1.length-1：表示從hm文本框字符位數(shù)減1，為截取長度；

3.呼出鍵交互—單擊時(shí)

需要完成的動(dòng)作：呼出撥出的號(hào)碼。

打開鏈接—當(dāng)前窗口—鏈接到URL：tel:[[LVAR1]]。

[LVAR1]]：為hm傳遞的值。

這里加了一個(gè)判斷：如果hm文本框有內(nèi)容，說明有輸入電話號(hào)碼，單擊撥號(hào)呼出的是hm的內(nèi)容；如果hm文本框?yàn)榭?，則呼出的應(yīng)該是歷史呼出的第一個(gè)電話號(hào)碼，這里可以自字義一個(gè)；

4.歷史通話記錄交互

單擊歷史通話記錄，只需要執(zhí)行撥打當(dāng)前歷史記錄電話號(hào)碼即可：tel:xxxx……

5.當(dāng)直接按下?lián)芴?hào)鍵時(shí)，如果沒有撥號(hào)碼，這時(shí)呼出的電話就應(yīng)該是，歷史記錄中的第一條記錄，所以我需要判斷撥號(hào)鍵的交互；

• 先撥手機(jī)號(hào)+再單擊呼出鍵
• 直接單擊呼出鍵；

所有交互制作完成，即可預(yù)覽；

預(yù)覽地址：https://ijdnup.axshare.com

溫馨備注：mac電腦可以直接測試效果，或使用手機(jī)進(jìn)行預(yù)覽測試。

原型下載：鏈接:https://pan.baidu.com/s/13rKejhqkU7n6TBOdty1W-Q 密碼:0966

本文由 @松林放牛娃 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議