微信小店与微信小程序简单集成指南

技术分享 9个月前 (07-04) 0 999+

微信小店现已全面打通小程序生态，为开发者提供强大的电商能力支持。本文将详细介绍各项集成功能及代码实现方案。

一、商品展示与交易能力

1. 商品卡片嵌入

// 基础商品卡片嵌入 <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. 半屏下单页

点击购买按钮自动唤起半屏下单页：

// 无需额外代码，组件内置交互逻辑

3. 优选联盟带货

// 获取带货商品详情 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. 店铺首页嵌入

// 在页面中嵌入小店首页 <store-home appid="wx1234567890abcdef"></store-home>

2. 订单管理

// 跳转订单详情页 wx.openStoreOrderDetail({   orderId: "ORDER123456789",   success: (res) => {     console.log("打开订单详情成功");   },   fail: (err) => {     console.error("打开订单详情失败", err);   }, });

3. 优惠券

// 嵌入优惠券组件 <store-coupon coupon-id="COUPON123" appid="wx1234567890abcdef"></store-coupon>

三、直播与视频集成

1. 视频号直播

// 获取直播信息 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. 视频号视频嵌入

// 嵌入视频号视频 <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 跳转小店

// 生成跳转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跳转   }, });