成长中心
首页
平台公告
规则中心
学习中心
社区交流
首页 / 文章详情
微信小店「小程序连接小店」功能指引
微信小店运营团队2025-01-22

一、 功能介绍

微信小店现已支持多种连接小程序的能力,商家可以选择将微信小店的商品卡,商品首页,优惠券,带货直播间以及短视频等展示在小程序内,给小店商品和达人直播间带来更多的流量。

二、 现有能力

1、 小程序中展示小店商品

1.1 功能描述

小程序支持内嵌微信小店商品,展示小店商品,并进行跳转交易;同时支持小店优选联盟带货跟佣功能,小程序可嵌入带货者橱窗商品或者优选联盟带货机构商品。

1.2 开发能力参考:store-product | 微信开放文档

1) 整体规则

不限制小程序和小店的关系,均可以进行跳转。

2) 默认商品展示

元素不可改变,但是可以修改背景颜色,文字颜色,卡片大小,按钮颜色和大小等

3) 自定义商品展示

除组件底部需要有小店标记外,其余部分可自定义

自定义样式示例代码字段:

卡片样式:card: {'background-color': '#FAFAFA' }

标题样式:title: {color: 'rgba(0, 0, 0, 0.8)',}

价格样式: price: {color: '#FF6146'}

详情可查看store-product | 微信开放文档中自定义样式(custom-style)字段;

1.3 半屏拉起下单页

内嵌商品现已默认支持半屏拉起下单页面,内嵌商品后可以在点击组件购买按钮,默认拉起半屏下单页面;点击组件其他位置,半屏拉起商品详情。

1.4 支持优选联盟带货

内嵌商品同时支持嵌入带货者橱窗商品或者优选联盟带货机构商品;

优选联盟带货机构可通过该接口查询橱窗上团长商品详情:获取合作商品详情 | 微信开放文档

带货者橱窗商品可通过该接口获取推客商品的商品详情:获取合作商品详情 | 微信开放文档

通过上述接口中“product_promotion_link”参数在小程序跳转小店场景添加商品时传递跟佣信息。

2、 小程序中展示小店首页

2.1 功能描述

小程序支持内嵌微信小店首页,展示小店首页,并进行跳转交易;

2.2 开发能力参考:store-home | 微信开放文档

使用小程序开放能力组件将微信小店首页内嵌到小程序内,并且不限制小程序和小店的关系,均可以进行跳转。

3、 小程序中展示小店订单详情

3.1 功能描述

小程序内支持商家设置小店订单专区,在小程序内就可以查看小店订单并跳转订单详情页;

3.2 开发能力参考:wx.openStoreOrderDetail(Object object) | 微信开放文档

使用打开小店订单详情接口打开微信小店订单详情页,不限制小程序和小店的关系,均可以进行跳转,但是跳转时会有校验:

1)校验订单是否来自该小程序

2)校验订单是否属于该点击跳转的用户

3)校验订单是否属于目标小店

在小程序内置小店订单功能,在小程序内可以直接查看订单详情(图片仅供参考)

4、 小程序中展示小店优惠券

4.1 功能描述

支持小程序内嵌微信小店优惠券,展示小店优惠券,并进行跳转交易。

4.2 开发能力参考:store-coupon | 微信开放文档

从基础库 3.8.3 开始,可将微信小店优惠券插入小程序页面。此功能对关联关系没有要求,所有小店的优惠券均可在任意小程序调用。

1)默认券组件

a)传入小店 appid 和券 id 即可使用,组件宽度会根据屏幕自适应。

b)组件包括:优惠券信息和领取按钮。点“领取”会在小程序内完成领券,之后按钮变成“去使用”,点击打开优惠券详情页。

c)优惠券详情页会展示所有适用的商品,点击即可进入商品详情页。页面头部也可以直接访问店铺主页。

2)颜色自定义的券组件

a)在默认组件的基础上,可以自定义组件的宽度、所有文字的颜色、背景色,方便适配小程序页面的视觉风格。

b)不可以删除或增加页面元素,只能调整颜色。

3)跳转优惠券详情页的接口

a)此能力基础库3.8.5起可用。

b)不调用券组件,而是通过接口直接跳转优惠券详情页。举例:开发者在外层实现按钮“去领券”,用户点击后打开券详情页,自行完成券的领取和使用。

c)此能力只能打开详情页,不支持打开详情页并领券。

5、 小程序中展示视频号直播

5.1 功能描述

支持在小程序中展示视频号直播间,并且可以跳转到视频号直播间或在小程序内发起视频号直播预约。(需要小程序与视频号的主体相同或为关联主体)

5.2 开发能力参考:视频号直播 | 微信开放文档

1)小程序跳转视频号直播间:从基础库2.15.0开始支持

a)开发者首先通过wx.getChannelsLiveInfo(Object object) | 微信开放文档传入视频号id用于获取视频号直播信息,包括直播id(feedId与nonceId两个参数)与直播状态。

b)获取直播信息后,开发者可以通过wx.openChannelsLive(Object object) | 微信开放文档打开视频号直播。若当前未在直播,则会跳转到最近一场直播的结束页。该接口使用限制如下:

(1)需要用户触发跳转,若用户未点击小程序页面任意位置,则开发者将无法调用此接口。

(1)需要用户确认跳转,在跳转至视频号直播前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转视频号直播。

2)小程序内嵌视频号直播:从基础库2.29.0开始支持

a)开发者首先通过wx.getChannelsLiveInfo(Object object) | 微信开放文档传入视频号id和起止时间(startTime和endTime参数),用于获取指定时间段的视频号直播信息,包括直播id(feedId)、直播状态和直播回放状态。

b)获取直播信息后,开发者可以通过channel-live | 微信开放文档在小程序中展示直播封面,用户点击后可无弹窗直接跳转至视频号直播。不同的直播状态,跳转至视频号的承接页页有所不同,具体如下:

(1)直播未开始:上一场直播的结束页

(2)直播中:直播页面

(3)直播已结束(无回放):直播结束页

(4)直播已结束(有回放):直播回放页

3)小程序内发起预约视频号直播:从基础库2.19.0开始支持

a)开发者首先通过wx.getChannelsLiveNoticeInfo(Object object) | 微信开放文档传入视频号id用于获取视频号直播预告id(noticeId),若当前没有可预约的直播预告,将返回失败。

b)获取直播预告信息后,开发者可以通过wx.reserveChannelsLive(Object object) | 微信开放文档唤起预约弹窗,用户可以进行预约操作。成功唤起弹窗即为接口调用成功,通过state可以获取用户具体操作行为:

state = 1,正在直播中,用户点击“取消”拒绝前往直播

state = 2,正在直播中,用户点击“允许”前往直播

state = 3,预告已取消

state = 4,直播已结束

state = 5,用户此前未预约,在弹窗中未预约直播直接收起弹窗

state = 6,用户此前未预约,在弹窗中预约了直播

state = 7,用户此前已预约,在弹窗中取消了预约

state = 8,用户此前已预约,直接收起弹窗

state = 9,弹窗唤起前用户直接取消

state = 10,直播预约已过期

6、 小程序展示视频号视频

6.1 功能描述

小程序中支持内嵌视频号视频,并且可以跳转到视频号打开视频。

6.2 开发参考:小程序打开视频号视频 | 微信开放文档

1)跳转打开视频号视频:从基础库2.19.2开始支持

小程序可以通过wx.openChannelsActivity(Object object) | 微信开放文档接口跳转到指定视频号的视频页观看视频,无主体要求。

2)内嵌视频号视频:从基础库2.25.1开始支持

小程序可以通过channel-video | 微信开放文档组件在小程序中内嵌视频号视频,且支持无弹窗跳转打开视频号对应视频,使用该组件时需注意:

a)组件调用无资质要求;

b)暂不支持纯图片视频号内容;

c)基础库2.31.1之前,仅可引用和小程序同主体或关联主体的视频号视频,从基础库2.31.1开始,支持非个人主体小程序内嵌非同主体或关联主体的视频号视频。

7、 从APP跳转进入微信小店

7.1 功能描述

支持从移动应用跳转进入微信小店;

7.2 开发能力参考:获取商品的移动应用跳转scheme码 | 微信开放文档

将移动应用绑定到open平台后,可以调用接口微信开放文档获取微信小店的商品在移动应用中跳转scheme码;并支持在移动应用中点击商品组件一键跳转到微信小店购买商品或者赠送给好友。

8、 定制信息传递

8.1 功能描述

支持小程序定制,上传定制文件后,小店获取文件内容,然后下载并履约;

8.2 开发能力参考:

1)用户前往小程序,对商品进行定制,定制后,调用上传资料接口,获取定制文件media_id;

2)小程序调用小店商品卡,并且在用户下单的时候,将media_id塞入商品卡参数中store-product | 微信开放文档

3)小店商家获得订单,并且通过获取文件下载链接 | 微信开放文档将订单中的media_id文件下载下来;

4)小店完成商品的定制和履约。

9、 数据互通能力

9.1 功能描述

订单数据互通,依赖小店合作账号的订单数据打通;

9.2 开发能力参考:

1)前提:小店在PC后台 > 店铺管理 > 账号管理 > 合作账号中邀请对应小程序成为合作账号。

2)规则:一个小程序可以绑定无数个小店的合作账号,一个小店可以绑定100个小程序账号。

3)小程序调用API接口获取带给合作小店的订单获取合作店铺订单

4)小程序还可以使用小店列表、商品列表等接口对合作小店进行管理。

三、 小程序跳转小店开发操作流程

1)获取小店APPID,可以通过小店商家获取(小店后台 - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID);

2)获取小店商品id,可以通过小店商家获取 获取商品 | 微信开放文档

3)若需要商品售卖时使用小店优选联盟带货跟佣功能,还需要获取带货商品跟佣信息 获取橱窗商品详情 | 微信开放文档

4)在小程序中引入小店首页或小店商品卡片/链接以及小店优惠券实现跳转能力。

(1)小程序内嵌小店首页 store-home | 微信开放文档

(2)小程序内嵌小店商品 store-product | 微信开放文档

(3)小程序内嵌小店优惠券store-coupon | 微信开放文档

5)通过open平台,连接小程序和小店的用户id。

功能描述:若想把订单等接口里的买家openid/unionid和自己小程序/小店/公众号的openid/unionid打通,可以通过open平台绑定后完成。

将:公众号、小程序、小店联盟带货机构的appid都绑定到开放平台后台即可。

注意:小店联盟带货机构需要和开放平台主体相同。

深圳市腾讯计算机系统有限公司

一、 功能介绍
二、 现有能力
1、小程序中展示小店商品
1.1 功能描述
1.2 开发能力参考:store-product | 微信开放文档
1.3 半屏拉起下单页
1.4 支持优选联盟带货
2、 小程序中展示小店首页
2.1 功能描述
2.2 开发能力参考:store-home | 微信开放文档
3、 小程序中展示小店订单详情
3.1 功能描述
3.2 开发能力参考:wx.openStoreOrderDetail(Object object) | 微信开放文档
4、 小程序中展示小店优惠券
4.1 功能描述
4.2 开发能力参考:store-coupon | 微信开放文档
5、 小程序中展示视频号直播
5.1 功能描述
5.2 开发能力参考:视频号直播 | 微信开放文档
6、 小程序展示视频号视频
6.1 功能描述
6.2 开发参考:小程序打开视频号视频 | 微信开放文档
7、 从APP跳转进入微信小店
7.1 功能描述
7.2 开发能力参考:获取商品的移动应用跳转scheme码 | 微信开放文档
8、 定制信息传递
8.1 功能描述
8.2 开发能力参考:
9、 数据互通能力
9.1 功能描述
9.2 开发能力参考:
三、 小程序跳转小店开发操作流程
Copyright © 2018-2025 Tencent. All Rights Reserved.