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

echo 2021-09-11 AM 1691℃ 2条

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'
        }
    }
}
标签: uniapp, 小程序

非特殊说明,本博所有文章均为博主原创。

评论啦~



已有 2 条评论


  1. 1
    1

    1

    回复 2021-10-29 10:48
  2. 空城
    空城

    博主你好,我用了你的主题,结果后台设置修改显示修改成功,却没有

    回复 2021-09-22 06:49