uni-app 微信小程序设置全局的分享onShareAppMessage

迈不过友情╰ 2023-01-19 07:14 116阅读 0赞

## 创建一个 mixins ，我的文件路径为 ： common/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 里面 添加全局的 mixin

import share from './common/share.js'
    Vue.mixin(share) 
    const app = new Vue({ 
        ...App,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,
            }
        },
     
    
    }

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221021/933c558102854d148f6ed8071e750dfa.png