Axure高级教程：做一个能在Axure中引用html、ccs、js等代码的控件
今天要讲高级一点的教程，如何在Axure中使用html、html5、ccs、javascript、jQuery、AJAX等代码？
首先我简单的说一下为什么要在Axure里面引用代码呢？
举个简单的例子：我们在做文章编辑平台的时候就需要用富文本编辑器，但是Axure里面就没有这个元件，如果甲方爸爸要求我们做高保真原型的话，我们可能做上百个交互也未必能做出来。
这时候如果我们引用代码的话，一分钟就能搞定，反而提高了我们的效率。
讲了这么多大道理，下面开始教学了，本文将会以html5视频代码为案例展开。
原型预览地址：https://3hcsn9.axshare.com
一、材料准备
这里Axure里面的原材料只需要一个矩形即可，当然了还需要代码，需要我们事先在网上找复制好代码。
例如：我们这里需要做一个视频播放器的元件，我们需要找到html5视频的代码，w3scool是一个很棒的网站，你们可以在里面找到你们需要的东西哈。
如上图所示就是在网上找到的视频播放器的代码，我们可以在代码编辑器里面试运行一下看一下效果，如果效果符合心意的话我们就可以直接复制下来。
再讲下一步之前，我们需要了解一下
- 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输入框、滑动条控件、富文本编辑器、统计通标等等。
所以我们日常要做好积累，特别是和前端小姐姐打好关系，这样子就能事半功倍了。
那到今天就分享到这里了，最后如果你喜欢我的原型教程的话，记得关注一下哈，谢谢大家。
本文作者 @做产品但不是经理 。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
