小程序分享（两种方法2024最新一键复制即可）

效果图：

简介

在开发 Uniapp 小程序时，添加分享功能是一个常见需求。两种方法是实现小程序分享的不同方式，但它们有不同的应用场景和要求。

第一种方法：

onShareAppMessage 和 onShareTimeline

说明

这种方法是微信小程序原生提供的分享功能，适用于分享给好友和分享到朋友圈。这种方法简单易用，不需要额外的配置和签名信息，直接在小程序的页面或组件中添加对应的配置即可。

代码（一键复制运行就可以看到效果）

export default {
  onShareAppMessage() {
    return {
      title: '(这里放置你要的标题)',
      path: '/pages/index/index',  //页面 path ，必须是以 / 开头的完整路径
      imageUrl: '图片',
    };
  },
  onShareTimeline() {
    return {
      title: '(这里放置你要的标题)',
      path: '/pages/index/index',  //页面 path ，必须是以 / 开头的完整路径
      imageUrl: '图片',
    };
  },
};

代码解析

onShareAppMessage：用于分享给好友或群聊时的配置。
onShareTimeline：用于分享到朋友圈时的配置。

第二种方法：

获取签名信息（微信 JS-SDK 分享）

说明

微信 JS-SDK 则适用于在微信浏览器中打开的网页。比如，你在微信公众号的文章中，或者用户点击某个链接打开的 H5 页面，这时候你想要实现分享功能，就需要使用微信 JS-SDK，并通过服务器端获取签名信息来配置和调用分享接口。

这种方法通常用于自定义分享功能，特别是当你需要在网页中使用微信 JS-SDK 进行分享时。微信 JS-SDK 需要通过签名来确保安全性，因此需要获取签名信息，包括 AppID、timestamp、nonceStr 和 signature。

代码

1、引入微信 JS-SDK：在你的页面中引入微信 JS-SDK。

2、获取签名信息：从服务器获取签名信息。这需要服务器端调用微信的接口来生成签名。

3.配置微信 JS-SDK：

wx.config({
  debug: true, // 开启调试模式
  appId: 'yourAppId', // 必填，公众号的唯一标识
  timestamp: 'yourTimestamp', // 必填，生成签名的时间戳
  nonceStr: 'yourNonceStr', // 必填，生成签名的随机串
  signature: 'yourSignature', // 必填，签名
  jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
});

4.调用分享接口：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  // 从服务器获取签名信息
  fetch('/get-signature')
    .then(response => response.json())
    .then(data => {
      wx.config({
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
      });

      wx.ready(function () {
        wx.onMenuShareAppMessage({
          title: 'title',
          desc: '描述信息',
          link: '链接',
          imgUrl: '图片URL',
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        });

        wx.onMenuShareTimeline({
          title: 'title',
          link: '链接',
          imgUrl: '图片URL',
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        });
      });
    });
</script>

使用场景：

微信公众号的文章或网页需要分享功能时，可以使用微信 JS-SDK。
需要在微信浏览器内打开的 H5 网页中进行分享操作。

区别与应用场景

原生分享（onShareAppMessage 和 onShareTimeline）：
- 简单快捷：直接在小程序中配置，无需服务器端签名。
- 功能限制：仅限于小程序内部的分享，无法自定义分享逻辑和样式。
- 场景：在微信小程序内，用户点击右上角的“转发”或“分享到朋友圈”按钮。
- 实现方式：使用小程序提供的 onShareAppMessage 和 onShareTimeline 方法。
微信 JS-SDK 分享：
- 更高的定制化：适用于在网页中使用微信的分享功能，支持更复杂的交互和逻辑。
- 需要服务器支持：需要服务器端生成签名，增加了开发复杂度。
- 安全性：通过签名确保分享操作的安全性。
- 场景：在微信浏览器中打开的网页，包括微信公众号文章和任何在微信内打开的 H5 页面。
- 实现方式：使用微信 JS-SDK，需要服务器端生成签名信息。

总结

如果你只是需要在小程序内部添加分享功能，并且不需要复杂的自定义逻辑，那么使用 onShareAppMessage 和 onShareTimeline 是最简单和推荐的方法。
如果你需要在网页中使用微信分享功能，或者需要自定义分享逻辑，那么你需要使用微信 JS-SDK 并获取签名信息。

根据你的具体需求选择适合的方法，如果只是简单的分享功能，建议使用第一种方法。如果需要复杂的定制化分享，那么考虑第二种方法。

最后补充

如果你希望在微信小程序的所有页面都实现分享功能（全局分享），可以通过以下方法实现。可以点开看我的下一篇文章

小程序分享（全局分享两种方式一键复制2024最新）-CSDN博客

扫描二维码关注公众号，回复： 17440762 查看本文章