官方的分享

点击右上角的三个点

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

自定义分享

wxml

  1. <button open-type='share'>分享好友</button>
  1. /**
  2.    * 生命周期函数--监听页面加载
  3.    */
  4.   onLoad() {
  5.     wx.showShareMenu({
  6.       // 要求小程序返回分享目标信息
  7.       withShareTicket: true
  8.     }); 
  9.   },
  10.  onShareAppMessage: function(ops) {
  11.     if (ops.from === 'button') {
  12.       // 来自页面内转发按钮
  13.       console.log(ops.target)
  14.     }
  15.     return {
  16.       title: '标题',
  17.       imageUrl:  `图片地址注意符号` ,
  18.       desc:   '描述',
  19.       path: `pages/index/index`, //点击分享的图片进到哪一个页面
  20.       success: function (res) {
  21.         // 转发成功
  22.         console.log("转发成功:" + JSON.stringify(res));
  23.       },
  24.       fail: function (res) {
  25.         // 转发失败
  26.         console.log("转发失败:" + JSON.stringify(res));
  27.       }
  28.     }
  29.   }

结果

【小程序】自定义分享按钮和原生分享%26区分不同按钮的分享%26带参数分享和获取 - 图1

区分不同按钮的分享

wxml

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

带参数分享&转发和获取

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

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

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

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

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

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

比较全面的转发和分享

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