uniapp 如何使用store-product实现功能？

在uni-app中如何使用store-product组件实现商品展示功能？具体需要引入哪些依赖，组件的基本用法和配置参数有哪些？能否提供一个简单的代码示例？

2 回复

在uniapp中，使用store-product组件实现商品展示功能。需在pages.json中配置"navigationStyle": “custom”，并引入组件：

<store-product
  :product-id="productId"
  @success="onSuccess"
  @fail="onFail"
></store-product>

通过product-id绑定商品ID，监听success和fail事件处理结果。注意该组件仅支持微信小程序平台。


在 UniApp 中，store-product 组件用于在小程序中展示商品，并支持用户跳转到商品详情页或购买页。以下是基本使用方法：

1. 引入组件

在页面的 vue 文件中引入 store-product 组件（仅小程序平台有效）：

<template>
  <view>
    <store-product :product-id="productId" @success="onSuccess"></store-product>
  </view>
</template>

2. 配置参数

  • product-id：商品 ID（必填），通过电商平台获取。
  • 其他可选参数如 custom-style 用于自定义样式。

3. 事件处理

  • @success：用户成功跳转商品页时触发。 示例代码：
<script>
export default {
  data() {
    return {
      productId: '123456' // 替换为实际商品ID
    }
  },
  methods: {
    onSuccess(e) {
      console.log('跳转成功', e.detail)
    }
  }
}
</script>

4. 注意事项

  • 仅支持微信小程序、百度小程序等平台，H5 无效。
  • 商品 ID 需通过对应平台的电商接口获取（如微信小程序的商品库）。
  • 测试时请使用真机预览，开发者工具可能无法正常跳转。

完整示例

<template>
  <view class="container">
    <store-product 
      :product-id="productId" 
      custom-style="width:100%;height:300px"
      @success="handleSuccess">
    </store-product>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '你的商品ID'
    }
  },
  methods: {
    handleSuccess(detail) {
      uni.showToast({ title: '跳转成功' })
    }
  }
}
</script>

确保在对应小程序后台配置商品库并获取有效商品 ID。

回到顶部