follow-swan 关注小程序组件

本功能支持最低基础库版本为 3.170.12 。因在开发者工具中无法获取关注态,建议使用真机调试。

解释:关注小程序 button 组件可帮助开发者实现用户对小程序的关注。用户通过本组件“关注小程序”后,可以在“百度 App - 我的”中找到我的小程序。设计文档详见:如何吸引用户关注

Web 态说明:Web 态采用降级方案支持,点击关注组件调起百度 App 。

注意

  1. 开发者可自定义使用组件的场景、样式等,但需符合一定规范,具体规范见下方使用规范
  2. 本功能暂未全量开放,需申请后接入,具体申请流程见下方申请流程,名额有限,先到先得。

属性说明

属性名类型默认值必填说明最低版本
sizeStringdefault组件大小3.170.12
typeStringprimary组件样式3.170.12

size 有效值

说明
default默认大小
normal大尺寸

type 有效值

说明
primary未关注时蓝色,关注后变成白色
default白色
opacity半透明黑色rgba(0, 0 , 0, 0.10)。基础库版本 3.240.2 起,新增该值,type 取该值时请确保基础库版本大于等于 3.230.x
none线性,背景色透明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

图片示例

follow-swan 关注小程序组件 - 图2

代码示例

  • SWAN
  • JS
  1. <view class="wrap">
  2. <view class="card-area">
  3. <view class="tip-strong">
  4. 该能力暂未全量开放,需申请后使用,且基础库 3.170.1 版本开始支持。
  5. </view>
  6. <view class="top-description border-bottom">
  7. 按钮样式
  8. </view>
  9. <form bindsubmit="addsubscribe" report-submit="true">
  10. <view class="button-box">
  11. <view class="button-box-inner" s-for="item in followData" >
  12. <follow-swan size="default" type="{{item.type}}"/>
  13. <text class="button-box-text">
  14. {{item.type}}
  15. </text>
  16. </view>
  17. </view>
  18. </form>
  19. </view>
  20. </view>
  1. Page({
  2. data: {
  3. followData: [
  4. {
  5. type: 'primary'
  6. },
  7. {
  8. type: 'default'
  9. },
  10. {
  11. type: 'opacity'
  12. },
  13. {
  14. type: 'none'
  15. }
  16. ]
  17. }
  18. });

申请流程

发送邮件至follow-test@baidu.com,邮件模板如下,百度侧收到邮件后,48 小时会完成审核并回复邮件。

申请邮件模板:

【标题】XXX(小程序名称)关注组件接入申请
【正文】需包括
1)小程序基本信息:名称 + APPID
2)预计接入位置:可附相关页面截图 / 描述路径,如放在支付完成后页面、放在文章底部
3)预计上线时间:
4)对接人联系方式(QQ 、手机号、微信均可)

使用规范

第一项【页面设计】规范

同一小程序单页面内不可设置多个关注组件按钮。
不可遮挡页面内容,不可设置浮窗悬浮于页面之上。
组件为按钮样式,支持颜色、圆角、字色修改, 但不可设置成特殊图形(如三角形 、六边形等)。

第二项【交互逻辑】规范

不可干扰用户正常使用小程序,如必须先关注才可继续浏览页面、进行下一步操作、使用小程序内的服务等。
不可出现违规作弊行为,如用户无感知情况下静默关注、点击关注按钮跳转至其他网页等。
如出现【页面设计】违规情况,将通知开发者下线组件三个工作日整改,三个工作日后如拒不整改将收回此组件功能权限,如出现【交互逻辑】 违规情况,一经巡查发现即刻永久禁封该组件功能权限,除以上使用规范外,开发者亦需遵循智能小程序平台运营规范,详情见:运营规范,并根据组件功能使用情况不断更新迭代。