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

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

[

前景：使用uni-app开发微信小程序，实现分享转发的话，要每个页面都写一个onShareAppMessage，这样代码太臃肿，因此使用vue的mixins 设置一个全局的分享。
vue的mixin的使用

创建一个 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
    },
}

两种写法效果是一样的

image.png

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

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',
            }
       }
    },
}
l:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
            }
       }
    },
}

转载自Giraffe_00