onShareAppMessage是微信小程序比较常用的分享功能函数,今天我想着写到hooks里面,这样更方便调用和维护,分享一下错误写法跟正确写法;
错误写法
1、直接将share给return出去
javascript
import { onShareAppMessage } from "@dcloudio/uni-app";
interface ShareOptions {
title?: string;
path?: string;
imageUrl?: string;
}
export function useShareView() {
const share = ({ title = '商城', path = '/pages/index/index', imageUrl = '' }: ShareOptions = {}) => {
onShareAppMessage(() => {
return {
title,
path,
imageUrl,
};
});
}
return share
}
2、跟onLoad等其他生命周期一样,直接调用一下onShareAppMessage函数
TypeScript
import { onShareAppMessage } from "@dcloudio/uni-app";
interface ShareOptions {
title?: string;
path?: string;
imageUrl?: string;
}
export function useShareView({ title = '商城', path = '/pages/index/index', imageUrl = '' }: ShareOptions = {}) {
onShareAppMessage(() => {
return {
title,
path,
imageUrl,
};
});
}
我觉得两种办法都没错,但是都不可以,我就去找文档和社区记录,想着可能是uni自己的坑,不允许onShareAppMessage这个api这样调用,但是onLoad等生命周期都可以通过组合示函数被使用,我找到了一个uni-app的bug修复记录;
社区记录 这个bug已经被修复,而且已经很早了,那么只能是用法的原因,我只能尝试其他办法,可能是这个onShareAppMessage这个api比较特殊,它不只是生命周期,还具有页面分享的配置。

3、正确用法,onShareAppMessage函数名称的特殊性
最后我把share又赋值给onShareAppMessage这个名称,这个api可以正确被注册和使用了。
TypeScript
import { onShareAppMessage } from "@dcloudio/uni-app";
interface ShareOptions {
title?: string;
path?: string;
imageUrl?: string;
}
export function useShareView() {
const share = ({ title = '商城', path = '/pages/index/index', imageUrl = '' }: ShareOptions = {}) => {
onShareAppMessage(() => {
return {
title,
path,
imageUrl,
};
});
}
return { onShareAppMessage: share }
}
还有一个小心得记录,我传参习惯了使用解构的方式,这样多参数传参不用去按顺序传参,更方便;今天看ai写,它这样写,也实现了同样的传参功能,还是第一次见;自从用ai以来,很少时间去看新的一些特性,也不知道是新特性 还是我没关注过,哈哈,也记录一下。
TypeScript
function share(
options: {
title?: string
path?: NavPageName
imageUrl?: string
} = {}
) {
onShareAppMessage(() => options)
}
总结(ai都没解决的问题):我使用gpt5.3-codex模型,ai也没有正确解决这个问题
还是因为onShareAppMessage这个生命周期的特殊性,必须使用onShareAppMessage函数名 才可以被正确识别,也是一个不大不小的坑,记录一下。