微信小程序之web-view中的頁面分享

遇到的問題

• 由於整個小程序都是用web-view嵌入的，這個時候，如果單純的進行頁面分享，只會導致不管在web-view的哪個頁面進行分享，都會在點擊后進入首頁。

解決思路

• 首先是開啟小程序的頁面分享功能

wx.showShareMenu({
  withShareTicket: true, // 該參數在做分享到群內的統計的時候可以用到，單獨分享給某個人是undefined，在小程序的load或者show的回調中可以拿到這個值
})

• 然后在onShareAppMessage中包裝一下分享的信息，該回調是在點擊右上角的分享之后，但是信息還沒有發出去之前進行的一次回調，傳入了一個包含from,dataset以及webViewUrl三個參數的對象。它的返回值就是對應的分享信息，這個時候我們拿到了對應的webview里面的url之后就可以做一些自己需要的操作了。

  onShareAppMessage(options) {
    console.log(options);
    const { webViewUrl } = options;
    const i = webViewUrl.indexOf('?');
    let search = '',
      url = webViewUrl;
    if(i !== -1) {
      url = webViewUrl.slice(0, i);
      search = `${webViewUrl.slice(i + 1)}`;
    }
    const shareObj = {
      title: "分享的標題",        // 默認是小程序的名稱(可以寫slogan等)
      path: `/pages/index?url=${url}${search ? '&' : ''}${search}`,        // 默認是當前頁面，必須是以‘/’開頭的完整路徑，通過拼接的方式，把需要分享的web-view的url以及參數拼接進去，然后在該`web-view`的頁面中去做參數判斷，一旦傳入了對應的url和參數，就進入對應的url並攜帶對應的參數
      // imageUrl: '',     //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4
      success: function (res) {
        // 轉發成功之后的回調
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {
        // 轉發失敗之后的回調
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用戶取消轉發
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 轉發失敗，其中 detail message 為詳細失敗信息
        }
      },
      complete: function () {
        // 轉發結束之后的回調（轉發成不成功都會執行）
      }
    }
    // 來自頁面內的按鈕的轉發
    if (options.from == 'button') {
      var data= options.target.dataset;
      console.log(data.name);     // shareBtn
      // 此處可以修改 shareObj 中的內容
      // shareObj.path = '/pages/index' + data.name;
    }
    // 返回shareObj
    return shareObj;
  }

還存在的問題

• 這樣分享之后，進入之后確實能夠進入到對應的url中，但是會出現無法回退到小程序首頁的問題。由於整個小程序只有一個web-view，導致了所有頁面的切換都是在一個原生頁面下進行的，所以如果需要進行回退，最好是新增一個web-view的頁面，用到專門處理分享的鏈接。