微信小程序onShareAppMessage 分享-生命周期函数 在vue3中 组合式函数 hooks中不生效

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函数名 才可以被正确识别,也是一个不大不小的坑,记录一下。

相关推荐
ngaiwe5 小时前
AA我来算小程序实践:把付款人、承担人和结算状态分开建模
微信小程序
FX1317887KP_11 小时前
KET口语Part 2看图对话怎么练?“观察—提问—回应”;三步法讲透
小程序·ket口语·pet口语·fce备考·剑桥英语
上线再说16 小时前
小程序图片处理从 2.9 秒到 420 毫秒:云函数冷启动的 5 个坑
微信小程序
沃达德软件16 小时前
智慧教育教学资源管理系统(PC端+微信小程序)
微信小程序·小程序
阿俊-全栈开发18 小时前
LikeShop 小程序商城首页可配置弹窗的设计与实现(Java + uni-app)
小程序·状态模式·likeshop·likeshop开源商城
考拉讲支付1 天前
延迟分账 / 核销分账的技术实现方案:服务完成后再分钱,到底怎么设计?
大数据·运维·人工智能·微信小程序·小程序·系统架构
Newway3212 天前
便利店小程序商城如何打通总部、门店与会员
小程序·小程序商城·会员运营·连锁便利店·门店订货·o2o系统
Strawberry962 天前
小程序视频播放官方方案
小程序
weixin_177297220692 天前
二手旧物回收小程序先要解决的不是下单,是“上门之后价格变了怎么办“
小程序·apache
青企通2 天前
电动车门店小程序:以旧换新估价、维修工单与电池档案的设计实现
小程序