微信小程序(三)自定义分享按钮和原生分享&区分不同按钮的分享&带参数分享和获取_js 微信三个点转发可以带参数吗

大家有不会的可以进群交流

官方的分享

点击右上角的三个点

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function(ops) {
	 wx.showShareMenu({
		withShareTicket: true
		})
  }
1
2
3
4
5
6
7
8

自定义分享

wxml

<button open-type='share'>分享好友</button>
1

js

/**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true
    }); 
  },
1
2
3
4
5
6
7
8
9

 onShareAppMessage: function(ops) {
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '标题',
      imageUrl:  `图片地址注意符号` ,
      desc:   '描述',
      path: `pages/index/index`, //点击分享的图片进到哪一个页面
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果

区分不同按钮的分享

wxml

<button id='btn' open-type="share" plain='true'></button>
1

js

 onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target.id)
      console.log(res.from)
       //区分按钮分享
      if (res.target.id === "btn") {
        return {
          title: '求助，下面图中是什么菜啊？',
          path: '/pages/title/title',
          success: function (res) {
            // 转发成功
          },
          fail: function (res) {
            // 转发失败
          }
        }
      }
    }
    //右上角分享
    return {
      title: '标题',
      path: `pages/index/index`,
      imageUrl: ``,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

带参数分享&转发和获取

onShareAppMessage: function (res) {
    //右上角分享     this.data.id取得data里面的数据
    return {
      title: '标题',
      path: `pages/index/index?id=`+ this.data.id,
      imageUrl: ``,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意调试的时候在手机打开调试 页面(自己分享自己点击)

因为是直接跳转到index页面所以在index.js页面获取

 onLoad: function (options) {
 //打印获取的数据
    console.log(options.id)
  },
1
2
3
4

检查是否分享成功并指定群和个人的分享

onShareAppMessage: function () {
    //转发时携带 shareTicket才能在回调中获取到shareTickets
    wx.showShareMenu({
      withShareTicket: true
    }) 
    return {
      title: '转发时显示的标题',
      path: '转发的页面路径',
      success:function(res) {
        console.log('--- 转发回调 ---', res);
        //onShareAppMessage回调的shareTickets，如果没有，就说明不是转发到群聊的
        console.log('--- shareTickets ---', res.shareTickets);
        //转发到群里的才会有shareTickets
        if(res.shareTickets && res.shareTickets[0]) {
            //获取转发的详细信息
            wx.getShareInfo({
            shareTicket: res.shareTickets[0],
            success:function(res) {
              },
            fail:function(error){
            }
          })
        }
      },
      fail:function (error){
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

比较全面的转发和分享

辨别到群与个人、多个转发按钮、转发带参数