今天要講高階一點的教程，如何在Axure中使用html、html5、css、javascript、jQuery、AJAX等程式碼？

首先我簡單的說一下為什麼要在Axure裡面引用程式碼呢？

舉個簡單的例子：我們在做文章編輯平臺的時候就需要用富文字編輯器，但是Axure裡面就沒有這個元件，如果甲方爸爸要求我們做高保真原型的話，我們可能做上百個互動也未必能做出來。

這時候如果我們引用程式碼的話，一分鐘就能搞定，反而提高了我們的效率。

講了這麼多大道理，下面開始教學了，本文將會以html5視訊程式碼為案例展開。

原型預覽及下載地址：https://axhub.im/ax9/dbdf76c154a81ed4/#g=1

一、材料準備

這裡Axure裡面的原材料只需要一個矩形即可，當然了還需要程式碼，需要我們事先在網上找複製好程式碼。

例如：我們這裡需要做一個視訊播放器的元件，我們需要找到html5視訊的程式碼，w3scool是一個很棒的網站，你們可以在裡面找到你們需要的東西哈。

如上圖所示就是在網上找到的視訊播放器的程式碼，我們可以在程式碼編輯器裡面試執行一下看一下效果，如果效果符合心意的話我們就可以直接複製下來。

再講下一步之前，我們需要了解一下<video> 標籤的屬性：

• autoplay是自動播放，如果不自動播放的話，可以刪掉；

• controls是視訊的控制元件，包括播放、停止按鈕、全屏、音量等，如果不需要的話，也可以刪掉；

• width和height是視訊播放器的寬度和高度，我們的材料裡面只有一個矩形，所以我們只需要設定矩形的位置和尺寸，然後把矩形的寬和高填進去即可；

• loop是迴圈播放，如果不需要的話，可以刪掉；

• preload是預載入，如果不需要預載入視訊的話，也可以閃電；

• src是指視訊的地址，可以是網路的地址（如：https://www.1234.com/images/T1T78eXapfXXXXXXXX.mp4）；也可以是本地地址（如：file:///C:/Users/1234/Downloads/123.mp4）。這裡要注意的是，如果是本地地址的話，需要釋出生成html後才能預覽；

• post是指視訊的封面，同樣可以選擇圖片的網路地址或本地地址，如果不需要封面的話同樣可以不填。

那基本的材料就準備完成了。

二、複製程式碼

• 將剛剛準備好的程式碼複製到矩形裡面即可；

• 然後按需求填上寬度、高度、視訊url、是否自動播放等等屬性；

• 給矩形命名，名字你們自定義即可，不過後面交互需要用到，本案例中矩形命名為code。

三、設定互動

• 基本邏輯：在矩形載入的時候，讓他執行矩形裡的程式碼，讓矩形變成一個視訊播放器；

• 所以在矩形載入時：我用javascript執行程式碼，這裡要注意的是data-label=code，code就是我們之前命名好矩形的名字。

四、預覽效果

製作完成後，我們可以看一下效果：

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

這裡有的同學可能會說，載入的時候，有半秒中顯示了原來的矩形，然後不想看出來怎麼辦。其實作者覺得沒太大所謂，不過要做也非常簡單，我們首先將矩形隱藏，然後在載入時加上一個等待1s的時間，再顯示矩形即可。

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

五、製作元件庫

千萬不要以為到這裡就完了，記得把這個矩形放進你的元件庫，下次的時候就可以直接用了。當然了，為了提高效率，我們平時也要做好準備。

這個矩形不僅僅是視訊播放器，你可以在裡面填入對應的程式碼。

例如你填入的是音訊播放器的程式碼，那麼他就會變成音訊播放器，處理之外還包括、顏色選擇器、上傳按鈕、密碼輸入框、警告提示、輸入輸入框、時間日期選擇器、email輸入框、滑動條控制元件、富文字編輯器、統計通標等等。

所以我們日常要做好積累，特別是和前端小姐姐打好關係，這樣子就能事半功倍了。

那到今天就分享到這裡了，最後如果你喜歡我的原型教程的話，記得關注一下哈，謝謝大家。