小程序
取消
开发
中文
EN
取消
  • 组件

    • # store-product

    基础库 3.5.5 开始支持，低版本需做兼容处理。

    微信 鸿蒙 OS 版：支持

    相关文档: 微信小店指引

    渲染框架支持情况：WebView

    # 功能描述

    小程序内嵌微信小店商品，展示小店商品，并进行跳转交易。支持小店优选联盟带货跟佣功能。

    # 通用属性

    属性 类型 默认值 必填 说明 最低版本
    appid string 是 小店appid。获取方式：小店后台 - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID。 3.5.5
    product-id string 是 商品id。获取小店商品id，可以通过API获取(参考链接)或通过小店后台 - 商品管理 - 商品列表 - 规格/编码获取。 3.5.5
    product-promotion-link string 否 带货商品跟佣信息。若需要商品售卖时使用小店优选联盟带货跟佣功能，可以通过API获取带货商品跟佣信息(参考链接)。 3.5.5
    media-id string 否 媒体文件id。可以通过API获取(参考链接)。 3.7.1
    custom-style object 否 自定义样式。支持自定义的样式请查看custom-style。 3.7.1
    custom-content boolean false 否 开启自定义插槽。开启后可自行控制卡片内容。 3.7.2
    open-page string product-detail 否 设置点击打开的页面(同时开启 custom-content 属性后生效)。 3.7.4
    合法值 说明 最低版本
    product-detail 商品详情页 3.7.4
    gift-product-detail 送礼商品详情页 3.7.7
    buy 下单页 3.7.4
    logo-position string bottom-left 否 设置小店标识的位置，不允许隐藏(同时开启 custom-content 属性后生效)。 3.7.2
    合法值 说明
    bottom-left 左下方
    bottom-right 右下方
    bindentersuccess eventhandle 否 跳转小店成功的回调。 3.7.1
    bindentererror eventhandle 否 跳转小店失败的回调，event.detail={code,message}。 3.7.1

    # 自定义样式(custom-style)

    键名 说明 允许自定义的属性
    card 卡片样式 background-color
    title 标题样式 color
    price 价格样式 color
    buy-button 购买按钮样式 width、border-radius、color、background-color
    buy-button-disabled 购买按钮禁用态样式 width、border-radius、color、background-color

    # 自定义样式(custom-style)示例代码

    <store-product appid="xxx" product-id="xxx" custom-style="{{customStyle}}" />

    Page({
  data: {
    customStyle: {
      card: {
        'background-color': '#FAFAFA',
      },
      title: {
        color: 'rgba(0, 0, 0, 0.8)',
      },
      price: {
        color: '#FF6146'
      },
      'buy-button': {
        width: '100px',
        'border-radius': '30px',
        'background-color': 'rgba(0,0,0,0.9)',
        color: '#FFD48D',
      },
      'buy-button-disabled': {
        width: '100px',
        'border-radius': '30px',
        'background-color': 'rgba(0,0,0,0.9)',
        color: '#FFD48D',
      },
    },
  }
})

    # 使用自定义插槽(custom-content)示例代码

    <store-product appid="xxx" product-id="xxx" custom-content="{{true}}">
  <view>自定义卡片内容</view>
</store-product>

    # detail 对象

    属性名 类型 说明
    code Number 状态码
    message String 错误信息
    # code 有效值
    值 说明
    -1 系统失败，请重试
    0 成功
    10001 无效的media-id
    10002 无效的media-id
    10003 文件正在上传中，请等待
    10004 上传的文件存在风险，请重新上传
    20001 该商品因违规已下架
    60001 正在加载中
    60002 正在渲染中
    60004 加载异常
    60005 加载失败

    # Bug & Tip

    1. tip：请保持组件的小店标识内容完整展示。
    2. tip：参数 product-promotion-link、media-id 请在组件首次加载时传入，暂不支持在组件加载完成后调整参数
    3. tip：暂不支持在微信 Windows 版和微信 Mac 版的小程序上使用本组件。