前言

微信小程序的分享功能可分为「右上角菜单分享」和「自定义按钮分享」，两种方式均需通过微信提供的 API 配置分享参数（如标题、图片、路径等）。

一、基础说明

分享功能依赖小程序的 onShareAppMessage、onShareTimeline 生命周期函数，用于定义分享的参数（标题、路径、图片等）。
无论哪种分享方式，最终都需要通过该函数返回分享配置，微信客户端会根据配置生成分享卡片。

1. 微信小程序原生API

• onShareAppMessage ：分享给朋友
• onShareTimeline：分享到朋友圈

2.Uniapp API

• onShareAppMessage ：分享给朋友
• onShareTimeline：分享到朋友圈

3.Taro API

• useShareAppMessage ：分享给朋友
• useTabItemTap：分享到朋友圈

4.注意

使用时如果发现没有生效，为页面配置 enableShareTimeline: true 或 enableShareAppMessage: true 后，修改配置文件后请重新编译项目

二、右上角菜单分享（默认分享）

用户点击小程序右上角「...」菜单中的「转发」按钮时触发，无需额外 UI 按钮，只需在页面中定义 onShareAppMessage 即可。如图：

这是电脑端端截图哈

1.页面结构（pages/detail/detail.wxml）

用户点击右上角「...」中的「转发」时触发，只需在页面的 .js 文件中定义 onShareAppMessage 函数即可。

<view class="container">
  <view>当前页面ID：{{pageId}}</view>
  <view>这是详情页内容</view>
</view>

2. 样式样式（pages/detail/detail.wxss）

.container {
  padding: 20rpx;
}

3. 逻辑处理（pages/detail/detail.js）

Page({
  data: {
    pageId: '123' // 假设当前页面的唯一标识
  },

  onLoad(options) {
    // 接收路由参数（如从列表页跳转过来的ID）
    if (options.id) {
      this.setData({
        pageId: options.id
      });
    }
  },

  /**
   * 右上角菜单分享配置
   * 当用户点击右上角「转发」时，会调用此函数
   */
  onShareAppMessage() {
    const { pageId } = this.data;
    return {
      title: '我发现了一个好内容', // 分享卡片标题（默认用小程序名称）
      path: `/pages/detail?id=${pageId}`, // 分享后打开的页面路径（必须以 / 开头）
      imageUrl: '/images/share-default.png', // 分享卡片图片（可选，建议500*400px）
      desc: '快来快来看看吧～' // 分享描述（部分场景显示）
    };
  }
});

三、自定义按钮分享

通过 <button> 组件设置 open-type="share" 触发，点击按钮时会调用 onShareAppMessage 函数，可根据按钮场景动态修改分享参数。

1. 页面结构（pages/detail/detail.wxml 新增按钮）

<view class="container">
  <view>当前页面ID：{{pageId}}</view>
  <view>这是详情页内容</view>
  
  <!-- 自定义分享按钮：必须设置 open-type="share" -->
  <button 
    open-type="share" 
    class="share-btn"
    data-source="button"  <!-- 用 data-* 传递参数，区分分享来源 -->
  >
    点击分享给好友
  </button>
</view>

2. 样式（pages/detail/detail.wxss 新增按钮样式）

.share-btn {
  margin-top: 30rpx;
  background-color: #07c160;
  color: white;
}

3. 逻辑处理（pages/detail/detail.js 优化 onShareAppMessage）

Page({
  data: {
    pageId: '123'
  },

  onLoad(options) {
    if (options.id) {
      this.setData({ pageId: options.id });
    }
  },

  /**
   * 自定义按钮分享 + 右上角菜单分享的统一处理
   * @param {Object} options - 分享触发信息（包含来源、按钮数据等）
   */
  onShareAppMessage(options) {
    const { pageId } = this.data;
    let shareConfig = {
      title: '默认分享标题',
      path: `/pages/detail?id=${pageId}`,
      imageUrl: '/images/share-default.png'
    };

    // 区分分享来源：按钮触发 vs 右上角菜单触发
    if (options.from === 'button') {
      // 按钮触发的分享（可通过 options.target.dataset 获取按钮上的参数）
      const source = options.target.dataset.source; // 拿到 data-source 的值
      shareConfig = {
        title: '按钮专属分享标题',
        path: `/pages/detail?id=${pageId}&from=shareBtn`, // 携带参数标记来源
        imageUrl: '/images/share-button.png' // 按钮分享用不同图片
      };
    } else if (options.from === 'menu') {
      // 右上角菜单触发的分享（可单独配置）
      shareConfig.title = '菜单分享标题';
    }

    return shareConfig;
  }
});

四、分享到朋友圈

通过 onShareTimeline 函数配置，支持用户从右上角菜单分享到朋友圈（以链接卡片形式展示）。

代码实现：

Page({
  // ... 其他代码省略 ...

  /**
   * 分享到朋友圈配置
   * 仅支持从右上角菜单的「分享到朋友圈」触发
   */
  onShareTimeline() {
    const { pageId } = this.data;
    return {
      title: '分享到朋友圈的标题', // 必填
      query: `id=${pageId}&from=timeline`, // 页面路径参数（类似 URL 中的查询字符串）
      imageUrl: '/images/share-timeline.png' // 建议尺寸 750*450px
    };
  }
});

五、关键说明

1.参数必填项

• title：分享标题（默认使用小程序名称）。
• path（onShareAppMessage）/ query（onShareTimeline）：分享后打开的页面路径及参数（必须包含必要参数，否则跳转后可能显示错误）。

2.分享图片建议：

• 优先使用自定义图片（imageUrl），避免微信自动截取页面导致的图片不完整。
• 分享图片建议使用网络图片（确保访问稳定）或本地图片（体积不宜过大）。
• 若未指定 imageUrl，微信会自动截取页面顶部 5:4 区域，可能导致图片内容不完整，建议自定义图片。
• 图片格式支持JPG/PNG，建议尺寸：普通分享 500 400px，朋友圈分享 750 450px。

3.动态控制分享：

可通过 wx.showShareMenu 和 wx.hideShareMenu 控制分享按钮是否显示：

// 允许分享（在 onLoad 中调用，如数据加载完成后）
wx.showShareMenu({
  withShareTicket: true, // 可选：获取分享凭证（用于统计）
  menus: ['shareAppMessage', 'shareTimeline'] // 支持的分享类型
});

// 禁止分享
wx.hideShareMenu();

4.分享结果回调：

可通过 onShareAppMessageSuccess 监听分享成功（部分微信版本支持）：

onShareAppMessageSuccess(res) {
  console.log('分享成功', res);
  // res.shareTickets 可用于统计分享到的群聊信息（需服务端配合解析）
}

六、总结

• 右上角分享：通过 onShareAppMessage 配置，无需额外按钮，适合默认分享场景。
• 按钮分享：通过 <button open-type="share"> 触发，可在 onShareAppMessage 中根据来源动态调整参数，适合引导用户分享。
• 朋友圈分享：通过 onShareTimeline 配置，仅支持右上角菜单触发，以链接形式展示。