uni-app 实现微信小程序全局页面分享功能教程

最新推荐文章于 2025-10-24 17:52:25 发布

原创最新推荐文章于 2025-10-24 17:52:25 发布 · 2.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

🚀 uni-app 实现微信小程序全局页面分享功能教程

💡 整理不易，欢迎收藏、点赞、关注！

在开发微信小程序时，为每个页面添加“分享给好友”或“分享到朋友圈”能力是常见需求。手动在每个页面编写 onShareAppMessage 代码既重复又易错。本文将教你如何通过 mixin 实现一次配置、所有页面自动支持分享，并支持国际化。

🧩 一、核心方案：全局混入分享逻辑

✅ 使用 `app.mixin()` 注入分享钩子

在 main.ts 或 main.js 中（你是 SSR 模式，通常是 main.ts 中的 createApp() 函数里），写入以下逻辑即可让所有页面具备分享能力。

📦 示例代码（含国际化）

// main.ts 或 main.js
import { createSSRApp } from "vue";
import { bootstrap } from "/@/cool/bootstrap";
import App from "./App.vue";
import { i18n } from "./locale"; // 引入国际化配置
import "./router"; // 引入路由

export function createApp() {
  const app = createSSRApp(App);

  // 全局混入分享逻辑
  app.mixin({
    // 分享给好友
    onShareAppMessage() {
      return {
        title: i18n.global.t("share.title"), // 使用 i18n 国际化
        path: "/pages/index/index", // 默认跳首页
        imageUrl: "/static/share.png", // 可选分享图片
      };
    },
    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: i18n.global.t("share.title"),
        query: "",
        imageUrl: "/static/share.png",
      };
    },
  });

  // 启用国际化
  app.use(i18n);

  // 自定义系统启动逻辑
  bootstrap(app);

  return {
    app,
  };
}

🌐 二、支持国际化标题配置

你已经启用了多语言，分享标题也可跟随语言变化。建议在语言文件中增加 share.title 字段：

🌍 示例：语言包配置

// locale/zh-CN.ts
export default {
  share: {
    title: "合作伙伴系统"
  }
};

// locale/en-US.ts
export default {
  share: {
    title: "Partner System"
  }
};

🧩 三、页面级别支持自定义分享（可选）

你可以在某些页面手动重写默认分享内容：

<script setup>
defineOptions({
  onShareAppMessage() {
    return {
      title: "当前页面自定义分享标题",
      path: "/pages/detail/index?id=123"
    };
  }
});
</script>

🎯 四、支持按钮触发分享

微信小程序支持通过按钮触发分享：

<view>
  <button open-type="share">点击分享给好友</button>
</view>

注意：只有页面定义了 onShareAppMessage 才能显示并生效该按钮。

📌 五、扩展建议（进阶）

你可以结合当前页面路径，实现自动动态 path：

onShareAppMessage() {
  const pages = getCurrentPages();
  const current = pages[pages.length - 1];
  const route = current.route;
  const options = current.options || {};
  const query = Object.keys(options)
    .map((key) => `${key}=${options[key]}`)
    .join("&");

  return {
    title: i18n.global.t("share.title"),
    path: `/${route}?${query}`,
    imageUrl: "/static/share.png",
  };
}