小程序分享（全局分享两种方式一键复制2024最新）

接上一篇内容小程序分享

      小程序分享（两种方法2024最新一键复制即可）-CSDN博客

接下来介绍全局分享的几种方法......

方法一：

      在每个页面的页面配置中添加分享逻辑

你可以在每个页面的 onShareAppMessage 和 onShareTimeline 方法中添加相同的分享配置。这是最直接的方法，但会导致代码重复。

示例代码：

      在 pages/index/index.vue 中：

export default {
  onShareAppMessage() {
    return {
      title: 'title',
      path: '/pages/index/index',
      imageUrl: '图片',
    };
  },
  onShareTimeline() {
    return {
      title: 'title',
      path: '/pages/index/index',
      imageUrl: '图片',
    };
  },
};

       在其他页面如 pages/other/other.vue 中：

 

方法二：

      在 App.vue 中进行全局配置

你可以在 App.vue 中设置全局的分享逻辑，然后在各个页面中调用。这可以避免代码重复，提高可维护性。

  App.vue 示例代码：

(为了使每个页面的分享路径正确，我们需要在 App.vue 中配置一个通用的分享方法，然后在每个页面中动态地设置 path 参数。)

// App.vue
export default {
  onShareAppMessage() {
    return {
      title: 'title',
      path: this.getSharePath(),
      imageUrl: '图片',
    };
  },
  onShareTimeline() {
    return {
      title: 'title',
      path: this.getSharePath(),
      imageUrl: '图片',
    };
  },
  methods: {
    getSharePath() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      const options = currentPage.options;
      let query = '';
      for (let key in options) {
        query += `${key}=${options[key]}&`;
      }
      return `/${route}?${query.slice(0, -1)}`;
    }
  }
}

在 App.vue 中，我们新增了 getSharePath 方法，该方法可以获取当前页面的路径和参数，保证分享的路径是动态的。

在每个页面中，调用 App.vue 的分享方法：

示例代码：

      在 pages/index/index.vue 中：

<template>
  <!-- 页面内容 -->
</template>

<script>
export default {
  onLoad() {
    this.setShare();
  },
  methods: {
    setShare() {
      this.onShareAppMessage = getApp().onShareAppMessage;
      this.onShareTimeline = getApp().onShareTimeline;
    }
  }
}
</script>

       在其他页面如 pages/other/other.vue 中：

<template>
  <!-- 页面内容 -->
</template>

<script>
export default {
  onLoad() {
    this.setShare();
  },
  methods: {
    setShare() {
      this.onShareAppMessage = getApp().onShareAppMessage;
      this.onShareTimeline = getApp().onShareTimeline;
    }
  }
}
</script>

方法三：

      使用混入（Mixins）

你还可以使用 Vue.js 的混入（mixins）特性，将共享逻辑提取到一个混入中，然后在每个页面中引入这个混入。

      创建一个混入文件 shareMixin.js，在混入中定义动态路径获取方法：

      创建混入 shareMixin.js：

// mixins/shareMixin.js
export default {
  onShareAppMessage() {
    return {
      title: 'title',
      path: this.getSharePath(),
      imageUrl: '图片',
    };
  },
  onShareTimeline() {
    return {
      title: 'title',
      path: this.getSharePath(),
      imageUrl: '图片',
    };
  },
  methods: {
    getSharePath() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      const options = currentPage.options;
      let query = '';
      for (let key in options) {
        query += `${key}=${options[key]}&`;
      }
      return `/${route}?${query.slice(0, -1)}`;
    }
  }
};

在页面中使用混入：

在 pages/index/index.vue 中：

// pages/index/index.vue
<template>
  <!-- 页面内容 -->
</template>

<script>
import shareMixin from '@/mixins/shareMixin';

export default {
  mixins: [shareMixin],
  onLoad() {
    this.setShare();
  },
  methods: {
    setShare() {
      this.onShareAppMessage = this.onShareAppMessage;
      this.onShareTimeline = this.onShareTimeline;
    }
  }
}
</script>

 同样在其他页面如 pages/other/other.vue 中：

// pages/other/other.vue
<template>
  <!-- 页面内容 -->
</template>

<script>
import shareMixin from '@/mixins/shareMixin';

export default {
  mixins: [shareMixin],
  onLoad() {
    this.setShare();
  },
  methods: {
    setShare() {
      this.onShareAppMessage = this.onShareAppMessage;
      this.onShareTimeline = this.onShareTimeline;
    }
  }
}
</script>

总结

• 方法一：在每个页面中单独设置分享逻辑，代码重复多，但简单直接。
• 方法二：在 App.vue 中进行全局配置，各页面中调用全局分享方法，避免代码重复。
• 方法三：使用混入，将共享逻辑提取到一个混入中，所有页面中引入混入，保持代码整洁和可维护性。

根据你的实际需求和项目复杂度选择合适的方法。如果分享逻辑简单且不会频繁修改，方法一是最直接的。如果希望代码更整洁和易维护，方法二或方法三会是更好的选择。