小程序分享到朋友圈功能

最新推荐文章于 2024-10-15 09:33:15 发布

夜跑者

最新推荐文章于 2024-10-15 09:33:15 发布

阅读量1.4k

点赞数 1

分类专栏：小程序

原文链接：https://zhuanlan.zhihu.com/p/159265422

版权

小程序专栏收录该内容

41 篇文章

订阅专栏

微信于2020年7月7日低调推出了小程序分享到朋友圈的功能，这一更新对开发者具有重大意义。用户现在可以直接从小程序胶囊按钮分享到朋友圈，但目前仅限安卓7.0.16版本，iOS版本暂不支持。分享至朋友圈的配置与分享至会话类似，但不支持path属性，只能通过query传递参数。虽然功能已开放，但在使用中需要注意一些细节和限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章转自：https://zhuanlan.zhihu.com/p/159265422

2020年7月7日（据说是6日深夜），一个很特别的日子，微信低调地放开了一个功能：微信小程序“分享到到朋友圈”，这个看似微小的变化，对广大微信小程序开发者来说意义重大。

曾几何时，有多少产品为此和甲方费尽口舌，有多少UI绞尽脑汁只为设计出绚丽的海报，有多少前端开发笨拙的使用着canvas画海报。而只是因为，微信小程序不支持分享到朋友圈。

因此我们需要绚丽的带着文字的海报，引导用户保存海报到相册，进而发朋友圈。而朋友圈的好友看到后还要点开图片长按识别画好在海报中的小程序码。进而进入小程序。繁杂的步骤使得小程序几乎无法在朋友圈进行推广。好在，终于支持了。

目前此功能没有完全放开，需微信安卓7.0.16版本才支持，灰度测试 ,iOS版本暂不支持。

和分享至会话不同的是，分享至朋友圈目前只能通过点击小程序胶囊按钮的方式分享。

点击胶囊按钮分享朋友圈和分享至会话用法基本一致：

// 分享至会话
onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
        console.log(res.target)
    }
    return {
        title: '自定义转发标题',
        path: '/page/user?id=123',
        imageUrl: 'http://....png'
    }
}
// 分享至朋友圈
onShareTimeline: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
        console.log(res.target)
    }
    return {
        title: '自定义转发标题',
        query: 'id=123',
        imageUrl: 'http://....png'
    }
}

用法基本一致。但是分享至朋友圈里面传值只有 query 而没有 path 。因此在用户点击胶囊按钮分享至朋友圈只能分享当前页面。至于更多的需求可以通过 query 传参自己实现。

而在页面内点击转发按钮，分享至会话只需要设置一下 open-type 就好：

<button open-type="share">分享页面给好友</button>

而要实现分享至朋友圈则还没有相关 open-type。

对于分享。微信官方也提供了相关API可以控制分享按钮的状态。如你也可以在 onLoad 里面执行：

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

来获得和上面一样的效果。这里就不展开了。

基本配置成功之后就长这样：

目前仅支持在这里面分享，后期也不知道会不会支持点击页面里面的按钮分享。

虽然微信方面目前提供了分享到朋友圈的接口，但是在使用中会有一些注意事项：

onShareTimeline 返回的对象里面没有 path 属性，用 query 代替
onShareTimeline 使用的前提是 onShareAppMessage 必须定义

相关的文档我也放在这里了，如果有错误，还请不吝指出，万分感谢。