vue hash模式下微信分享，實現參數傳遞

背景

vue項目hash模式下，需要實現微信分享。支持傳遞多參、無參、以及指定跳轉頁面、可配置

實現思路

由於hash模式 #符號的存在，在不同平台會存在兼容性問題。會導致 分享出去的頁面不能跳轉到指定頁面。所以思路就是 將 頁面路徑 作為一個參數分享出去（本例 稱它為 path參數），打開分享鏈接后 我們根據path參數 來還原URL，進行重定向。

主要操作

1、重定向判斷

在進入項目前，進行url判斷：

1、needRedirect 是否需要重定向：主要看path參數是否存在

2、返回homeUrl：頁面的正常路徑。將形如 http://wxh5.gek6.com/bystu/?path=/works&dudu=2&haha=123 轉換成 http://wxh5.gek6.com/bystu/#/works?dudu=2&haha=123

/**
   * 頁面重定向-確保頁面鏈接正常
   * 支持多參、無參、指定頁面
   * @returns {{needRedirect: *, homeUrl: string}}
   */
  urlResetForWcShare: function () {
    let needRedirect = false, homeUrl = '', searchObReal = {}, searchstr = ''
    let oriUrls = window.location.href.split('?')
    // let baseShareURl = 'http://wxh5.gek6.com/bystu/'
    let baseShareURl = window.location.origin + window.location.pathname
    homeUrl = baseShareURl + `#${config.platform[WECHAT.SHARE_PAGE_PATH]}`
    if (oriUrls.length > 1) {
      let searchUrls = oriUrls[1].split('#')
      let searchUrlReal = searchUrls[0]
      let searchOb = qs.parse(searchUrlReal)
      let {path} = searchOb
      config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach(item => searchObReal[item] = searchOb[item])
      if (config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)
        searchstr = `?${qs.stringify(searchObReal)}`
      needRedirect = path || config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length !== Object.keys(searchOb).length
      homeUrl += searchstr
    }
    // alert(`頁面重定向 baseShareURl: ${window.location.origin + window.location.pathname + `#${config.platform[WECHAT.SHARE_PAGE_PATH]}` + searchstr}`)
    return {
      needRedirect,
      homeUrl,
      search: searchObReal
    }
  }

2、組裝分享出去的鏈接url

主要是要攜帶一些參數：包括path參數，其他參數。

/**
   * 組裝微信分享出去的鏈接url
   * @param pm // 附帶參數
   * @returns {string}
   */
  wrapWcShareLink: function (pm = {}) {
    config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach(item => {
      if (!pm[item])
        throw new Error(`微信分享鏈接缺少額外參數: ${item}`)
    })
    pm.path = config.platform[WECHAT.SHARE_PAGE_PATH] // 根據path來設置初始頁面 當前為根路由
    return window.location.origin + window.location.pathname + '?' + qs.stringify(pm)
  },

3、實現配置化

將 分享鏈接里的攜帶參數 從配置文件讀取

 platform: {
    [WECHAT.SHARE_EXTRA_PM_KEYS]: ['dudu'], // 微信分享-附帶參數 鍵名 集合
    [WECHAT.SHARE_PAGE_PATH]: '/', // 微信分享-指定頁面
  },

使用

1、根文件 app.vue：

async created(){
      let urlResetRes = browserUtil.urlResetForWcShare()
      let {needRedirect, homeUrl, search} = urlResetRes
      if (needRedirect) {
        window.location.href = homeUrl
//        location.reload()
      } else {
        let oldDudu = storage.getLocalStorage(LOCALDATA.WORKS_ID)
        if (!oldDudu || search.dudu != oldDudu)
          storage.setLocalStorage(LOCALDATA.WORKS_ID, search.dudu)
        wx_jssdk.sdk_init(homeUrl);
      }
    }

2、初始化jssdk。

async sdk_init(homeUrl){
        // 獲取簽名數據
        let sign;
        try {
            sign = await getSign(homeUrl); // 訪問接口，獲取簽名數據　　　　
        } catch (err) {
            console.log(err)
            // alert(JSON.stringify(err))
        }
        // console.log('獲取簽名成功')
        // console.log(sign);

        wx.config({
            debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
            appId: sign.appid, // 必填，公眾號的唯一標識
            timestamp: sign.timestamp, // 必填，生成簽名的時間戳
            nonceStr: sign.noncestr, // 必填，生成簽名的隨機串
            signature: sign.signature, // 必填，簽名
            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone", "onMenuShareWeibo", 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        });
    }

額外想法：

想兼容這樣一種情形：頁面鏈接參數有垃圾參數（不屬於配置文件里的額外參數）。

此時 使用 分享鏈接（無#符號）如 http://wxh5.gek6.com/bystu/?path=/works&dudu=2&haha=123 仍可支持分享。但使用 原始鏈接（有#）如 http://wxh5.gek6.com/bystu/#/works?dudu=2&haha=123，分享不可用。實質是 window.location.href 在只改變參數的情形下，調用不起作用。

解決思路是： 在這種情形下 調用 reload()。需要注意兼容原來的功能（同時 location.href，reload 在其他情形會無限循環。所以關鍵是 判斷是否為 此情形。暫未解決！！！遺憾

優化想法：

使用偽靜態傳參，但需要后端的配合（攔截跳轉到對應的頁面）。鏈接形如：http://wxh5.gek6.com/bystu/we_2

嘗試代碼

 

/**
   * 組裝微信分享出去的鏈接url
   * @param pm // 附帶參數
   * @returns {string}
   */
  wrapWcShareLink: function (pm = {}) {
    let wePmStr = '', keysSize = config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length
    config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach((item, index) => {
      if (!pm[item])
        throw new Error(`微信分享鏈接缺少額外參數: ${item}`)
      wePmStr += `we_${item}`
      if (index+1 < keysSize)
        wePmStr += '/'
    })
    return window.location.origin + window.location.pathname + wePmStr

  },
  /**
   * 頁面重定向-確保頁面鏈接正常
   * 支持多參、無參、指定頁面
   * @returns {{needRedirect: boolean, homeUrl: string, search: {}}}
   */
  urlResetForWcShare: function () {
    let needRedirect = false, homeUrl = '', searchObReal = {}, searchstr = ''
    if (location.search)
      needRedirect = true // 二次分享 會自動加search
    let baseShareURl = window.location.origin + window.location.pathname
    let shareFlagIndex = window.location.pathname.indexOf('we_')
    if (shareFlagIndex > 0) {
      needRedirect = true
      baseShareURl = window.location.origin + window.location.pathname.substring(0, shareFlagIndex)
      let weStr = location.pathname.substring( shareFlagIndex)
      weStr = weStr.replace(/we_/g, '')
      let wePms = weStr.split('/')
      if (wePms.length !== config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)
        throw new Error(`非法鏈接，參數不匹配`)
      config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach((item, index) => searchObReal[item] = wePms[index])
      if (config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)
        searchstr = `?${qs.stringify(searchObReal)}`
    }
    //baseShareURl = 'http://wxh5.gek6.com/bystu/'
    homeUrl = baseShareURl + `#${config.platform[WECHAT.SHARE_PAGE_PATH]}` + searchstr
    alert(`頁面重定向 homeUrl: ${homeUrl}`)
    return {
      needRedirect,
      homeUrl,
      search: searchObReal
    }
  }