store-product

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)

自定义样式(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 有效值

Bug & Tip

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