uniapp全局分享好友和朋友圈

每天都有好果汁吃
693 阅读4分钟

背景

在之前迭代小程序时，为了快速上线，分享功能被分散在各个页面中，导致代码冗余和不易维护，欠下了很多技术债。现在需要对分享功能进行全局抽取和优化，使其更易于维护和扩展。

为了实现这个目标，可以使用Vue中的mixins机制，将分享功能的代码抽象成一个mixin，然后全局混入。这样，在页面中就可以直接使用mixin中定义的分享方法和data，而不需要重复编写。

思路

  1. 统计所有页面中是否存在分享好友和朋友圈的功能，以及它们所需的参数

对于每个页面，需要确定它是否需要支持分享功能，以及它所需的分享参数，如标题、路径、图片等。这将有助于后续编写全局分享逻辑。

  1. 根据上一步的统计信息来编写全局分享逻辑的主要逻辑

这可以通过定义一个分享的mixin来实现，该mixin包含共享的分享方法和数据。在这个mixin中，需要实现根据不同页面的需求来设置分享参数和分享的行为。例如，对于某些页面，可能需要在分享时附加特定的查询参数，或者需要在分享好友时删除图片。

  1. 在main.js中，使用Vue.mixin全局混入分享的mixin

这样，每个页面都可以使用相同的分享逻辑，而不需要在每个页面中编写重复的代码。

  1. 修改之前的页面，使它们使用全局分享逻辑

在每个页面中，只需要将mixin中的分享方法和数据合并到页面中即可。这样，每个页面都可以使用全局的分享逻辑，而不需要在每个页面中编写重复的代码。

实现

1. 统计

根据统计得知

所有页面都有分享好友功能，但是分享朋友圈功能只有少数几个页面存在

所需参数title，path，imageUrl大多数是使用的默认title，path，图片url，只有少数是动态的

因此，对于那些需要动态设置分享参数的页面，可以通过在页面加载时请求接口获取相应数据，并将数据合并到分享参数中。对于那些使用默认参数的页面，可以直接使用预先定义好的默认参数。

而隐藏分享朋友圈功能的页面，根据当前页面路径是否属于少数显示分享朋友圈功能的页面来判断。

2. 编写逻辑代码

针对以上分析，我们写出如下代码

share.js

export default {
    name: 'wxShare',
    data() {
        return {
            share: {
                title: '默认title', // 默认为小程序名称
                path: '/pages/index/index', // 默认为当前页面路径
                imageUrl: '', // 默认为当前页面的截图
                query: '',//这里的query主要是用来给分享朋友圈使用
            },
        };
    },
    onLoad() {
        //这里设置imageUrl的默认地址
        this.share.imageUrl = this.$getStatic('/imgs/default-share.png');
        //显示朋友圈的页面路径
        const showTimeLinePaths = ['/pages/home/index', '/pages/advisory/detailNative', '/subPack/land-bid/index'];

        //获取路由信息
        const pages = getCurrentPages();
        //获取当前路由
        let nowPage = pages[pages.length - 1];
        //获取当前页面路径
        const { fullPath } = nowPage.$page;
        let menus = [];
        showTimeLinePaths.every(it => !fullPath.includes(it)) && menus.push('shareTimeline');
        //menus的length大于0才执行隐藏，否则不执行
        menus.length > 0 &&
            uni.hideShareMenu({
                menus,
            });
    },
    //分享好友
    onShareAppMessage() {
        return {
            ...this.share,
            path: this.query ? `${this.share.path}?${query}` : this.share.path,
        };
    },
    //朋友圈
    onShareTimeline() {
        return this.share;
    },
};

这里imageUrl使用了网络路径，如果使用相对路径，那么引入路径是相对于使用mixin的文件，而不是share.js，所以这里取巧直接用了网络路径

3. 全局混入

在main.js中

import share from './common/share.js'
Vue.mixin(share)

4. 根据需要设置分享的标题、路径、图片以及查询参数等

一定要在onShow方法中设置参数，不要在onLoad中

因为 onLoad 并不是每次页面显示都会执行。例如，从页面A跳转到页面B，之后返回到了页面A，如果设置分享参数的逻辑在 onLoad 方法中，this.share中的数据不会被重新设置为页面A的分享参数，分享此时一定会有问题。而 onShow 方法每次页面显示都会执行，用来这里再合适不过

onShow() {
  this.share.title = '文件a'
}

结束

这篇文章利用Vue中的mixins机制，将分享功能的代码抽象成一个mixin，全局注入和使用，这样可以避免代码冗余，提高代码的可读性和可维护性

最后，祝大家变得更强！

avatar
文章
阅读
粉丝