uni-app vue3 在组合式函数中无法使用"onShareAppMessage"等回调

uni-app vue3 在组合式函数中无法使用"onShareAppMessage"等回调

开发环境 版本号 项目创建方式
Windows Windows 10 22H2 HBuilderX

操作步骤：

结构如下：
--use
----share.js
--pages
----index
-------index.vue  

// share.js
import { onShareAppMessage } from '@dcloudio/uni-app';  

export function useShare() {  
    onShareAppMessage(({from, target, webViewUrl}) => {  
        console.log('onShareAppMessage', from);  
        return {path: 'pages/index/index'}  
    });  
}

// index.vue
<template>  
</template>  

<script setup>  
import { useShare } from '@/use/share.js';  

useShare();  
</script>  

<style scoped lang="scss">  
</style>

预期结果：

在用户分享页面后触发onShareAppMessage回调

实际结果：

onShareAppMessage无法触发，只有在index,js中导入onShareAppMessage，才能在share.js中触发onShareAppMessage

bug描述：

结构如下：
--use
----share.js
--pages
----index
-------index.vue  

// share.js
import { onShareAppMessage } from '@dcloudio/uni-app';  

export function useShare() {  
    onShareAppMessage(({from, target, webViewUrl}) => {  
        console.log('onShareAppMessage', from);  
        return {path: 'pages/index/index'}  
    });  
}

// index.vue
<template>  
</template>  

<script setup>  
import { useShare } from '@/use/share.js';  

useShare();  
</script>  

<style scoped lang="scss">  
</style>

以上代码在用户分享页面后无法触发“onShareAppMessage”回调


更多关于uni-app vue3 在组合式函数中无法使用"onShareAppMessage"等回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考 issue

更多关于uni-app vue3 在组合式函数中无法使用"onShareAppMessage"等回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这样做很麻烦，在vue3中使用组合式函数的本意是多个页面共用代码，结果还需要在引用组合式函数的页面中重复导入onShareAppMessage，我认为这是一个BUG

在 uni-app 中，onShareAppMessage 是微信小程序特有的生命周期函数，用于配置分享功能。在 Vue 3 的 Composition API 中，直接使用 onShareAppMessage 可能会遇到问题，因为它是一个页面生命周期钩子，而不是组件生命周期钩子。

要在 Composition API 中使用 onShareAppMessage，你可以通过以下方式来实现：

1. 在 setup 中使用 onMounted 钩子

你可以使用 onMounted 钩子来模拟 onShareAppMessage 的行为。不过，这种方式并不是直接使用 onShareAppMessage，而是通过 uni 提供的 API 来设置分享内容。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 使用 uni 的 API 设置分享内容
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })

  // 设置分享内容
  uni.onShareAppMessage(() => {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: 'https://example.com/image.png'
    }
  })
})
</script>

2. 使用 setup 中的 onLoad 钩子

在 uni-app 中，onLoad 是页面的生命周期钩子，你可以在 onLoad 中设置分享内容。

<script setup>
import { onLoad } from '[@dcloudio](/user/dcloudio)/uni-app'

onLoad(() => {
  // 设置分享内容
  uni.onShareAppMessage(() => {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: 'https://example.com/image.png'
    }
  })
})
</script>

3. 使用 setup 中的 onShow 钩子

如果你希望在页面显示时设置分享内容，可以使用 onShow 钩子。

<script setup>
import { onShow } from '[@dcloudio](/user/dcloudio)/uni-app'

onShow(() => {
  // 设置分享内容
  uni.onShareAppMessage(() => {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: 'https://example.com/image.png'
    }
  })
})
</script>

4. 直接使用 onShareAppMessage

如果你希望在 setup 中直接使用 onShareAppMessage，可以通过 uni 提供的 onShareAppMessage 方法来实现。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 直接使用 uni 的 onShareAppMessage 方法
  uni.onShareAppMessage(() => {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: 'https://example.com/image.png'
    }
  })
})
</script>

5. 使用 setup 中的 onShareAppMessage 钩子

在 uni-app 中，onShareAppMessage 是一个页面生命周期钩子，你可以在 setup 中直接使用它。

<script setup>
import { onShareAppMessage } from '[@dcloudio](/user/dcloudio)/uni-app'

onShareAppMessage(() => {
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: 'https://example.com/image.png'
  }
})
</script>
回到顶部