使用了script setup语法糖后，无法设置全局的分享onShareAppMessage了

分类：uni-app

常规的用法
<script setup lang="ts">
import { onShareAppMessage } from "@dcloudio/uni-app";

onShareAppMessage(()=>{
return {
title:'xxxx'
}
})
</script>

上面的常规用法。需要在每个页面都单独写一份。想通过一个文件统一管理。因为分享的参数都是一样的。使用了script setup后，就没有办法使用mixins了。无法统一使用。

尝试过使用hooks和import 'xxxx.ts'文件。在里面import { onShareAppMessage } from "@dcloudio/uni-app";不生效。

不知道有什么方法可以解决这个问题。不想重复写几十次这样的代码。后续不好维护。

2022-05-30 00:42 负责人:无分享

4 个回复

十二112

//useShare.js  
import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'  

export const useShare = (params = {}) => {  
    let defaultOptions = {  
        title: '全局分享标题',  
        path: '/pages/index/index',  
        ...params  
    }  
    const shareApp = (options = {}) => {  
        onShareAppMessage(() => {  
            return {  
                ...defaultOptions,  
                ...options  
            }  
        })  
    }  
    const shareTime = (options = {}) => {  
        onShareTimeline(() => {  
            return {  
                ...defaultOptions,  
                ...options  
            }  
        })  
    }  
    return {  
        onShareAppMessage: shareApp,  
        onShareTimeline: shareTime,  
    }  
}

//index.vue  
<script setup>  
    import { useShare } from '@/hooks/useShare.js'  
    const { onShareAppMessage,onShareTimeline } = useShare()  
    onShareAppMessage()  
    onShareTimeline()  
</script>

零充

好用。感谢！

2022-06-29 15:26
十二112

回复零充: 不客气

2022-06-29 15:55
6***@qq.com

大佬，在接口数据加载完成onMounted或者nextTick中调用onShareAppMessage( )并传入参数title path等,然后通过<button open-type="share"> 和胶囊转发分享，为什么不生效。控制台警告：onShareAppMessage is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup() 翻译：当没有要关联的活动组件实例时，将调用onShareAppMessage。生命周期注入API只能在执行setup（）期间使用；想拿到后台给的数据后，并传入onShareAppMessage，我该如何解决呢？

2022-07-05 13:37
十二112

回复 6***@qq.com: 看下面

2022-07-05 14:21
6***@qq.com

回复十二112: 可以了，thank you

2022-07-05 16:27
十二112

回复 6***@qq.com: 不客气

2022-07-05 16:35

零充 - 80后IT男...

我也是同样的需求。。
新建了一个share.js


import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';  
function useGlobalShare(param) {  
    onShareAppMessage((res) => {  
        return {  
            title: '全局分享的标题',  
            path: '/pages/home/home',  
            imageUrl: '../../static/imgs/fenxiang-img.png',  
        };  
    });  
    onShareTimeline((res) => {  
        return {  
            title: '全局分享的标题',  
            path: '/pages/home/home',  
            imageUrl: '../../static/imgs/fenxiang-img.png',  
        };  
    });  
}  

export default useGlobalShare;

然后在index.vue中


<script setup>  
import useGlobalShare from '@/utils/share';  
useGlobalShare();  

</script>

没作用。。。

我把shere.js的import注释。。会报错onShareAppMessage is not defined，所以share.js执行onShareAppMessage是成功了，但是不生效。。。求解。

十二112

试试下面写法

2022-06-28 09:42

十二112

写得不好,只是实现了功能,可以自己优化一下,我测了放onMounted和onReady下都可以

// useShare.js  
import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'  
export const useShare = (params = {}) => {  
    let defaultOptions = {  
        title: '全局分享标题',  
        path: '/pages/index/index',  
        ...params  
    }  
    // 分享朋友默认配置  
    let shareAppOptions = {}  
    // 分享朋友圈默认配置  
    let shareTimeOptions = {}  
    // onShareAppMessage  
    const shareApp = (options = {}) => {  
        onShareAppMessage((res) => {  
            return {  
                ...defaultOptions,  
                ...options,  
                ...shareAppOptions  
            }  
        })  
    }  
    // 添加onShareAppMessage参数  
    const setShareApp = (options = {}) => {  
        shareAppOptions = options  
    }  
    // onShareTimeline  
    const shareTime = (options = {}) => {  
        onShareTimeline(() => {  
            return {  
                ...defaultOptions,  
                ...options,  
                ...shareTimeOptions  
            }  
        })  
    }  
    // 添加onShareTimeline参数  
    const setShareTime = (options = {}) => {  
        shareTimeOptions = options  
    }  

    return {  
        onShareAppMessage: shareApp,  
        onShareTimeline: shareTime,  
        setShareApp,  
        setShareTime,  
    }  
}

// index.vue  
<script setup>  
    import { useShare } from '@/hooks/useShare.js'  
    import { onMounted } from 'vue'  
    import { onLoad,onReady } from '@dcloudio/uni-app'  
    const {  
        onShareAppMessage,  
        onShareTimeline,  
        setShareApp,  
        setShareTime  
    } = useShare()  
    onLoad(() => {  
        setOptions()  
    })  
    onShareAppMessage()  
    onShareTimeline({  
        title: '自定义标题',  
        path: '/pages/index/dark'  
    })  
    // onMounted(() => {  
    //  onShareAppMessage({  
    //      title: '自定义标题onMonted',  
    //      path: '/pages/index/mine'  
    //  })  
    // })  
    // onReady(() => {  
    //  onShareTimeline({  
    //      title: '自定义标题onReady',  
    //      path: '/pages/index/dark'  
    //  })  
    // })  
    const mockApi = () => {  
        return new Promise((resolve) => {  
            setTimeout(() => {  
                resolve({title: '接口返回标题',path: '/pages/index/api'})  
            },200)  
        })  
    }  
    const setOptions = async () => {  
        const res = await mockApi()  
        setShareApp(res)  
    }  
</script>

9***@qq.com

<template>  
    <u-popup v-model="show" height="286" border-radius="32" mode="bottom" >  
        <view class="btn-box">  
            <view class="btn">  
                <button class="button" open-type="share">  
                    <view class="iconfont haoyou icon-icon_shangpinxiangqing_fenxiang_fageihaoyou"></view>  
                    <view class="btn-text">发给好友</view>  
                </button>  
            </view>  
            <view class="btn">  
                <view @click="generatePoster">  
                    <view class="iconfont haibao icon-icon_shangpinxiangqing_fenxiang_shengchanhaibao"></view>  
                    <view class="btn-text">生成海报</view>  
                </view>  
            </view>  
        </view>  
    </u-popup>  
</template>  
<script setup lang="ts">  
import { ref } from 'vue'  
import { useShare } from './useShare.js'    
const { onShareAppMessage,onShareTimeline } = useShare()    
onShareAppMessage()    
onShareTimeline()    

const show = ref(false)  
const handleShow = () => {  
    show.value = true  
}  

defineExpose({  
    handleShow  
})  
 const emit = defineEmits(['generate'])  
// 生成海报  
function generatePoster() {  
    show.value = false  
    emit('generate')  
}  

</script>

// useShare.js    
import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'    
export const useShare = (params = {}) => {    
    let defaultOptions = {    
        title: '全局分享标题',    
        path: '/pages/index/index',    
        ...params    
    }    
    // 分享朋友默认配置    
    let shareAppOptions = {}    
    // 分享朋友圈默认配置    
    let shareTimeOptions = {}    
    // onShareAppMessage    
    const shareApp = (options = {}) => {    
        onShareAppMessage((res) => {    
            return {    
                ...defaultOptions,    
                ...options,    
                ...shareAppOptions    
            }    
        })    
    }    
    // 添加onShareAppMessage参数    
    const setShareApp = (options = {}) => {    
        shareAppOptions = options    
    }    
    // onShareTimeline    
    const shareTime = (options = {}) => {    
        onShareTimeline(() => {    
            return {    
                ...defaultOptions,    
                ...options,    
                ...shareTimeOptions    
            }    
        })    
    }    
    // 添加onShareTimeline参数    
    const setShareTime = (options = {}) => {    
        shareTimeOptions = options    
    }    

    return {    
        onShareAppMessage: shareApp,    
        onShareTimeline: shareTime,    
        setShareApp,    
        setShareTime,    
    }    
}

大佬，这样为什么没有用呢？

该问题目前已经被锁定, 无法添加新回复

使用了script setup语法糖后，无法设置全局的分享onShareAppMessage了

4 个回复

公告

相关问题

使用了script setup语法糖后，无法设置全局的分享onShareAppMessage了

与内容相关的链接

4 个回复

公告

相关问题