微信小店現已全面打通小程序生態，為開發者提供強大的電商能力支持。本文將詳細介紹各項集成功能及代碼實現方案。

一、商品展示與交易能力

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跳轉
  },
});

五、參考鏈接

還有部分沒貼，可以進官網看對應的實現以及示例

• 微信小店學習中心
• 微信官方文檔開發能力