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",};
}