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

Posted 秋9

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序如何支持分享给朋友和分享到朋友圈?如何解决分享朋友圈灰色问题相关的知识,希望对你有一定的参考价值。

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

1.官方文档

转发官方文档: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

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

2.分享给朋友,即转发

通过onShareAppMessage实现分享,分享有2种方式:

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

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

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

前端按钮代码举例:

<button class="bottom-share" data-id='122' open-type="share" type="primary">分享</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.如何测试分享给朋友圈

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

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

以上是关于微信小程序如何支持分享给朋友和分享到朋友圈?如何解决分享朋友圈灰色问题的主要内容,如果未能解决你的问题,请参考以下文章

两步实现微信小程序分享朋友圈

微信小程序即将支持 分享朋友圈 半屏显示

微信小程序实现分享至朋友圈的功能

微信H5页面里面可以做一个按钮直接分享到朋友圈吗

微信小程序生态图谱

h5分享微信小程序到朋友圈