小程序分享到朋友圈功能

文章转自：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']
})

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

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

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

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

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

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