[特殊字符] 分享裂变新姿势：用 UniApp + Vue3 玩转小程序页面分享跳转！

在如今流量成本日益攀升的移动互联网时代，"用户分享拉新" 成为了增长的重要策略。而微信小程序作为天然具备社交传播力的平台，提供了较完善的分享机制支持。本文将从实战角度出发，手把手教你如何使用 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>
  <but