微信小程序如何支持分享给朋友和分享到朋友圈？如何解决分享朋友圈灰色问题

- 日理万妓 2022-09-10 14:28 2654阅读 0赞

微信小程序分享给朋友和分享到朋友圈，都需要在小程序编写代码实现。

# 1.官方文档 #

转发官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share.html]

分享到朋友圈官网文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share-timeline.html]

官方文档，很重要，一定要看完。细节和坑在文档中都有说明。

# 2.分享给朋友，即转发 #

通过onShareAppMessage实现分享，分享有2种方式：

方法1：通过小程序右上角...进行分享

方法2：在页面，新增“分享”按钮，进行分享

通过给 `button` 组件设置属性 `open-type="share"`，可以在用户点击按钮后触发 [`Page.onShareAppMessage`][Page.onShareAppMessage] 事件，相关组件：[button][]。

前端按钮代码举例：

js中的代码举例：

onShareAppMessage: function (res) {// 分享
        if (res.from === 'button') {
          // 来自页面内转发按钮
          //console.log("转发：" + JSON.stringify(res.target))
        }
        return { 
          title: this.data.goodsInfo.goodsName,
          path: '/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id ,
          success: function (res) {
            //console.log('/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id )
            // 转发成功
            //console.log("转发成功:" + JSON.stringify(res));
          },
          fail: function (res) {
            // 转发失败
            //console.log("转发失败:" + JSON.stringify(res));
          }
        }
      },

# 3.分享到朋友圈 #

分享朋友圈的代码举例：

/*分享朋友圈 */
       onShareTimeline: function() {
        return {
          title: '***批发商城',
          query: 'goodsId=' +this.data.goodsInfo.id,
          imageUrl: this.data.goodsInfo.mainImg,
        }
      },

# 4.常见问题 #

## 5.分享朋友圈灰色 ##

原因：没有编写分享朋友圈代码

解决方法：见第3节，编写分享朋友圈代码

## 6.如何测试分享给朋友 ##

在开发环境，通过预览进行测试，分享给朋友或者文件传输助手。

## 7.如何测试分享给朋友圈 ##

在开发环境，通过预览进行测试，由于是测试，分享朋友圈时，可见范围选择私有，只有自己看到。

没有解决的朋友，欢迎留言，我会第一时间回复。

[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share-timeline.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
[Page.onShareAppMessage]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onshareappmessageobject-object
[button]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html