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

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

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

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

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

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

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

📦 示例代码（含国际化）

// main.ts 或 main.jsimport { 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.tsexport default { share: { title: \"合作伙伴系统\" }};// locale/en-US.tsexport 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\", };}

✅ 总结

• 你已成功使用 app.mixin() 为所有页面添加了分享能力。
• 支持 onShareAppMessage 和 onShareTimeline。
• 可配合 i18n 进行国际化。
• 局部页面可手动重写，灵活可控。
• 支持通过按钮 open-type=\"share\" 触发分享。