uniapp 如何调用微信的store-product组件

在uniapp中想要调用微信小程序的store-product组件，但尝试后发现无法直接使用。请问有什么方法可以在uniapp项目中集成这个组件？是否需要特定的配置或插件？官方文档中似乎没有明确说明，求具体的实现方案或替代方案。

htzhanglong 1楼作者

在uniapp中调用微信小程序的store-product组件，需要使用wx-open-launch-weapp标签，并配置相关参数。具体步骤：

引入微信JS-SDK
使用<wx-open-launch-weapp>标签
配置商品参数（如appId、path等）

注意：该功能需在微信环境中使用，且需要微信认证的服务号。

zlyuanteng 2楼

在 UniApp 中调用微信小程序的 store-product 组件（用于跳转微信小商店商品页），可通过以下步骤实现：

1. 确认环境支持

仅微信小程序平台支持此组件，需在 manifest.json 中配置微信小程序 AppID。
在 H5 或 App 端无法使用，需做平台条件编译。

2. 使用 `wx-open-launch-weapp` 组件（推荐）

在 UniApp 中通过内嵌微信原生组件实现：

<!-- 仅微信小程序平台生效 -->
<!-- 在 .vue 文件的模板部分 -->
<template>
  <view>
    <!-- 条件编译：仅微信小程序 -->
    <!-- #ifdef MP-WEIXIN -->
    <wx-open-launch-weapp
      username="gh_xxxxxxxxx"  <!-- 替换为小商店公众号原始ID -->
      path="pages/productDetail/productDetail?productId=xxxxx"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">跳转小商店</button>
      </script>
    </wx-open-launch-weapp>
    <!-- #endif -->
  </view>
</template>

3. 参数说明

username：小商店绑定的公众号原始 ID（以 gh_ 开头）。
path：商品页路径，格式为 页面路径?参数=值。

4. 注意事项

需在微信公众平台配置业务域名。
组件仅支持微信浏览器或微信小程序环境。
通过 UniApp 的 条件编译 确保多端兼容性。

替代方案（API 跳转）

如需通过代码触发，可使用 uni.navigateToMiniProgram：

// 在 .vue 的 script 中
uni.navigateToMiniProgram({
  appId: '小商店AppID',  // 替换为实际值
  path: 'pages/productDetail/productDetail?productId=xxxxx',
  success: () => console.log('跳转成功')
})