在uni-app微信小程序中正确使用onShareAppMessage实现分享功能

问题背景

在uni-app开发微信小程序时，开发者经常需要实现分享功能。一个常见的问题是：虽然设置了带有open-type="share"的按钮，点击后能调出微信的分享界面，但分享内容却没有按照预期显示自定义的标题、图片和路径。

核心问题分析

这个问题通常出现在Vue 3的<script setup>语法中，主要原因是没有正确导入和使用onShareAppMessage生命周期钩子。在Vue 3的Composition API中，分享相关的生命周期钩子需要从uni-app的特殊模块中显式导入。

解决方案

1. 正确导入生命周期钩子

在Vue 3的<script setup>中，必须从@dcloudio/uni-app中显式导入onShareAppMessage：

import { onShareAppMessage } from '@dcloudio/uni-app'

2. 实现分享逻辑

分享逻辑应该直接定义在setup脚本中，而不是作为一个普通函数：

onShareAppMessage((res) => {
  if (res.from === 'button') {
    const shareId = uni.getStorageSync('shareId');
    return {
      title: "邀请好友，领现金红包",
      path: '/pages/auth/login?shareId=' + shareId,
      imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/[e-mail]',
      success(res) {
        console.log('转发成功', res);
      },
      fail(res) {
        console.log('转发失败', res);
      }
    }
  }
  return {
    path: "/pages/auth/login"
  };
})

3. 按钮设置

在模板中，确保按钮正确设置了open-type属性：

<button class="add-btn" open-type="share">邀请</button>

常见问题排查

1. 控制台没有输出：检查是否正确导入了onShareAppMessage，确保没有拼写错误
2. 分享内容不生效：确认返回的对象格式正确，包含必需的title、path等字段
3. 开发工具和真机差异：某些分享功能在开发者工具中表现可能不同，建议真机测试

最佳实践建议

1. 对于复杂的分享逻辑，可以考虑将分享内容配置提取到单独的文件中管理
2. 分享路径中的参数建议进行URL编码，避免特殊字符导致的问题
3. 分享图片建议使用CDN上的资源，确保加载速度和稳定性
4. 针对不同平台（微信、QQ等）可以设置不同的分享内容

通过以上方法，开发者可以轻松解决uni-app微信小程序中分享功能不触发的问题，实现自定义的分享体验。