uniapp 微信小程序 分页页面传商品id 其他人通过分享进入获取id 代码示例

UniApp 是一种基于 Vue.js 的跨平台框架，它支持快速构建微信小程序、H5应用以及支付宝小程序等。如果你想在 UniApp 中实现分页页面传递商品ID，并通过分享功能让其他人通过链接获取该ID，你可以按照以下步骤操作：

1. 首先，在展示商品列表的分页组件中，将每个商品的ID作为数据属性绑定，并在点击分页按钮时将当前页的商品ID通过URL查询参数的形式加入到分享链接中。

<template>
  <view v-for="(item, index) in goodsList" :key="index">
    <!-- 商品内容 -->
    <button @click="shareWithId(item.id)">分享</button>
  </view>

  <uni-share></uni-share>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [], // 这里假设已经有一个包含商品ID的数组
    };
  },
  methods: {
    shareWithId(id) {
      const currentPageId = id; // 获取当前商品的ID
      const link = `/pages/details?id=${currentPageId}`;
      this.$wxShareTimeline({
        title: '查看商品详情',
        path: link,
      });
    },
  }
}
</script>

2. 在`uni-share`组件中，`$wxShareTimeline`是微信小程序提供的分享API，用于生成长图文类型的分享。在这个例子中，我们将生成一个指向详细商品页面的链接，包含商品ID。

3. 接收分享页面（如详情页）需要从URL中解析并获取ID：

<template>
  <view>
    <text>商品ID: {{ $route.query.id }}</text> <!-- 通过$route.query.id访问URL参数 -->
  </view>
</template>

<script>
import { Route } from '@dcloudio/uni-app';
Page({
  onLoad() {
    this.init();
  },
  async init() {
    const id = this.$route.query.id;
    if (id) {
      // 使用获取到的ID做相应处理，例如查询商品详情
    }
  },
});
</script>