1. 程式人生 > >微信小程式(三)自定義分享按鈕和原生分享&區分不同按鈕的分享&帶引數分享和獲取

微信小程式(三)自定義分享按鈕和原生分享&區分不同按鈕的分享&帶引數分享和獲取

官方的分享

點選右上角的三個點

/**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function(ops) {
	 wx.showShareMenu({
		withShareTicket: true
		})
  }

自定義分享

wxml

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

js

/**
   * 生命週期函式--監聽頁面載入
   */
  onLoad() {
    wx.showShareMenu({
      // 要求小程式返回分享目標資訊
      withShareTicket: true
    }); 
  },
 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));
      }
    }
  }

結果

效果圖

區分不同按鈕的分享

wxml

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

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));
      }
    }
  }

帶引數分享&轉發和獲取

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));
      }
    }
  }

注意除錯的時候在手機開啟除錯 頁面(自己分享自己點選)

因為是直接跳轉到index頁面所以在index.js頁面獲取

 onLoad: function (options) {
 //列印獲取的資料
    console.log(options.id)
  },

檢查是否分享成功並指定群和個人的分享

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){
      }
    }
  }

比較全面的轉發和分享