uniapp开发小程序配置全局分享

最新推荐文章于 2025-11-04 16:16:51 发布

转载最新推荐文章于 2025-11-04 16:16:51 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_35432904/article/details/106330079

文章标签：

#小程序 #微信小程序

小程序专栏收录该内容

2 篇文章

订阅专栏

通过创建一个mixins文件，将分享到朋友和朋友圈的逻辑集中管理，可以在所有页面中方便地实现一键分享。只需在main.js全局引入mixin，并在需要的页面设置特定的分享内容即可。

最近开发小程序的时候，发现实现分享转发的话，要每个页面都写一个onShareAppMessage，在一个博主看到了这篇文章，使用之后完美解决

实现代码如下：

1、创建一个mixins，我的文件路径为：utils/share.js

export default {
    data(){
        return {
            share:{
                title:'首页',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:'',
            }
        }
    },
    //分享到朋友或群
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res) {
                uni.showToast({
                    title: '分享成功'
                })
            },
            fail(res) {
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                })
            }
        }
    },
}

2、全局使用，在main.js里面添加全局的mixin

import share from "@/utils/share.js"
Vue.mixin(share)

3、如果单个页面需要设置不同的分享只需要更改data数据就行了

export default {
    data() {
		return {
            share:{//分享参数
                title:'分享标题',
                path:'分享地址',
                imageUrl:'分享预览图片',
                desc:'分享详情',
                content:'',
             }
	    }
	},
}