uni-app vue3版本使用typescript + Composition API写法调用onShareAppMessage不能开启分享

uni-app vue3版本使用typescript + Composition API写法调用onShareAppMessage不能开启分享

示例代码：

<script lang="ts">  
export default defineComponent({  
    setup() {  
        onShareAppMessage(() => {  
            return {  
                title: 'abc',  
                path: '/pages/index/index'  
            }  
        })  
    },  
})  
</script>

操作步骤：

在使用typescript + defineComponent函数，在setup函数中调用 onShareAppMessage 无法开启分享

预期结果：

右上角分享按钮可点击

实际结果：

右上角分享按钮不可点击

bug描述：

vue3版本

使用Composition API+typescript 写法，在defineComponent的setup函数中执行onShareAppMessage,不能开启分享

使用Composition API+js写法, 在defineComponent的setup函数中执行onShareAppMessage可以开启分享

使用typescript +setup写法执行onShareAppMessage可以开启分享


| 信息类型           | 信息内容                                             |
|--------------------|------------------------------------------------------|
| 产品分类           | uniapp/小程序/微信                                   |
| PC开发环境操作系统 | Windows                                              |
| PC开发环境版本号   | 11                                                   |
| 第三方开发者工具   | 1.06.2504060 win32-x64                               |
| 基础库版本号       | 3.9.3                                                |
| 项目创建方式       | CLI                                                  |
| CLI版本号          | 3.0.0-4080720251210001                               |

更多关于uni-app vue3版本使用typescript + Composition API写法调用onShareAppMessage不能开启分享的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

该bug反馈内容基本完整但存在关键缺失。BUG描述清晰说明了问题现象及不同写法的差异对比，但未明确测试平台（微信小程序/App等）和HBuilderX具体版本号（仅提"正式版"）。代码示例缺少必要导入语句（应从@dcloudio/uni-app导入onShareAppMessage），且未说明是否启用script-setup插件。复现步骤过于简略，未提供测试环境细节（如真机/模拟器）。预期结果合理，但实际结果需结合平台特性判断。
经核查知识库，bug不成立。核心原因有二：

Vue3组合式API中onShareAppMessage需显式导入：import { onShareAppMessage } from ‘@dcloudio/uni-app’，用户代码缺失此导入导致TS类型检查失败（知识库依据）。
uni-app对Vue3组合式API有特殊处理，部分生命周期钩子命名已调整（如onShow→onPageShow），但分享API仍需按规范导入（分享API文档）。

用户反馈的"typescript+defineComponent写法失效"实为使用方式错误。正确方案：

方案一：使用<script setup lang="ts">语法并导入API
方案二：若坚持defineComponent，需添加导入语句且确保HBuilderX已配置TS插件（参考TypeScript支持说明）。 建议用户补充HBuilderX版本号及测试平台，并检查是否按规范导入API。 内容为 AI 生成，仅供参考

更多关于uni-app vue3版本使用typescript + Composition API写法调用onShareAppMessage不能开启分享的实战教程也可以访问 https://www.itying.com/category-93-b0.html


onShareAppMessage 要和 setup 在同一个层级，不要写到 setup 里面

但现在是ts不行，js可以。搞不懂啥原因

对比了一下js编译后代码和ts编译后代码， js编译后多了修改__runtimeHooks的代码(如图所示)。
ts的编译后代码中没有修改__runtimeHooks的这行代码;
手动在ts编译后代码中添加这行__runtimeHooks的修改后，即可正常分享

问题在于 TypeScript 环境下 onShareAppMessage 的类型推断。在 Composition API + TypeScript 组合中，onShareAppMessage 的返回值类型需要明确指定，否则 TypeScript 可能无法正确识别。

解决方案：

修改你的代码，为 onShareAppMessage 明确指定返回类型：

<script lang="ts">
import { defineComponent } from 'vue'
import { onShareAppMessage } from '[@dcloudio](/user/dcloudio)/uni-app'

export default defineComponent({
    setup() {
        onShareAppMessage(() => {
            return {
                title: 'abc',
                path: '/pages/index/index'
            } as UniApp.ShareAppMessageObject  // 关键：明确指定返回类型
        })
    },
})
</script>

或者使用更完整的类型定义：

<script lang="ts">
import { defineComponent } from 'vue'
import { onShareAppMessage } from '[@dcloudio](/user/dcloudio)/uni-app'

export default defineComponent({
    setup() {
        onShareAppMessage((): UniApp.ShareAppMessageObject => {
            return {
                title: 'abc',
                path: '/pages/index/index'
            }
        })
    },
})
</script>
回到顶部