uniapp小程序中如何使用<store-product class="footer-btn1" :appid="state.goodsin">组件

在uniapp开发小程序时，使用<store-product class="footer-btn1" :appid="state.goodsin">组件没有效果，控制台也没有报错。请问这个组件的正确用法是什么？需要引入什么依赖或配置吗？appid参数应该传什么格式的值？

2 回复

在uniapp中使用<store-product>组件前，需先在pages.json中引入微信小程序的store-product原生组件：

{
  "usingComponents": {
    "store-product": "plugin://wx2b03c6e691cd7370/components/store-product/store-product"
  }
}

然后在页面中直接使用：

<store-product class="footer-btn1" :appid="state.goodsin"></store-product>

注意：该组件仅支持微信小程序平台。


在 UniApp 小程序中，<store-product> 组件用于在小程序中跳转到指定小程序的商品详情页。以下是使用方法：

基本使用

  1. 引入组件：在 pages.json 中配置组件（如使用 easycom 模式可自动引入）。
  2. 传递参数：通过 appid 属性指定目标小程序的 AppID，goods-id 或 product-id 指定商品 ID。

示例代码

<template>
  <view>
    <store-product 
      class="footer-btn1" 
      :appid="state.goodsin" 
      goods-id="商品ID"
      @error="handleError"
    >
      点击跳转商品
    </store-product>
  </view>
</template>

<script>
export default {
  data() {
    return {
      state: {
        goodsin: '目标小程序的AppID' // 例如：'wx1234567890abcdef'
      }
    };
  },
  methods: {
    handleError(e) {
      console.error('跳转失败:', e.detail);
    }
  }
};
</script>

注意事项

  • 参数说明：
    • appid：目标小程序的 AppID（必需）。
    • goods-id 或 product-id：商品 ID（根据目标小程序要求选择）。
  • 事件：可监听 @error 事件处理跳转失败。
  • 权限：确保当前小程序已关联目标小程序。
  • 样式：通过 class 或 style 自定义按钮样式。

常见问题

  • 若无法跳转，请检查 AppID 和商品 ID 是否正确，并确认目标小程序是否存在该商品。

通过以上配置即可实现商品页跳转功能。

回到顶部