微信小店现已全面打通小程序生态,为开发者提供强大的电商能力支持。本文将详细介绍各项集成功能及代码实现方案。
一、商品展示与交易能力
1. 商品卡片嵌入
javascript
// 基础商品卡片嵌入
<store-product product-id="123456" app-id="wx1234567890abcdef"></store-product>
// 自定义样式
<store-product
product-id="123456"
custom-style="{
card: { 'background-color': '#FAFAFA', 'border-radius': '8px' },
title: { 'color': '#333', 'font-weight': 'bold' },
price: { 'color': '#FF6146', 'font-size': '18px' }
}"
></store-product>
// uniapp-vue2 tips:使用了小店商品循环
<!-- #ifdef MP-WEIXIN -->
<store-product :appid="shop.shop_appid" :product-id="item.product_id" custom-content="true">
<view class="goods-img">
<image :src="item.pic" mode="aspectFill" />
</view>
<view class="goods-info">
<view class="goods-name">{{ item.name }}</view>
<view class="goods-price"><text class="goods-unit">¥</text>{{ item.market_price }}
</view>
<text
class="goods-pprice">预估优惠¥{{ (item.market_price - item.sell_price).toFixed(2) }}</text>
</view>
</store-product>
<!-- #endif -->
示例:
2. 半屏下单页
点击购买按钮自动唤起半屏下单页:
javascript
// 无需额外代码,组件内置交互逻辑
3. 优选联盟带货
javascript
// 获取带货商品详情
wx.request({
url: "https://api.weixin.qq.com/channels/ec/product/get",
data: {
product_id: "123456",
access_token: "YOUR_ACCESS_TOKEN",
},
success: (res) => {
const promotionLink = res.data.product_promotion_link;
// 使用推广链接嵌入商品
wx.navigateTo({
url: `/pages/product/detail?promotion_link=${encodeURIComponent(
promotionLink
)}`,
});
},
});
二、店铺运营功能
1. 店铺首页嵌入
javascript
// 在页面中嵌入小店首页
<store-home appid="wx1234567890abcdef"></store-home>
2. 订单管理
javascript
// 跳转订单详情页
wx.openStoreOrderDetail({
orderId: "ORDER123456789",
success: (res) => {
console.log("打开订单详情成功");
},
fail: (err) => {
console.error("打开订单详情失败", err);
},
});
3. 优惠券
javascript
// 嵌入优惠券组件
<store-coupon coupon-id="COUPON123" appid="wx1234567890abcdef"></store-coupon>
三、直播与视频集成
1. 视频号直播
javascript
// 获取直播信息
wx.getChannelsLiveInfo({
finderUsername: "finder_name",
success: (res) => {
if (res.liveStatus === 1) {
// 直播中
wx.openChannelsLive({
finderUsername: "finder_name",
feedId: res.feedId,
nonceId: res.nonceId,
});
}
},
});
// 预约直播
wx.reserveChannelsLive({
finderUsername: "finder_name",
success: (res) => {
console.log("预约状态:", res.state);
},
});
2. 视频号视频嵌入
javascript
// 嵌入视频号视频
<channel-video
finder-username="finder_name"
feed-id="FEED123456"
video-id="VIDEO123456"
></channel-video>;
// 跳转视频活动
wx.openChannelsActivity({
finderUsername: "finder_name",
feedId: "FEED123456",
videoId: "VIDEO123456",
});
// uniapp-vue2 还可以简单实现跳转视频之后计时进行奖励发放(省略其他逻辑)
uni.showModal({
title: "温馨提示",
content: "观看满15秒可获奖励",
confirmText: "继续观看",
success(res) {
if (res.confirm) {
uni.openChannelsActivity({
finderUserName: item.sph_id,
feedId: item.sph_video_id,
success: (res) => {
const timestamp = Date.now();
app.post(
"对应接口",
{
sid: item.sph_id,
vid: item.sph_video_id,
event: 0,
time1: timestamp,
},
function (result) {
const jumpInfo = {
sid: item.sph_id,
vid: item.sph_video_id,
event: 0,
timestamp,
};
uni.setStorageSync("videoJumpInfo", jumpInfo);
}
);
},
});
}
},
});
四、多端互通能力
1. APP 跳转小店
javascript
// 生成跳转Scheme
wx.request({
url: "https://api.weixin.qq.com/channels/ec/product/scheme/get?access_token=ACCESS_TOKEN",
method: "POST",
data: {
product_id: "324545",
from_appid: "APPID",
expire: 100,
},
success: (res) => {
const scheme = res.openlink; // 获取跳转链接
// 在APP中使用此scheme跳转
},
});
五、参考链接
还有部分没贴,可以进官网看对应的实现以及示例