uniapp 如何使用微信小程序的store-product插件

在uniapp中如何正确集成和使用微信小程序的store-product插件？我按照官方文档配置了插件信息，但在真机调试时始终无法正常显示商品页面，控制台也没有报错信息。具体问题是：1）是否需要额外配置uniapp的manifest.json文件？2）在vue页面中调用wx.getStoreProductInfo时需要注意哪些参数？3) 有没有完整的示例代码可以参考？求有经验的大佬分享解决方案。

2 回复

在uniapp中使用微信小程序的store-product插件，需要先在微信开发者工具中配置插件，然后在uniapp项目的manifest.json中添加插件声明。具体步骤：

  1. 在微信公众平台申请插件并获取appid
  2. 在manifest.json的mp-weixin节点下配置plugins
  3. 在页面中使用wx.navigateToMiniProgram跳转到商品页

注意：需真机调试，模拟器可能无法正常显示。


在 UniApp 中使用微信小程序的 store-product 插件，需通过微信小程序的插件机制实现。以下是详细步骤和示例代码：

步骤

  1. 申请插件权限
    在微信小程序后台（mp.weixin.qq.com）的“设置-第三方服务-插件管理”中添加 store-product 插件，获取插件的 provider 和 version。插件 ID 通常为 wx2d2c0889f6d1e6d7。

  2. 在 manifest.json 中声明插件
    在 UniApp 项目的 manifest.json 文件中配置插件信息：

    {
  "mp-weixin": {
    "plugins": {
      "storeProduct": {
        "version": "插件版本号", // 例如 "1.0.0"
        "provider": "wx2d2c0889f6d1e6d7"
      }
    }
  }
}

  3. 在页面中使用插件
    通过 <wx-store-product> 组件嵌入商品展示，需指定商品 ID。

示例代码

<template>
  <view>
    <!-- 使用微信小程序插件组件 -->
    <wx-store-product product-id="你的商品ID"></wx-store-product>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可动态绑定商品ID
      productId: "123456"
    };
  }
};
</script>

注意事项

  • 平台限制：仅支持微信小程序平台，H5 或 App 端无法使用。
  • 商品ID：需通过微信小程序后台的“交易组件”获取有效的商品 ID。
  • 调试：在微信开发者工具中需开启“调试模式”并确认插件已正确加载。

常见问题

  • 若插件未显示，检查 manifest.json 配置及插件版本是否正确。
  • 商品信息需在微信小程序后台提前配置并审核通过。

通过以上步骤即可在 UniApp 中集成微信小程序的商品展示功能。

回到顶部