（干貨）微信小程序之轉發好友

今天簡單地說下微信小程序的轉發功能，為什么要簡單的說下呢，因為主要講的就是轉發給好友或者群組，還有一種是分享到朋友圈，這種就比較復雜一點了，先稍微透漏一點，分享到朋友圈主要是兩種方法，一種是后台直接生成海報圖，一種是前端通過canvas生成海報。以后有機會再詳細說，好了，言歸正傳繼續說我們的轉發好友。

首先介紹一個微信小程序的API：onShareAppMessage(options)

在 Page 中定義 onShareAppMessage 函數，設置該頁面的轉發信息。

• 只有定義了此事件處理函數，右上角菜單才會顯示 “轉發” 按鈕
• 用戶點擊轉發按鈕的時候會調用
• 此事件需要 return 一個 Object，用於自定義轉發內容

options 參數說明

參數	類型	說明	最低版本
from	String	轉發事件來源。button：頁面內轉發按鈕；menu：右上角轉發菜單	1.2.4
target	Object	如果 from 值是 button，則 target 是觸發這次轉發事件的 button，否則為 undefined	1.2.4

自定義轉發字段

 

字段	說明	默認值	最低版本
title	轉發標題	當前小程序名稱
path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4		1.5.0
success	轉發成功的回調函數		1.1.0
fail	轉發失敗的回調函數		1.1.0
complete	轉發結束的回調函數（轉發成功、失敗都會執行		1.1.0

 

還有一個值那就是shareTickets他是轉發成功返回的，並且是個數組，每一項是一個 shareTicket ，對應一個轉發對象

API先說到這，接下來就是轉發的實現

先看圖：

首先要在onLoad中配置wx.showShareMenu

  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目標信息
      withShareTicket: true
    }); 
  },

然后再配置onShareAppMessage

/* 轉發*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(ops.target)
    }
    return {
      title: '轉發dom',
      path: `pages/index/index`,
      success: function (res) {
        // 轉發成功
        console.log("轉發成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以獲取群組信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 轉發失敗
        console.log("轉發失敗:" + JSON.stringify(res));
      }
    }
  },

我解釋一下wx.getShareInfo這個可以獲取到獲取轉發詳細信息

完整js代碼就是

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目標信息
      withShareTicket: true
    }); 
  },
  /* 轉發*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(ops.target)
    }
    return {
      title: '轉發dom',
      path: `pages/index/index`,
      success: function (res) {
        // 轉發成功
        console.log("轉發成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以獲取群組信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 轉發失敗
        console.log("轉發失敗:" + JSON.stringify(res));
      }
    }
  },
})

聰明的同學就該知道接下來該是wxml代碼

<view class="container">
  <view class="userinfo">
   <button open-type="share">分享好友</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

友情提示一下如果點擊按鈕分享的話，button一定要設置open-type="share"否則不起作用。

如果覺得文章還不錯並對你有幫助的話，請分享給你的小伙伴，並點贊，有什么不懂得可以在底下留言哦。

如果想看源碼的話可以去我的github上下載，歡迎star，github： https://github.com/Mr-MengBo/wx-share