uni-app 微信小店组件 store-product 接入指南商品展示与带货跟佣配置【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app导读本文围绕 uni-app 开源仓库中docs/component/store-product.md文档展开讲解微信小店商品展示组件store-product的跨端兼容性、完整属性配置与实战接入方法。读者将掌握在 uni-app x 项目中声明store-product组件、获取并绑定appid与product-id、启用小店优选联盟带货跟佣功能的具体方案并了解该组件在微信小程序平台的版本限制与已知问题。一、组件定位微信小店能力的一站式封装store-product是 uni-app x 组件体系中面向微信小店微信小店/视频号小店体系业务场景的专用组件用于在小程序页面内直接渲染指定店铺的指定商品卡片用户点击后即可跳转完成浏览与购买省去自建商品列表页与交易链路的成本。从源码仓库的组件文档索引 docs/component/_sidebar.md 可以看到store-product与store-home并列收录在组件文档目录中二者共同构成微信小店组件族store-home微信小店首页入口组件仅需绑定店铺appid即可渲染整个店铺首页store-product微信小店商品展示组件通过appidproduct-id精确指定某一商品。配套的还有store-coupon小店优惠券组件在 CHANGELOG.md 中可见其编译属性修复记录三者组合可覆盖“店铺入口、单品展示、优惠券发放”的完整带货闭环。二、兼容性矩阵当前仅微信小程序平台可用根据 docs/component/store-product.md 的兼容性说明该组件的跨端支持情况如下| Web | 微信小程序 | Android | iOS | HarmonyOS | | :- | :- | :- | :- | :- | | 不支持 | 4.41 起支持 | 不支持 | 不支持 | 不支持 |关键结论该组件是微信小程序平台专属能力Android、iOS、HarmonyOS 及 Web 端均标记为x不支持这与微信小店开放能力仅面向微信小程序生态的现状一致微信小程序侧自基础库 4.41 起可用。因此在使用前必须确认目标用户的基础库版本或在小程序后台合理设置最低基础库版本在 uni-app x 中若在非微信小程序平台使用该组件编译期或运行期不会生效需要配合条件编译#ifdef MP-WEIXIN将相关代码限定在微信小程序平台避免在其它端引入无效节点。三、属性详解三个配置项打通商品展示store-product组件共暴露 3 个属性均可在模板中静态声明或动态绑定。完整属性表如下依据 docs/component/store-product.md| 名称 | 类型 | 兼容性 | 描述 | | :- | :- | :- | :- | |appid| string | 微信小程序 4.41 起 | 小店 appid | |product-id| string | 微信小程序 4.41 起 | 商品 id | |product-promotion-link| string | 微信小程序 4.41 起 | 带货商品跟佣信息 |3.1 appid店铺身份标识appid表示当前要展示的微信小店店铺 ID。获取方式为小店后台 → 店铺管理 → 基础信息 → 账号信息 → 微信小店ID该值在整个小店组件族中通用store-home组件同样使用appid作为唯一店铺标识见 docs/component/store-home.md。从仓库变更记录看appid支持动态绑定uni-app 在 4.x 版本中曾专门修复了store-home组件动态绑定appid不生效的问题见 CHANGELOG.md因此推荐在实际项目中将appid作为响应式数据传入便于运营后台动态切换店铺。3.2 product-id商品定位符product-id用于精确指定店铺内某个商品。获取途径有两种接口获取通过微信小店开放能力 API 查询商品信息后台获取小店后台 → 商品管理 → 商品列表 → 规格/编码 中直接复制商品 id。3.3 product-promotion-link带货跟佣配置product-promotion-link为带货商品跟佣信息用于商品售卖时启用小店优选联盟带货跟佣功能。当商家希望通过达人带货、联盟分销模式售卖商品时可通过微信小店开放接口获取该信息并绑定到组件上若不需要跟佣则此属性可省略。四、实战接入完整示例与条件编译以下示例展示如何在 uni-app x 页面中使用store-product展示指定商品并通过动态数据绑定接入业务数据template view classstore-container !-- 微信小程序平台限定store-product 仅 MP-WEIXIN 支持 -- !-- #ifdef MP-WEIXIN -- store-product :appidshopAppId :product-idproductId :product-promotion-linkpromotionLink / !-- #endif -- !-- 其它平台降级方案展示普通商品卡片 -- !-- #ifndef MP-WEIXIN -- view classfallback-card text当前平台不支持微信小店组件/text /view !-- #endif -- /view /template script export default { data() { return { // 小店后台获取的店铺 ID shopAppId: wx1234567890abcdef, // 小店后台「商品管理 - 商品列表 - 规格/编码」获取的商品 ID productId: 10086, // 通过小店优选联盟 API 获取的跟佣信息无需带货时可留空 promotionLink: } } } /script接入要点静态声明若店铺与商品固定可直接写死appid与product-id如store-product appidwx1234567890abcdef product-id10086 /动态绑定商品 id 或店铺 id 随运营配置变化时务必使用:前缀做动态绑定。需要说明的是product-promotion-link中若包含 URL 编码字符同样建议通过数据绑定传入避免模板解析异常条件编译由于该组件仅微信小程序支持建议始终用#ifdef MP-WEIXIN包裹并为其它平台提供降级 UI保证多端构建产物一致可用基础库检测4.41 以下的微信基础库无法渲染该组件可在 App.vue 或入口逻辑中检测wx.getSystemInfoSync().SDKVersion并给出升级提示。五、从源码看组件落地编译层自定义节点支持从仓库的 CHANGELOG.md 可以追溯该组件的落地过程uni-app 曾专门修复“补充 store-home、store-product 自定义节点”的缺陷即在小程序编译阶段将组件正确编译为微信自定义节点native component。这说明store-product在 uni-app 编译链路中被当作自定义组件节点处理通过编译插件映射到微信小程序的store-product原生组件与该类组件相关的修复往往集中在编译属性传递环节如store-coupon曾出现“编译属性丢失”问题见 CHANGELOG.md。因此在使用时若发现属性未生效应优先检查编译产物的 wxml 节点属性是否完整再排查运行时绑定。可以推断这类“平台独占 属性透传”组件的实现模式为uni-app 编译期识别组件标签 → 保留属性映射 → 输出微信原生节点业务侧只需关注属性语义与数据来源即可。六、配合使用与小店组件族组合搭建带货页面单一商品展示往往不足以构成完整转化链路建议结合同族组件搭建页面| 场景 | 组件 | 关键属性 | | :- | :- | :- | | 店铺首页入口 |store-home|appid| | 单商品展示/购买 |store-product|appid、product-id、product-promotion-link| | 优惠券发放 |store-coupon| 店铺/优惠券相关配置 |例如首页用store-home承接店铺流量商详页用store-product完成单品成交配合store-coupon做拉新转化形成“进店 → 看品 → 领券 → 成交”的完整闭环。三者均限定微信小程序平台需统一遵循上文的条件编译与基础库版本策略。七、相关资源组件文档索引docs/component/_sidebar.md店铺首页组件docs/component/store-home.md仓库变更记录自定义节点、动态 appid 修复等CHANGELOG.md该组件与store-home的 API 差异store-product额外提供product-id与product-promotion-link两个商品维度属性两者共享appid店铺标识语义【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考