关于uniapp小程序实现全局分享

uniapp小程序实现全局分享

一般情况下，我们希望每个页面都可以分享，那就需要每个页面都写一遍 onShareAppMessage 生命周期，很繁琐。
这里通过mixin的形式，给每一个页面注入了 onShareAppMessage 生命周期，让每一个页面都有分享功能。

首先创建一个 share.js 文件。

module.exports = {
    onLoad() {
        // 设置默认的转发参数
        this.share = {
            title: '', // 默认为小程序名称
            path: '', // 默认为当前页面路径
            imageUrl: '' // 默认为当前页面的截图
        }
    },
    onShareAppMessage() {
        return this.share
    },
    // #ifdef MP-WEIXIN
    onShareTimeline() {
        return this.share
    }
    // #endif
}

然后在 main.js 文件中引入 share.js 文件即可。

// 其他内容

// 引入小程序分享的mixin封装
let mpShare = require('utils/share.js');
Vue.mixin(mpShare)

// 其他内容

这时，所有页面已经有了分享。如果某一个页面您需要自定义分享信息时，可以通过"this.share"对进行修改，在页面的onLoad生命周期修改即可。

export default {
    onLoad() {
        this.share.title = 'Echo博客';
    }
}

如果某个页面，需要更改自定义的实现逻辑，可以在页面中重写 onShareAppMessage 生命周期即可覆盖通过mixin监听的 onShareAppMessage 生命周期。

export default {
    onShareAppMessage(res) {
        if (res.from === 'button') {// 来自页面内分享按钮
            console.log(res.target)
        }
        return {
            title: '自定义分享标题',
            path: '/pages/goods/item?id=123'
        }
    }
}