成长中心
微信小店「小程序连接小店」功能指引
微信小店运营团队2025-01-22

一、 功能介绍

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

二、 现有能力

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

1.1 功能描述

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

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

1) 默认商品展示

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

基础库3.7.1支持:元素不可改变,但是可以修改背景颜色,文字颜色,卡片大小,按钮颜色和大小等。

2) 自定义商品展示

仅热招品牌且关联小店才能使用。
热招品牌查询地址:微信小店 - 成长中心

小程序关联小店指引:微信小店:微信小店「关联账号」使用指南

基础库3.7.2支持:除组件底部需要有小店标记外,其余部分可自定义。

自定义样式示例代码字段

卡片样式: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 开始,可将微信小店优惠券插入小程序页面。此功能对关联关系没有要求,所有小店的优惠券均可在任意小程序调用。

从基础库3.8.11开始,对于「机构推广券」类型优惠券支持带推客参数。

1)默认券组件

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

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

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

2)颜色自定义的券组件

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

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

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

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

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

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

d)券详情页,只有一个商品时,提供一个新样式(如下图)。

4)推客带参的机构推广券

a)从基础库3.8.11开始可用

b)支持传入推客参数“promoter-share-link”,对于「机构推广券」类型优惠券,通过该参数,支持推客染色。

c)通过获取某个券ID对应的小程序内嵌微信小店优惠券推广参数 | 微信开放文档接口,传入券id与推客appid(不传时生成只带机构参数的推广参数),可以获取到推广参数。

d) 染色场景 

(1)从小程序进券详情页 - 点击领券

(2)从小程序进券详情页 - 点击商品、点击店铺进店

(3)在小程序通过组件领券

e) 区分条件:该券是否已指定推客参数

(1)指定推客 id,所有交互行为都染色到该推客 。

(2)没有指定 id时,需要判断该用户是否是推客,如果是的话,将该券绑定至该推客。

5、小程序中展示小店礼物

5.1 功能描述

支持在小程序中内嵌小店礼物,领取小店礼物。

5.2 开发能力参考:store-gift | 微信开放文档|小程序送礼接口 | 微信开放文档

从基础库3.8.10开始,可将礼物组件插入小程序页面。此功能前置依赖小程序与小店做帐号关联并需要商家对指定的小程序创建一个礼物活动,做礼物配置。

a) 在微信小店后台-店铺管理-账号管理完成小程序帐号授权,选择帐号管理 - 小程序 - 去关联」。

小程序关联小店详情可查看:微信小店:微信小店「关联账号」使用指南

 

b)小程序送礼授权:设置可送的商品+份数,用于小程序礼物创建。

 

c)展示默认礼物组件

(1)获取小程序关联的小店。

(2)根据微信小店获取小店配置的礼物活动列表。

(3)根据活动id获取活动详情:有哪些商品sku、份数是多少。

(4)根据小程序需要(如直接发放,玩一个小游戏,前置条件小程序自己判断),输入活动id、商品id创建礼物订单 。

(5)传入礼物订单id和收礼人openid,展示礼物组件

(6)自定义礼物组件,在默认组件基础上,礼物组件的可以由小程序自定义礼物领取入口(即不展示默认礼物卡片样式做领取)和祝福语文本信息。组件宽度、内容暂不支持自定义。

 

d)展示礼物订单,根据小程序需要,通过查询列表&订单展示礼物订单信息。

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

6.1 功能描述

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

6.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,直播预约已过期

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

7.1 功能描述

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

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

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

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

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

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

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

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

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

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

8.1 功能描述

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

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

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

9、 定制信息传递

9.1 功能描述

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

9.2 开发能力参考:

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

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

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

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

10、 数据互通能力

10.1 功能描述

订单数据互通,依赖小店关联账号的订单数据打通。

10.2 能力参考:

(1)支持获取关联小店的订单:小程序可以调用API接口:获取合作店铺订单 | 微信开放文档获取带给关联小店的订单;

(2)支持店铺管理:小程序还可以使用小店列表、商品列表等接口:获取合作账号微信小店列表 | 微信开放文档对关联小店进行管理。

(3)支持订单通知:小程序关联小店后,通过小程序进入微信小店,下单成功后,微信小店会通过该接口订单通知 | 微信开放文档将这部分订单通知给对应的渠道小程序。

小程序关联小店详情可查看:微信小店:微信小店「关联账号」使用指南

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

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 开发能力参考:store-gift | 微信开放文档|小程序送礼接口 | 微信开放文档
6、 小程序中展示视频号直播
6.1 功能描述
6.2 开发能力参考:视频号直播 | 微信开放文档
7、 小程序展示视频号视频
7.1 功能描述
7.2 开发参考:小程序打开视频号视频 | 微信开放文档
8、 从APP跳转进入微信小店
8.1 功能描述
8.2 开发能力参考:获取商品的移动应用跳转scheme码 | 微信开放文档
9、 定制信息传递
9.1 功能描述
9.2 开发能力参考:
10、 数据互通能力
10.1 功能描述
10.2 能力参考:
三、 小程序跳转小店开发操作流程
相关内容
微信小店 - 成长中心
微信小店:微信小店「关联账号」使用指南
微信小店:微信小店「关联账号」使用指南
微信小店:微信小店「关联账号」使用指南
Copyright © 2018-2025 Tencent. All Rights Reserved.