抖音开放平台Logo
开发者文档
小程序
控制台
  • 行业插件介绍
  • 申请行业插件
  • 使用行业插件
  • 电商插件
  • 跳转引导
  • 导购成交
  • 通用查询
  • 会员运营
  • 电商组件
  • sku-button
  • product-follow-button
  • shop-follow-card
  • member-button
  • coupon-card
    • 基础库 3.43.0.0 开始支持本组件。
    商品规则选择按钮组件提供了商品规格选择的能力，并能在用户选择完之后进行下单或者加入购物车。

    前置条件

    在使用电商插件中的组件和 API 前，需要对行业插件有一个基本了解，可以参考文档：行业插件介绍，然后按照以下步骤及顺序使用电商插件中的能力：
      1.参考 电商小程序接入指南 完成小程序及资质的准备；
      2.参考 申请行业插件 完成插件的申请，注意只有小程序拥有电商类目资质才可见申请入口；
      3.参考 使用行业插件 进行能力的调用；
    行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。
    在使用组件时需要在页面 index.json 文件中进行引入。
    {
  "usingComponents": {
    "shop-follow-card": "tt95aee3130ae1cbe911://shop-follow-card"
  }
}
    Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。

    效果示例

    属性说明

    属性名
    类型
    默认值
    必填
    说明
    shop-id
    string
    --
    是
    店铺 ID
    hidden
    boolean
    false
    否
    卡片是否显示
    style
    string
    --
    否
    卡片內联 CSS 样式，可配置卡片圆角等
    class
    string
    --
    否
    卡片 CSS 样式类，可配置卡片圆角等
    bind:followed
    function
    --
    否
    店铺关注成功回调
    bind:unfollowed
    function
    --
    否
    店铺取消关注成功回调
    bind:error
    function
    --
    否
    组件发生错误回调

    代码示例

    <shop-follow-card
  shop-id="12345678"
  bind:followed="handleFollowed"
  bind:unfollowed="handleUnfollowed"
  bind:error="handleError"
></shop-follow-card>

    bind:followed 说明

      •当店铺关注成功时触发。
      •无参数。
      •使用场景例如当用户关注成功后给予一些优惠等。

    bind:unfollowed 说明

      •当店铺取消关注成功时触发。
      •无参数。

    bind:error 说明

      •当错误发生时触发。
      •错误原因可能为网络错误、业务错误等，具体错误内容见本文错误码说明。

    错误码说明

    errNo
    errMsg
    说明
    160701
    Fail to get follow state
    获取当前用户对指定店铺的关注状态失败
    160702
    App version to early
    当前抖音版本过早，用户需要升级至最新版本才可使用
    160703
    Not support to follow
    BC 关系校验失败
    160704
    Fail to follow
    关注失败
    160705
    Fail to unfollow
    取消关注失败

    代码示例

    function handleError(event) {
  const { errMsg, errNo } = event.detail;
}