已更新更新时间：2025-07-17 14:40:15文档更新记录 >配置项检测工具收藏订阅更新我的文档设置接入检测（即可查看检测结果）若有未通过的接入检测项，接口将无法调通去登录返回文档商品详情页组件 是支付宝小程序平台推出的，针对 售卖类（实物）商品提供的商品详情信息展示商品的工具。接入 商品详情页组件 可以在公域活动和直播带货场景中，向用户提供统一的购物体验，提升用户购买商品的转化率。商家在商品管理中 创建商品 之后，使用商品详情页组件功能即可生成商品详情页。组件特色●投承一致：商品详情页组件可以展示多个平台的优惠活动，保障商品在公域和私域内展示的优惠和价格是一致的。●ui 统一：组件优化了 ui 样式，为用户提供统一的购物体验，能够更好地建立用户购物信任感。●性能提升：组件使用了预加载等技术优化方案，使得用户能更快打开商品详情页。●保持开放：平台可保证商品详情页中重要元素的公私域一致的同时，商家可自定义商品详情，自主开发定制。典型场景直播带货场景消费圈场景使用说明1在服务市场订购商品详情页组件。○商家请登录商家平台订购：。○服务商请登录服务商平台：。2若需了解会员积分加价购相关信息，请参考 。使用条件●商家已经有线上的小程序。●商家已经在支付宝平台创建商品并通过审核。●小程序已经支持完整的商品交易功能和交易链路。接入要求和规范●适用小程序类目：实物类目，更多开放类目还在逐步拓展中。●适用商家范围：小程序开发者为国内非个人主体（即企业、个体工商户）开发者。●适用标准：小程序需要在半年内无严重违规（包括但不限于违法犯罪、欺诈、无照经营、侵权、风险交易、销售禁售商品、销售不具备资质商品、假货等违规类型）。●已经拥有小程序的商家，可自行接入组件或在服务商的帮助下接入组件，没有小程序的商家，可以先申请注册小程序，在拥有小程序后，自行接入组件或在服务商的帮助下接入组件。●商品详情页信息会展示商户提报到商品库的商品要素，包括商品名称、商品头图、渠道价格、售价、原价、商品详情图片、商品 sku 等关键信息。商品提报可参考：，小程序商品创建接口。接入说明商品详情页主要由五个部分组成，包括商品主图，商品价格，商品名称，商品优惠和商品详情，其中前四个部分将展示商家提报的小程序商品信息。商家可以对商品详情页的 商品详情区 部分进行自定义设计，由商家来开发商品详情区的展示样式。 如上图所示，商品详情区需要商家自定义接入，商品详情区承载了两个能力：1商品详情信息的展示（通过传入自定义组件的方式）。2配置从商品详情页跳转商家小程序的下单页地址，详情可查看 配置下单页的地址。商家可参考 查看支持的自定义内容。使用须知●使用该组件前请完成 。●使用该组件前请上报至少一个商品。●支付宝客户端 10.1.85 及以上版本支持已使用分包的主体小程序应用组件。●不支持较早版本的 appid 为 8 位数字的小程序接入该组件。●静态加载仅支持一个小程序最多关联 10 个组件，动态加载无限制。●本地开发接入组件时，如果需要更新组件版本，需要到开放平台控制台进行操作才会生效，详情可查看 插件版本升级。●本组件使用了新版框架提供的能力，需设置小程序的最低基础库版本至2.8.9及以上。配置操作详情可查看 配置最低基础库版本。接入组件流程第一步：在小程序中声明使用组件请在小程序的 app.json 中声明：以上接入代码除了./components/detail-images/detail-images需要换成自己开发的组件之外，其它代码均无需改动，否则可能会导致展示失败。开发商品详情区组件的方法可以参考 第五步：开发商品详情区组件（可选）。如果不需要进行自定义，则只需要进行以下配置即可。第二步：配置下单页的地址从商品详情页中跳转到小程序的下单页，需要配置跳转的地址，如下图所示：开发者在需要小程序 onlaunch 的生命周期，通过调用 plugin.setplaceordercallback 设置 立即购买 跳转的逻辑。示例代码说明：该回调函数会影响到商详组件往下单页的跳转。“立即购买”回调参数点击 立即购买 后，可以通过回调函数的入参获取到如下信息。英文名称中文名称描述是否一定有值outitemid商品编码商家的商品 id是outskuid商品规格编码商家的商品规格 id否count数量当前购买的数量是注意：未提报 sku 信息的商品不会返回 outskuid，但建议不要根据 outskuid 是否为空来做业务处理，这可能会造成潜在的异常问题。第三步：联调商品详情区组件方法一（推荐）安装 ide，在 onload 中添加以下代码实现组件页面跳转，进行联调。注意：接入商品详情页组件需使用 3.6.1 及以上版本 ide，2.8.9 及以上版本基础库。点击下载方法二发布组件联调版本，然后通过 schema 跳转。第四步：发布小程序确认小程序接入商详页组件成功后，需要更新小程序版本，发布小程序后线上版本才会生效，可查看 小程序提审、发布与运营。上传小程序开发完成后，在小程序开发者工具项目页面，点击右上角 上传。上传成功的版本可以在开放平台小程序详情中查看到该版本，一个小程序可以同时拥有多个开发版本。提交审核选择需要提交审核的开发版本，点击右侧 提交审核，填写审核信息，审核将会在 2 个工作日完成。当前需要通过小程序准入审核、营销基本规范审核双重审核。如果审核失败请退回开发版本，修改相关信息后再次提交审核。提交审核后，等待平台审核通过，线上小程序就已经成功接入了商品详情页。第五步：开发商品详情区组件（可选）说明：如果不需要自定义商品详情组，商家组件将会默认采用商家提报的商品详情图，无需进行以下自定义开发。detail-images 是商品详情页的自定义组件，以下为小程序平台提供的基础版组件 demo，商家可以自行扩展。detail-images.axmldetail-images.jsondetail-images.acssdetail-images.js性能优化为了让用户更快的看到商品详情，建议接入插件的商家对自身小程序进行如下配置，以提升商品详情页加载性能。开启 lazycodeloading开启按需注入后，打开某个页面时，仅执行和该页面相关的页面脚本和自定义组件脚本，其它的则不会执行，详情可查看 app.json 应用配置。减少同步 jsapi 调用请尽量避免在以下情况中调用同步 jsapi：小程序全局： app.js 全局、page 全局等。小程序加载工程中执行相对较早的生命周期：比如 app.onlaunch、app.onshow、page.onload。非必要情况，请优化同步调用为异步调用。针对 my.getsysteminfosync 调用优化： getsysteminfosync 较为耗时，支付宝已经将其拆分为 多个子 jsapi，开发者可以按需获取。图片标签添加lazy-load 属性详情页图片较多，对于需要通过抽象节点自己定制页面内容的开发者，建议在 image 标签上添加lazy-load以实现图片懒加载。查看文档示例代码：附录“立即购买”回调参数说明为了兼容老版本接入方式，目前通过插件注册的“立即购买”回调函数 setplaceordercallback 可以获取到下表中的三种参数。英文名称中文名称描述是否一定有值outitemid商品编码商家的商品 id是outskuid商品规格编码商家的商品规格 id否count数量当前购买的数量是注意：新接入的小程序请务必使用以上三种参数进行逻辑判断，未出现在上表的参数后续将不再透出。uniapp 接入商品详情页插件的最佳方案现状官方商品详情页插件目前的接入方式是通过以下方式：上述方式在支付宝原生小程序中运行正常，能够保证插件 api 注册，但是对于 uniapp 编译过来的小程序会存在问题，因为 uniapp 的 onlaunch 和支付宝 onlaunch 不一致，这样注册会导致注册失败，因为插件还没有加载完成。uniapp 优化由于小程序插件的业务场景不适合使用动态加载插件（小程序不用在启动阶段就下载插件包，而是等到实际使用时，再下载插件包。）的方式，原因：不支持自定义组件，但是商品详情页组件需要。因此，考虑静态声明方式，但是需要保证插件加载完成后才能进行注册。按照现状注册可能会导致 uniapp 的 onlaunch 代码还未执行就跳到了插件的页面，因此需要把注册时机提前，原本支付宝的 onlaunch 能够保证这一件事，但是 uniapp 这边无法保障，因此只能在 uniapp 的实例之前直接注册。然后在 app.js 中通过引用懒加载模式的方式。
