在如今流量成本日益攀升的移动互联网时代，"用户分享拉新" 成为了增长的重要策略。而微信小程序作为天然具备社交传播力的平台，提供了较完善的分享机制支持。本文将从实战角度出发，手把手教你如何使用 uni-app + Vue3 构建一个支持「页面级分享跳转」的微信小程序。
无论你是做营销活动、邀请有奖，还是积分商城，掌握这套技能，都将助你轻松实现「分享裂变 + 定向跳转 + 追踪来源」。
🧩 一、你将实现什么？
-
在任意页面中添加"分享"按钮
-
分享卡片携带自定义参数（如活动 ID、邀请人 ID）
-
分享后点击卡片自动跳转到你设定的页面
-
识别访问来源，实现埋点和个性化引导
🛠️ 二、基础能力：onShareAppMessage（Vue 3 写法）
在 uni-app + Vue 3 的 <script setup> 语法中，我们可以直接使用组合式 API onShareAppMessage 来定义当前页面的分享内容。
✅ 基础代码
<script setup>
import { onShareAppMessage } from '@dcloudio/uni-app'
onShareAppMessage(() => {
return {
title: '新人送券，限时领取',
path: '/pages/activity/coupon', // 分享跳转页面
imageUrl: '/static/coupon.jpg' // 分享图（可选）
}
})
</script>
<template>
<button open-type="share">点击分享</button>
</template>🎯 三、动态拼接参数：邀请人 / 活动 ID 等
我们通常希望分享链接携带一些参数，例如：
-
actId=1001：活动 ID -
referrer=uid_789：邀请人 ID
只需动态拼接 path 即可：
<script setup>
import { onShareAppMessage } from '@dcloudio/uni-app'
const actId = '1001'
const referrer = 'uid_789'
onShareAppMessage(() => {
return {
title: '好友送你一张券，速领！',
path: `/pages/activity/coupon?actId=${actId}&referrer=${referrer}`,
imageUrl: '/static/coupon.jpg'
}
})
</script>在目标页面中使用 onLoad 获取参数：
<script setup>
import { onLoad } from '@dcloudio/uni-app'
onLoad((query) => {
console.log('来自分享，活动ID：', query.actId)
console.log('邀请人：', query.referrer)
})
</script>📦 四、分享按钮使用规范（重点）
必须使用 <button open-type="share"> 才会触发 onShareAppMessage：
<template>
<button open-type="share">立即分享</button>
</template>🚧 五、常见问题与陷阱
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 分享卡片没有跳转 | path 写错、页面未注册 | 确保目标页面已在 pages.json 注册 |
| 分享按钮点击没反应 | 少了 open-type="share" |
必须加上该属性 |
| imageUrl 无效 | 使用了非 HTTPS 图片或路径错误 | 使用项目中 /static/ 目录或线上 HTTPS 图 |
💡 六、进阶玩法（可拓展）
-
🌈 生成带参数的小程序码，用于线下扫码跳转
-
📊 分享来源统计（埋点 + 来源识别）
-
👥 多人拼团 / 分销绑定分享链路
-
📦 封装
useShare()组合函数实现统一管理
📌 七、总结
通过 uni-app + Vue3 的页面分享机制，我们可以轻松构建出具有传播力的微信小程序页面。核心在于：
-
使用
onShareAppMessage定义分享行为 -
携带 path 参数，实现跳转 + 来源追踪
-
配合
<button open-type="share">实现交互触发
✨ 一旦掌握，你的业务场景就可以从「被动等待流量」变成「用户主动带用户」。
如果你还想进一步封装一个 useShare() Hook 来统一管理多页面的分享行为，欢迎留言，我会继续输出实战范式。
📢 现在，是时候用"页面分享跳转"把用户变成流量入口了！