微信小程序分享轉發用法大全——自定義分享、全局分享、組合分享

官方提供的自定義分享

使用隱式頁面配置函數實現的全局分享——推薦

使用隱式路由實現的全局分享——不推薦，僅供了解隱式路由

結合隱式頁面函數、隱式路由實現所有頁面分享配置及控制（頁面無需再開啟或自定義配置）——強烈推薦

前言：

目前微信小程序只開放了頁面自定義分享的API，為了能夠更靈活的進行分享配置、滿足運營的需求，本文總結了微信小程序分享轉發的多種用法，其中包括官方提供的頁面自定義分享，使用隱式路由和頁面配置實現的全局分享和全局+自定義的分享組合方式，希望能對需要實現分享多樣化的同學有所幫助。

官方提供的自定義分享：

先看下官網介紹：

 如上，只有定義了轉發函數，才能分享頁面，如此如果只需分享頁面，只需要定義分享函數即可：

onShareAppMessage(res) { }

如果需要自定義分享內容，則需要對函數進行配置，如下：

onShareAppMessage: function (res) {
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})

如上，如果需要自定定義全局分享，則可以將全局分享的內容對象配置在app.js中的全局變量中，然后所有需要分享的頁面中配置到分享函數中去就好了，如下：

  //App.js 全局數據
  globalData: {
    //分享內容
    globalShareInfo: {
      title: '全局分享標題',
      path: '/pages/login/index',
      imageUrl: 'https://shopv3.oss-cn-hangzhou.aliyuncs.com/gift/ep/other/share.jpg'
    }
  }

總體來說，微信小程序要設置全局分享還是比較麻煩的，你需要每個頁面都要去開啟，相對來說支付寶小程序提供有全局分享就要好多了。

那么微信小程序能不能實現支付寶小程序一樣的全局分享呢？經過一番探索研究，從微信小程序底層的一些隱式函數實現了全局分享的功能，如支付寶小程序一樣，一處配置，全局有效。

全局自定義分享——使用微信小程序隱式頁面配置函數實現：

demo代碼片段點擊下載

本例使用了隱式函數 Page 以及返回對象 pageConfig 來對當前訪問頁面進行自定義分享配置，具體代碼如下：

// app.js
/**
 * 全局分享配置，頁面無需開啟分享
 * 如頁面開啟分享開關，則走頁面分享配置（即使未配置內容）
 */
! function() {
  //獲取頁面配置並進行頁面分享配置
  var PageTmp = Page
  Page = function(pageConfig) {
    let view = Page
    //全局開啟分享
    pageConfig = Object.assign({
      onShareAppMessage: function() {
        
      }
    }, pageConfig);
    //3. 配置頁面模板
    PageTmp(pageConfig);
  }
}();

如上，只需要在小程序主入口app.js中寫入以上代碼對頁面分享進行直接配置就好了（App()外邊）。

功能表現：

• 只需要入口js中配置如上代碼，即可實現全局自定義分享；
• 如果頁面配置有分享事件的函數，那么全局分享將失效，直接走頁面的分享（即使頁面分享未配置內容，只要打開就會走頁面分享）；
• 經多次驗證，上述方法實現的全局分享自動攜帶當前頁面的完整參數，無需另外獲取。

如果需要配置全局分享圖片或者標題，直接在 onShareAppMessage 函數中配置就好了，如下：

pageConfig = Object.assign({
      onShareAppMessage: function () {
        return {
          title:"自定義全局分享",
          imageUrl: wx.getStorageSync("shareUrl")
        }
      }
    }, pageConfig);

使用隱式路由間接實現全局分享配置：

這種方法就沒上邊的好用了，但是涉及到隱式路由的使用，有興趣的可以了解下，需要注意的是這種方法間接實現全局分享只是修改分享配置，前提是頁面必須配置分享事件函數，否則無效。

這種全局分享的實現方法不建議用，就當了解下微信小程序的隱式路由的使用就好了。具體代碼如下：

App({
  onLaunch: function() {
    this.overShare()
  },
  /**
   * 間接實現全局設置分享內容（需要頁面配置分享事件函數）
   */
  overShare: function() {
    let self = this
    // 調用隱藏路由回調
    wx.onAppRoute(function(res) {
      //獲取加載的頁面
      let pages = getCurrentPages(),
        //獲取當前頁面的對象
        view = pages[pages.length - 1],
        data;
      if (view) {
        data = view.data;
        if (true || !data.isOverShare) {
          data.isOverShare = true;
          view.onShareAppMessage = function() {
            //重寫分享配置
            return {
              title: '分享標題',
              imageUrl: wx.getStorageSync("shareUrl")
            };
          }
        }
      }
    })
  },
})

總結：

通過上邊的方式，我們已經實現了全局自定義分享。如果需要對大部分頁面進行全局分享配置（指定標題、圖片、頁面路徑），那么在app.js中的全局分享代碼中進行配置就好了。對於部分需要單獨配置的，可以直接在頁面進行特定配置就好了。

如此，單個頁面分享、全局分享、組合分享也就都可以實現了。

---

 

應用擴展——結合隱式頁面函數、隱式路由實現所有頁面分享配置及控制（頁面無需再開啟或自定義配置）：

結合隱式路由，可實現全局控制所有頁面的分享配置，包括全局分享、頁面默認分享、頁面自定義分享，如下圖所示：

 示例代碼：

// app.js
/**
 * 全局分享配置，頁面無需開啟分享
 * 使用隱式頁面函數進行頁面分享配置
 * 使用隱式路由獲取當前頁面路由，並根據路由來進行全局分享、自定義分享
 */
! function () {
  //獲取頁面配置並進行頁面分享配置
  var PageTmp = Page
  Page = function (pageConfig) {
    //1. 獲取當前頁面路由
    let routerUrl = ""
    wx.onAppRoute(function (res) {
      let pages = getCurrentPages(),        
        view = pages[pages.length - 1];
      routerUrl = view.route
    })

    //2. 全局開啟分享配置
    pageConfig = Object.assign({
      onShareAppMessage: function () {
        //根據不同路由設置不同分享內容（微信小程序分享自帶參數，如非特例，不需配置分享路徑）
        let shareInfo={}
        let noGlobalSharePages=["index/index"]
        //全局分享配置，如部分頁面需要頁面默認分享或自定義分享可以單獨判斷處理
        if (!routerUrl.includes(noGlobalSharePages)){
          shareInfo = {
            title: "自定義全局分享",
            imageUrl: wx.getStorageSync("shareUrl")
          }
        }
        return shareInfo
      }
    }, pageConfig);
    // 配置頁面模板
    PageTmp(pageConfig);
  }
}();

如上，無需頁面開啟和配置，只需要在app.js中編寫以上代碼，即可對所有頁面進行自定義分享配置。