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商城
20 条回复 A文章作者 M管理员
  1. 愉快的心情

    感谢楼主,原型测试。

  2. lilian1111222

    感谢楼主,原型测试:

  3. 红色棉花糖

    谢谢楼主,原型测试

  4. 18621775819

    原型2222

  5. 18621775819

    原型

  6. 孟田田田田

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

  7. 轻轨青瓜

    测试使用

  8. czx321

    原型

  9. yumeiki

    测试用

  10. Merry

    享瘦测试用

  11. 47啊

    111

  12. ?108324

    支持

  13. 迎鑫

    lihailihai

  14. NanJn

    ?

  15. NanJn

    zan

  16. 彭大仙

    干货

  17. 坦

    很棒呀

  18. mark102765

    ????

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