uniapp实现全局分享和分享朋友圈

最新推荐文章于 2024-08-22 08:57:33 发布

一杯雾

最新推荐文章于 2024-08-22 08:57:33 发布

阅读量5.4k

点赞数 4

分类专栏： uniapp

原文链接：https://www.jianshu.com/p/844018ca174f

版权

uniapp 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

原链接地址

创建公共文件share.js
在这里插入图片描述

export default {
    onShareAppMessage(res) { //发送给朋友
        return {}
    },
    onShareTimeline(res) {//分享到朋友圈
        return {}
    },
}

或者

export default {
    created() {
        //#ifdef MP-WEIXIN
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        //#endif
    },
}

全局使用，在 main.js 里面

import share from './common/share.js'
Vue.mixin(share)

这样设置后，每个页面都会有分享按钮了。

自定义分享内容

export default {
    data() {
       return {
            share:{
               title: '自定义分享标题',
               imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
            }
       }
    },
    onShareAppMessage(res) { //发送给朋友
        return {
            title: this.share.title,
            imageUrl: this.share.imageUrl,
        }
    },
    onShareTimeline(res) {//分享到朋友圈
        return {
            title: this.share.title,
            imageUrl: this.share.imageUrl,
        }
    },
}

在页面的 data 里面设置和 mixin 一样的参数就可以修改分享的参数了

export default {
    data() {
       return {
            share:{
               title: '首页',
               imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
            }
       }
    },
}