Axure RP 9和10如何在手机主屏幕上添加原型图标

目录
文章目录隐藏
  1. 先决条件
  2. 步骤

有同学提问:在 Axure RP 9 /10 中创建的原型演示地址,如何添加自定义图标到手机桌面。这是 RP 8 中的标准功能,不幸的是 Axure RP 9 /10 上被取消了。

好消息:利用 Axure Cloud 的插件功能我们可以很容易实现这个效果。

我们可以使用 JS 代码在原型的 <head> 中添加所需的图标图像链接,JS 代码会自动包含在每个原型中。

先决条件

  • 您需要将原型发布到官方 Axure Cloud
  • 您需要一个地方来托管您的图标图像,并且需要可以通过https访问(可以在本文评论中上传图标,备注一下是用作原型演示图标,我们就不会删除。)

步骤

1、登录您的 Axure Cloud 仪表板,然后转到您要为其添加图标的项目。

2、向项目添加“插件”

Axure RP 9 和 10 如何在手机主屏幕上添加原型图标

3、将插件设置为“bottom of <body>”

将插件设置为“bottom of <body>”

4、将以下代码/ javascript 添加到插件并将您的 url 修改为你自己的图标

<script>

(function($) {

$(document).ready(function() {

let url = 'https://cdn2.axureshop.com/wp-content/uploads/2018/05/starshop.png'; //<- 修改为你自己的图标地址,必须是 https

$('head', window.parent.document).append('<link rel="apple-touch-icon" sizes="128x128" href="'+url+'">');

$('link[rel="shortcut icon"]', window.parent.document).attr("href", url);

});

})(jQuery);

</script>

5、将插件包含到所有页面。

将插件包含到所有页面

现在,当您将原型添加到您的移动主屏幕时,您将看到一个您指定的漂亮图标!

如何添加到手机主屏幕?

复制你的演示地址,苹果手机用 Safari 浏览器打开,底部下方正中间的分享图标点开。找到【添加到主屏幕】就可以了。

如何添加到手机主屏幕?

如何添加到手机主屏幕?

注意,只在苹果手机上测试了。理论上来说在安卓手机上也是一样的,大家可以试一试。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Axure RP 9和10如何在手机主屏幕上添加原型图标

发表回复