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

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

一、商品展示与交易能力

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

五、参考链接

还有部分没贴，可以进官网看对应的实现以及示例

• 微信小店学习中心
• 微信官方文档开发能力