微信小程序分享给朋友和分享到朋友圈怎么实现？

admin

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

目录
1、官方文档
2、分享给朋友，即转发
3、分享到朋友圈
4、常见问题
4.1、分享朋友圈灰色
4.2、如何测试分享给朋友
4.3、如何测试分享给朋友圈

1、官方文档
转发官方文档：转发=>微信开放文档
分享到朋友圈官网文档：分享到朋友圈=>微信开放文档

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

2、分享给朋友，即转发
通过onShareAppMessage实现分享，分享有2种方式：
方法1：通过小程序右上角...进行分享
方法2：在页面，新增“分享”按钮，进行分享

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

前端按钮代码举例：

1. <button class="bottom-share" data-id='122' open-type="share" type="primary">分享</button>

复制代码

js中的代码举例：

1.   onShareAppMessage: function (res) {// 分享
   
2.     if (res.from === 'button') {
   
3.       // 来自页面内转发按钮
   
4.       //console.log("转发：" + JSON.stringify(res.target))
   
5.     }
   
6.     return {
   
7.       title: this.data.goodsInfo.goodsName,
   
8.       path: '/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id ,
   
9.       success: function (res) {
   
10.         //console.log('/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id )
    
11.         // 转发成功
    
12.         //console.log("转发成功:" + JSON.stringify(res));
    
13.       },
    
14.       fail: function (res) {
    
15.         // 转发失败
    
16.         //console.log("转发失败:" + JSON.stringify(res));
    
17.       }
    
18.     }
    
19.   },

复制代码

3、分享到朋友圈
分享朋友圈的代码举例：

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

复制代码

4、常见问题
4.1、分享朋友圈灰色
原因：没有编写分享朋友圈代码

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

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

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

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