微信小程序开发实战，轻松实现分享给好友功能

拿到微信小程序的开发需求，十有八九会碰到“分享给好友”这个功能。你要是去翻官方文档，会发现它写得特别简略，就一个`onShareAppMessage`配置项，看着挺简单。可真到自己动手做，各种细节问题就全冒出来了——分享出去的卡片长啥样？标题怎么定？图片为什么裂了？参数怎么传？今天咱们就把这个事儿掰开揉碎了聊一遍，保证你看完能直接上手，把分享功能做得又稳又好看。

先说说最基础的那一步。在小程序页面的`.js`文件里，你得先定义`onShareAppMessage`这个方法。很多新手会犯一个错，以为光在`Page()`里写个方法就行，结果点右上角菜单，分享按钮还是灰的。原因很简单，这个方法必须写在`Page`构造函数的参数对象中。代码长这样：

onShareAppMessage() {

title: '这个工具太好用了，推荐给你',

这就算把分享功能激活了。但光激活还不够，你得想想用户凭什么帮你分享。默认的分享卡片标题是小程序名称，路径是当前页面，图片是页面截图，这玩意儿扔到聊天框里，一点吸引力都没有。所以`title`和`path`这两个字段必须得认真填。

`title`别写“快来使用XX小程序”这种废话，得写具体利益点。比如你做个记账小程序，分享标题写成“我上个月省了2000块，全靠这个记账神器”，比“记账助手”强十倍。人都是利己的，你得让接收方觉得“这东西对我有用”，而不是“你在给我打广告”。

再来看`path`。这里头有个大坑，很多人在分享卡片上带参数，比如`path: '/pages/detail?id=123'`，结果接收方点开以后，页面确实跳过去了，但数据没加载出来。为啥？因为你没在接收方的`onLoad`里处理这个`id`参数。分享出去的路径，接收方打开时会把参数原封不动传进`onLoad`的`options`里，你得在里面做数据请求或状态恢复。这步漏了，分享功能就是半成品。

还有图片，`imageUrl`这个字段最容易出问题。你随便填一个网络图片地址，分享出去卡片上就是一张裂图。微信要求这个图片必须是`https`协议的，而且比例最好是5:4，尺寸建议在`80KB`以内。要是没准备专门的分享图，可以把页面里某个好看的区域用`wx.canvasToTempFilePath`截成图片，但别偷懒直接截全屏，顶部导航栏和底部Tab栏截进去可不好看。

说完了基础配置，再聊聊高级点的玩法。`onShareAppMessage`里其实还有个隐藏参数`promise`，官方叫“异步分享”。啥意思？就是你可以先不急着返回分享内容，等异步数据准备好了再返回。比如说，你要分享一个订单详情，但订单数据是异步获取的，这时候你可以这样写：

onShareAppMessage() {

return new Promise((resolve) => {

url: '.com/order/detail',

title: `订单${res.data.orderNo}已发货`,

path: `/pages/order/detail?orderId=${res.data.id}`

这个功能特别实用，尤其是做电商、物流类小程序。分享出去的卡片信息是实时生成的，接收方点开就能看到最新状态，比那种固定文案的分享强太多了。

还有一个容易被忽略的点——分享菜单的扩展。默认右上角菜单只带一个“转发”按钮，但你可以通过`wx.showShareMenu`把“分享到朋友圈”也打开。注意，朋友圈分享是单页模式，只支持当前页面，不支持带参数跳转，而且样式上跟好友分享卡片不一样，是横版大图。这个接口得在`onLoad`里调用，`wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] })`。不过得提醒一句，不是所有场景都适合开朋友圈分享，比如涉及用户隐私数据的页面，开了反而有风险。

再来说说分享按钮的定制。有些页面你想让用户主动点某个按钮触发分享，而不是让他自己去找右上角菜单。这时候可以用`分享给好友`。但这里有个细节，按钮的`open-type`只触发分享，不能自定义分享内容，它调用的还是页面的`onShareAppMessage`。如果你想让不同的按钮分享不同的内容，就得用到`wx.showShareImageMenu`或者自定义弹窗，但那种玩法对新手来说有点复杂，建议先把基础的搞扎实。

还有个场景特别常见——用户分享完之后，你想给他一点奖励，比如加积分、送优惠券。这时候需要监听分享成功的回调。`onShareAppMessage`里可以加`success`和`fail`回调，但要注意，这个回调只能判断用户是否操作了分享面板，不能判断他是否真的发送给了好友。微信官方没有提供“分享成功且对方打开”的精确回调，所以很多团队用“分享后立即发券”的做法，其实是有漏洞的——用户点开分享面板但没发出去，券也发了。比较稳妥的做法是，分享后弹个提示“分享成功，奖励已到账”，然后通过后端记录分享行为，等接收方真正打开小程序时再二次校验发放奖励。

聊聊分享数据的埋点。你要是不统计，永远不知道分享功能到底带来多少用户。在`onShareAppMessage`里可以带一个`query`字符串，把渠道信息塞进去。比如`path: '/pages/index?shareFrom=homepage'`，然后在接收方的`onLoad`里读`options.shareFrom`，把这个值上报给统计平台。这样你就能看到，到底是首页分享带来的用户多，还是详情页分享带来的用户多。有了数据，你才能持续优化分享文案和路径。

说句实在话，微信小程序的分享功能，代码量真不大，核心就是`onShareAppMessage`这一个方法。但要把这个功能做出效果，让用户愿意分享、分享后能转化，功夫全在细节里。标题怎么写、图片怎么配、参数怎么传、奖励怎么发，每个环节都值得花心思琢磨。下次你再接到“实现分享功能”的需求，别急着上手敲代码，先花十分钟想想：用户为什么分享？分享给谁？对方看到什么内容才会点进来？把这几个问题想清楚了，代码十分钟就能写完，但效果能差出好几倍。