深入理解 uni-app 页面生命周期（四）onShareAppMessage

onShareAppMessage 是 uni-app 页面生命周期函数之一，用于处理用户点击右上角分享按钮时的逻辑。通过在页面的 methods 中定义 onShareAppMessage 方法，你可以定制分享的内容和行为。

以下是详细解释 onShareAppMessage 的用法：

定义 onShareAppMessage

在页面的 page.js 文件中，通过在 methods 对象中定义 onShareAppMessage 方法来处理分享逻辑。

// 在页面的 page.js 文件中

export default {
  data() {
    return {
      shareTitle: '分享标题',
      sharePath: '/pages/index/index', // 分享路径
    };
  },
  methods: {
    onShareAppMessage() {
      return {
        title: this.shareTitle,
        path: this.sharePath,
        // 可选，设置分享图片
        imageUrl: 'https://example.com/share-image.jpg',
      };
    },
    // 其他方法
  },
  // 其他生命周期函数和配置项
};

在上述代码中，onShareAppMessage 方法返回一个对象，该对象包含了分享的标题 (title)、分享的路径 (path) 以及可选的分享图片 (imageUrl)。

在模板中触发分享

在模板中，可以通过 button 或其他元素触发分享，例如

<!-- 在页面的模板中 -->

<template>
  <view>
    <button @tap="share">分享给好友</button>
  </view>
</template>

注意事项

• 如果不定义 onShareAppMessage 方法，点击分享按钮默认会使用全局分享设置（可在 App.vue 中配置）。
• 分享路径 (path) 通常是一个页面的路径，但也可以包含参数，以便在被分享者进入小程序后，通过 options.query 获取参数。

// 示例中分享路径包含参数
sharePath: '/pages/index/index?utm_source=share',

分享图片 (imageUrl) 可以是本地路径或远程路径，建议使用绝对路径。图片需小于 128 KB，且长宽比接近 5:4。