編輯導(dǎo)語(yǔ)：在Axure中引用代碼，可以大大的提高我們的工作效率。今天，本文作者為大家講解了一個(gè)Axure高級(jí)教程：即做一個(gè)能在Axure中引用html、ccs、js等代碼的控件。希望看完本文能夠?qū)δ阌兴鶐椭瑲g迎大家在評(píng)論區(qū)討論交流。

今天要講高級(jí)一點(diǎn)的教程，如何在Axure中使用html、html5、ccs、javascript、jQuery、AJAX等代碼？

首先我簡(jiǎn)單的說(shuō)一下為什么要在Axure里面引用代碼呢？

舉個(gè)簡(jiǎn)單的例子：我們?cè)谧鑫恼戮庉嬈脚_(tái)的時(shí)候就需要用富文本編輯器，但是Axure里面就沒(méi)有這個(gè)元件，如果甲方爸爸要求我們做高保真原型的話(huà)，我們可能做上百個(gè)交互也未必能做出來(lái)。

這時(shí)候如果我們引用代碼的話(huà)，一分鐘就能搞定，反而提高了我們的效率。

講了這么多大道理，下面開(kāi)始教學(xué)了，本文將會(huì)以html5視頻代碼為案例展開(kāi)。

原型預(yù)覽地址：https://3hcsn9.axshare.com

一、材料準(zhǔn)備

這里Axure里面的原材料只需要一個(gè)矩形即可，當(dāng)然了還需要代碼，需要我們事先在網(wǎng)上找復(fù)制好代碼。

例如：我們這里需要做一個(gè)視頻播放器的元件，我們需要找到html5視頻的代碼，w3scool是一個(gè)很棒的網(wǎng)站，你們可以在里面找到你們需要的東西哈。

如上圖所示就是在網(wǎng)上找到的視頻播放器的代碼，我們可以在代碼編輯器里面試運(yùn)行一下看一下效果，如果效果符合心意的話(huà)我們就可以直接復(fù)制下來(lái)。

再講下一步之前，我們需要了解一下<video> 標(biāo)簽的屬性：

• autoplay是自動(dòng)播放，如果不自動(dòng)播放的話(huà)，可以刪掉；
• controls是視頻的控件，包括播放、停止按鈕、全屏、音量等，如果不需要的話(huà)，也可以刪掉；
• width和height是視頻播放器的寬度和高度，我們的材料里面只有一個(gè)矩形，所以我們只需要設(shè)定矩形的位置和尺寸，然后把矩形的寬和高填進(jìn)去即可；
• loop是循環(huán)播放，如果不需要的話(huà)，可以刪掉；
• preload是預(yù)加載，如果不需要預(yù)加載視頻的話(huà)，也可以閃電；
• src是指視頻的地址，可以是網(wǎng)絡(luò)的地址（如：https://www.1234.com/images/T1T78eXapfXXXXXXXX.mp4）；也可以是本地地址（如：file:///C:/Users/1234/Downloads/123.mp4）。這里要注意的是，如果是本地地址的話(huà)，需要發(fā)布生成html后才能預(yù)覽；
• post是指視頻的封面，同樣可以選擇圖片的網(wǎng)絡(luò)地址或本地地址，如果不需要封面的話(huà)同樣可以不填。

那基本的材料就準(zhǔn)備完成了。

二、復(fù)制代碼

• 將剛剛準(zhǔn)備好的代碼復(fù)制到矩形里面即可；
• 然后按需求填上寬度、高度、視頻url、是否自動(dòng)播放等等屬性；
• 給矩形命名，名字你們自定義即可，不過(guò)后面交互需要用到，本案例中矩形命名為code。

三、設(shè)置交互

• 基本邏輯：在矩形加載的時(shí)候，讓他執(zhí)行矩形里的代碼，讓矩形變成一個(gè)視頻播放器；
• 所以在矩形載入時(shí)：我用javascript執(zhí)行代碼，這里要注意的是data-label=code，code就是我們之前命名好矩形的名字。

四、預(yù)覽效果

制作完成后，我們可以看一下效果：

我們可以看到，矩形馬上變成了視頻播放器。

這里有的同學(xué)可能會(huì)說(shuō)，加載的時(shí)候，有半秒中顯示了原來(lái)的矩形，然后不想看出來(lái)怎么辦。其實(shí)作者覺(jué)得沒(méi)太大所謂，不過(guò)要做也非常簡(jiǎn)單，我們首先將矩形隱藏，然后在加載時(shí)加上一個(gè)等待1s的時(shí)間，再顯示矩形即可。

如果有需要的小伙伴可以自己加上去，作者就懶得加了。

五、制作元件庫(kù)

千萬(wàn)不要以為到這里就完了，記得把這個(gè)矩形放進(jìn)你的元件庫(kù)，下次的時(shí)候就可以直接用了。當(dāng)然了，為了提高效率，我們平時(shí)也要做好準(zhǔn)備。

這個(gè)矩形不僅僅是視頻播放器，你可以在里面填入對(duì)應(yīng)的代碼。

例如你填入的是音頻播放器的代碼，那么他就會(huì)變成音頻播放器，處理之外還包括、顏色選擇器、上傳按鈕、密碼輸入框、警告提示、輸入輸入框、時(shí)間日期選擇器、email輸入框、滑動(dòng)條控件、富文本編輯器、統(tǒng)計(jì)通標(biāo)等等。

所以我們?nèi)粘Ｒ龊梅e累，特別是和前端小姐姐打好關(guān)系，這樣子就能事半功倍了。

那到今天就分享到這里了，最后如果你喜歡我的原型教程的話(huà)，記得關(guān)注一下哈，謝謝大家。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。