多媒体组件

点击「组件」,选择「内置」-「多媒体」,即可使用墨刀的多媒体组件,为您的原型添加更加丰富的内容呈现形式。



轮播图组件

目前您可以直接使用该组件制作轮播图。轮播图支持设置圆角。



添加轮播图

从多媒体组件中拖出轮播图组件,在右侧设置面板中「轮播图图片」部分,鼠标悬浮于右下角「···」按按钮,可以选择从「本地上传」或者是从「素材库中」上传图片。

添加轮播图片数量:点击「轮播图图片」设置部分,最右侧的加号即可添加图片数量。

删除轮播图片:选择想要删除的图片,点击右下角的「···」按钮,选择「删除」。

调整轮播图片顺序:直接在缩略图处拖拽图片,即可调整轮播图顺序。



轮播图设置

滚动方向:选中轮播图组件后,右侧属性面板可以设置横向和纵向两种滚动模式,指示点自动归于恰当位置。



自动轮播/点击轮播:选择自动轮播,可以设置轮播的时间间隔。 您也可以选择点击轮播,点击缩略图上的小闪电图标,设置为:点击轮播图,跳转到其他页面或其他状态。

指示点及指示点颜色:选择是否显示指示点,及指示点的颜色。



为轮播图图片添加交互事件

选中轮播图组件,右侧外观栏内在相应图片上方点击小闪电标志添加交互事件,可以实现点击跳转页面或切换页面/组件状态





网页组件

您可以在多媒体组件中拖拽【网页组件】至画布,即可在原型中添加网页了。

注意:“网页”组件只能预览 https 协议、且允许嵌入外部网站的网页。


使用步骤

1.将网页组件拖拽进画布后,双击上方的网址输入栏,或是在右侧设置面板,输入您需要嵌入的https协议的网址。



2.根据原型的布局及网页具体情况调整组件大小。

3.点击「预览」,即可在原型项目中直接浏览网页了。支持滑动查看网页并进行点击操作。



实现效果

利用网页组件,您可以在原型中置入多样的内容。

例如您在墨刀制作的流程图、思维导图等,将分享时的链接粘贴至网页组件,即可在原型项目中直接查看。



还能够利用网页组件插入地图,具体操作请查看地图组件

:部分外部网站设有安全访问机制,会导致预览失败,您可以嵌入后,预览一下看下是否正常显示。




视频组件

视频组件可以帮助您快速嵌入视频。目前支持输入带有https协议的视频地址,支持腾讯/优酷/哔哩哔哩视频和MP4, WebM, OGG格式链接。

嵌入的视频可以设置自动播放、循环播放、静音播放和隐藏控制条。此类设置在运行时生效,但需要注意的是因网站限制,腾讯视频不支持播放项设置。


使用腾讯嵌入视频

1.打开你所需要置入的腾讯视频(推荐使用网页版),在播放界面的下方点击【分享】-【链接】



2.在墨刀内点击视频组件,右侧粘贴复制的链接



使用优酷嵌入视频

1.打开你所需要置入的优酷视频(推荐使用网页版),在播放界面的下方点击【分享】-【复制页面地址】



2.在墨刀内点击视频组件,右侧粘贴复制的链接



使用哔哩哔哩嵌入视频

1.打开你所需要置入的哔哩哔哩视频,在播放界面的下方点击【分享】-【复制视频地址】



2.在墨刀内点击视频组件,右侧粘贴复制的链接





音频组件

输入带有https协议的音频地址,支持 MP3、WAV、AAC、OGG 格式的链接。音频可以设置为自动播放、循环播放、换页继续播放、隐藏播放器。





二维码

二维码组件你可以把它当做一个二维码转换器,输入带有http/https的协议网址即可生成一个新的二维码。

还可以利用这个组件实现跳转其他墨刀项目,扫描二维码即可跳转到设置的某个已有页面。

二维码组件支持设置前景色和后景色,并且支持导出。





地图组件

目前内置的地图组件仅支持模拟地图样式,如果您有在原型中插入真实地图的需要,可以借助【网页组件】来实现效果。具体操作如下:


使用“腾讯地图”来添加地图

使用你的 QQ 号登录腾讯地图开放平台

(腾讯给每个用户分配了不同的key,所以不能直接复制本案例里或其它人给的url,需要登录自己的账号一步步按教程操作。)

在官网顶栏,点击「开发文档」,选择地图组件查看详情:





然后在地图组件页内会有一个「调用地址」部分会看到这样一个 URL:

http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀区复兴路32号院|coord:39.87803,116.19025;title:成都园;addr:北京市丰台区射击场路15号北京园博园|coord:39.88129,116.27062;title:老成都;addr:北京市丰台区岳各庄梅市口路西府景园六号楼底商|coord:39.9982,116.19015;title:北京园博园成都园;addr:北京市丰台区园博园内&key=YOUR_KEY&referer=myapp



将这个 URL 中的 http 替换为 https,然后将里面的地址替换为你想要展示的地址,然后进入墨刀,拖拽一个网页组件,将组件的 URL 设为上面的 URL 就可以了:

https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.9416682,116.393692;title:鼓楼;addr:北京市鼓楼东大街;&key=MY_MAP_KEY&referer=myapp

如果需要更复杂的功能,也可以根据腾讯地图文档实现更复杂的地图展示。



聊天气泡

聊天气泡组件在「组件-内置-多媒体组件」当中。

聊天气泡组件添加到页面画布后可以在外观设置面板中改变气泡指向的方向。



这篇文章帮助到你了吗?