小程序分享按钮怎么加？手把手教你搞定转发功能

朋友发来一个小程序，点开就弹出「邀请好友一起玩」的提示；你做的活动页，用户一划到底就看到右上角那个小箭头——点一下，自动带图带文案发到群聊里。这背后，靠的就是小程序分享按钮功能。

分享按钮不是“默认就有”的

很多新手以为，只要小程序上线，右上角三个点里天然带分享选项。其实不然：微信默认只给「页面级」分享入口（也就是右上角菜单里的“转发给朋友”），但这个入口默认不显示任何自定义内容——标题是页面路径，图片是白板，描述是空的。用户点了，别人收到的是一条干巴巴的链接，转化率低得可怜。

真正有用的分享，得自己写代码

想让转发带图、带标题、带参数，得在页面的 JS 文件里加 onShareAppMessage 方法。比如在 index.js 里写：

onShareAppMessage() {
  return {
    title: '我在常识来了答对了8道题，快来看看你行不行！',
    path: '/pages/game/game?from=share&uid=12345',
    imageUrl: '/images/share-bg.jpg'
  }
}

注意三点：title 控制转发卡片标题，path 决定点进去打开哪个页面、还能带参数（比如记录谁分享的），imageUrl 是分享图——必须是网络地址或本地绝对路径，且尺寸建议 500×400 像素左右，不然会被压缩变形。

分享图别随便截屏，小心被拒审

有开发者直接用手机截个屏当分享图，结果提审被驳回。微信明确要求：分享图不能含二维码、不能有诱导点击文字（如“必点”“速抢”）、不能拉票、不能出现未授权品牌 Logo。最稳妥的做法，是用小程序 canvas 绘制一张纯静态图，或者用后端生成带用户昵称和分数的个性化图片——这样既合规，又提升打开率。

群分享和私聊分享，能不一样

从基础版升级到 2.11.0+ 的基础库后，你可以区分转发场景：

onShareAppMessage(res) {
  if (res.from === 'button') {
    // 来自页面内按钮（比如“分享给好友”按钮）
    return { title: '我刚解锁新成就！' }
  }
  if (res.target && res.target.dataset.shareType === 'group') {
    // 群聊专属文案
    return { title: '组队答题赢奖品，缺你不可！' }
  }
}

再配合 wxml 里的按钮：
<button open-type="share" data-share-type="group">分享到群</button>
就能实现“一按一变”，比千篇一律的转发更抓人。

说到底，分享按钮功能不是炫技，而是把用户变成你的传播节点。图对了、文案戳了、路径准了，一次转发可能带来十个新用户。