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

前端 2023-11-13  1298

一般情况下，我们希望每个页面都可以分享，这样就需要每个页面都写一遍 onShareAppMessage 生命周期，很麻烦。

但是我们可以通过mixin的形式，给每一个页面注入了 onShareAppMessage 生命周期，让每一个页面都自带分享功能。

1、首先创建一个 share.js 文件，代码如下：

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

2、然后在 小程序目录 main.js 文件中引入 share.js 文件即可。如下：

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

3、这样所有页面已经有了分享功能。如果某一个页面需要自定义分享时，通过"this.share"对进行修改，在页面的onLoad生命周期修改即可。如下：

export default {
    onLoad() {
        this.share.title = '微嘟嘟';
    }
}

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

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

 uniapp 小程序

本站涵盖的内容、图片、视频等数据系网络收集，部分未能与原作者取得联系。若涉及版权问题，请联系我们进行删除！谢谢大家！