axure商城

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

有同学提问:在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>”

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

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、将插件包含到所有页面。

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

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

如何添加到手机主屏幕?

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

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

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

 

给TA打赏
共{{data.count}}人
人已打赏
高级教程

MAC安装Axure后打开提示:“Axure RP 9.app已损坏,无法打开。”的解决办法

2021-6-7 14:40:55

产品经理高级教程

【产品设计】云服务产品维护方案(二)

2021-7-8 12:21:03

axure商城
16 条回复 A文章作者 M管理员
  1. 18621775819

    原型2222

  2. 18621775819

    原型

  3. 孟田田田田

    原型测试图标,谢谢楼主!!!

  4. 轻轨青瓜

    测试使用

  5. czx321

    原型

  6. yumeiki

    测试用

  7. Merry

    享瘦测试用

  8. 47啊

    111

  9. ?108324

    支持

  10. 迎鑫

    lihailihai

  11. NanJn

    ?

  12. NanJn

    zan

  13. 彭大仙

    干货

  14. 坦

    很棒呀

  15. mark102765

    ????

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索