小程序收藏

收藏组件的不同样式

收藏组件目前可选择接入两种样式：

样式一(type为normal)

样式二(type为tips)

不同样式的使用场景

样式介绍

• 样式一：收藏组件显示在小程序内容之上，位于页面顶部，撑开页面内容，组件底色自适应Titlebar底色，上滑操作时，组件内容不透出，下滑回到顶部，组件透出。
• 样式二：收藏组件悬浮于小程序内容上，组件距离底部高度开发可调整，组件底色为深色透明色不可修改，用户在配置收藏组件页面停留3秒后，组件弹出，无关闭或收藏操作不隐藏。

样式选择建议

1.若小程序Titlebar底色透明，沉浸式整图，只可选择样式二的组件。2.若商户小程序已接入生活号关注组件，则建议使用样式二，否则双组件页面对于用户而言不够友好。3.若小程序页面内顶部底部有重要按钮、功能模块等，要求组件对下方内容不进行遮挡，建议使用样式二。4.样式一不遮挡小程序内容，对于用户而言，侵入性更低，体验更加温和友好。5.样式一为目前主流接入组件形式，目前用户接受度更高，教育成本低。

组件收藏小程序，会有两种预期提示方式：

• 1.点击收藏小程序，直接toast告知收藏结果。
• 2.点击收藏小程序，有弹窗提示，动图提示收藏成功，收藏位置在首页下拉小程序收藏内。
  方式一：

方式二：

​

组件接入

前置条件

本组件的展示有版本的限制（小程序基础库版本1.9.1开始提供），版本兼容性可以通过调用下面的方法以判别是否能展示收藏组件。本组件目前只支持真机调试。

my.canIUse('favorite')

示例代码

标准写法如下：

<favorite>收藏小程序，下次使用更方便</favorite>

API列表

normal为组件方式一，tips为组件方式二。

产品说明

• 收藏组件展示位固定在小程序页面顶部，组件背景色可根据页面颜色自适应背景色和字体色。
• 组件展示前已判断用户对该小程序的收藏状态，若用户已收藏该小程序，则组件则不会展示。
• 收藏组件中的文案可根据业务需要进行修改设置。
• iOS版本用户，如用户的小程序收藏入口不在支付宝首页，会弹出浮层引导用户将收藏入口（小程序收藏）添加到首页；已添加到首页的用户不出现浮层引导。
• 小程序基础库从1.9.1版本开始支持；引导浮层仅支持1.10.4版本及以上。

Q&A

问题1：测试的时候，为什么收藏组件不出现了？回答：1）收藏组件的出现有统一的疲劳度控制，若用户点击关闭收藏组件后，3天内不再出现收藏组件2）用户最多可能有3次关闭组件行为，即用户有一次关闭组件，后续组件显示中，如果再被关闭第二次、第三次时，永远不再对该用户显示收藏组件；若要处理该情况，可以重新安装客户端包。 当用户点击收藏，效果等同于关闭。举例，当前页面点击收藏，组件消失，此页面立刻取消收藏，组件不弹出，因上次关闭组件时间为几秒前，不符合展示组件的要求。

问题2：提示方式一和方式二的逻辑是？回答：1）55版本后，用户进行收藏行为时，前三次使用方案二引导，但如过程中用户点击下次不再提示，则再不使用方案二。2）其他情况使用方案一提示。

原文: https://docs.alipay.com/mini/component/component-favorite