uniapp vue3 onshareappmessage 如何实现自定义分享功能

在uniapp的vue3项目中，如何通过onshareappmessage实现自定义分享功能？比如我想修改分享的标题、图片和路径，但在vue3的setup语法里试了几种写法都不生效。官方文档只提到vue2的用法，请问正确的实现方式是什么？需要引入特定API还是写法上有特殊要求？

2 回复

在uniapp的Vue3中，使用onShareAppMessage实现自定义分享：

  1. 在页面中定义：
onShareAppMessage() {
  return {
    title: '自定义标题',
    path: '/pages/index/index',
    imageUrl: '/static/share.jpg'
  }
}
  1. 或使用setup语法：
import { onShareAppMessage } from '@dcloudio/uni-app'

onShareAppMessage(() => {
  return {
    title: '分享标题',
    path: '/pages/index/index'
  }
})

可自定义标题、路径和图片。


在 UniApp 的 Vue 3 中，onShareAppMessage 用于自定义小程序分享功能。以下是实现步骤和示例代码：

实现方法

  1. 在页面中定义 onShareAppMessage 生命周期钩子（仅支持页面级，不支持组件）。
  2. 返回一个对象，配置分享标题、路径、图片等参数。

示例代码

<script setup>
import { onShareAppMessage } from '@dcloudio/uni-app'

// 定义分享配置
onShareAppMessage(() => {
  return {
    title: '自定义分享标题', // 分享标题
    path: '/pages/index/index', // 分享页面路径，通常为当前页面
    imageUrl: '', // 可选，分享图片的 URL（留空使用页面截图）
  }
})
</script>

参数说明

  • title：分享标题（必填）。
  • path：分享页面路径，需以 / 开头（必填）。
  • imageUrl：分享图片，支持本地或网络图片（可选）。

动态自定义分享内容

若需根据页面状态动态设置分享内容，可在 onShareAppMessage 中访问响应式数据：

<script setup>
import { ref, onShareAppMessage } from '@dcloudio/uni-app'

const shareTitle = ref('动态标题')

onShareAppMessage(() => {
  return {
    title: shareTitle.value,
    path: '/pages/detail/detail?id=123'
  }
})
</script>

注意事项

  • 仅页面支持 onShareAppMessage，组件中无效。
  • 微信小程序中需触发分享按钮（如 <button open-type="share">）或右上角菜单。
  • 路径 path 可携带参数，方便分享后跳转时获取数据。

通过以上方法即可灵活实现自定义分享功能。

回到顶部