關(guān)于Vue中路由使用history模式，開發(fā)微信H5頁(yè)面分享時(shí)在安卓上簽名有效成功，但是在IOS設(shè)備上一直報(bào)錯(cuò)簽名失效問(wèn)題

問(wèn)題描述:在Vue開發(fā)過(guò)程中，路由使用History模式下，在使用微信分享時(shí)，在微信開發(fā)者工具上一切正常。在安卓上一切正常。 但是?。?！在IOS上反復(fù)報(bào)簽名錯(cuò)誤。

以下是真機(jī)測(cè)試截圖,劃掉黑線的是我個(gè)人IOS設(shè)備分享出來(lái)一直是服務(wù)號(hào)，接著下面分享出來(lái)自定義內(nèi)容是安卓分享正常,話不多說(shuō)上圖?。。?！

我的代碼:

需求描述:需要從首頁(yè)進(jìn)入活動(dòng)詳情頁(yè)，然后在詳情頁(yè)分享詳情頁(yè)面內(nèi)容。所以需要帶參數(shù)傳參，通常vue傳參通過(guò)params,query,字符串拼接這三種方式進(jìn)行跳轉(zhuǎn)傳參

問(wèn)題分析:因?yàn)樘O果分享會(huì)是調(diào)取簽名失敗是因?yàn)?蘋果在微信中瀏覽器機(jī)制和安卓不同,有IOS緩存問(wèn)題，和IOS對(duì)單頁(yè)面的優(yōu)化問(wèn)題，通俗點(diǎn)說(shuō)安卓進(jìn)行頁(yè)面跳轉(zhuǎn)分享時(shí)會(huì)刷新當(dāng)前的url,而蘋果不會(huì)，蘋果是通過(guò)歷史記錄進(jìn)來(lái)的，不會(huì)刷新url所以會(huì)導(dǎo)致簽名失敗(這里解釋的可能不夠詳細(xì)，可以去百度)。

因?yàn)樾枨笾恍枰窒懋?dāng)前頁(yè)面的時(shí)候有自定義內(nèi)容,其他頁(yè)面分享出去是公眾號(hào)都無(wú)所謂，主要是活動(dòng)，所以就用了如下解決辦法?。。?！

因?yàn)関ue的history在IOS的微信分享時(shí)不會(huì)刷新，但是我們又要做自定義分享。我在網(wǎng)上也看了很多，比如什么beforerouteEnter的路由判斷，或者寫在Vue.prototype.Wxshare()的原型鏈中等，看起來(lái)都太麻煩，不夠簡(jiǎn)單粗暴，但是這些方法可以好像可以做到判斷每一個(gè)分享頁(yè)面的自定義內(nèi)容。而我只需要當(dāng)前分享特定的單一頁(yè)面，那么我們?cè)贏頁(yè)面跳轉(zhuǎn)B頁(yè)面（需要分享的頁(yè)面）就不用vue的history的push來(lái)跳轉(zhuǎn)傳參， 我們用！我們用！我們用！window.location.href="...." rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 來(lái)跳轉(zhuǎn)傳參，重要的事情說(shuō)三遍!!!!

用：window.location.href="...." ?。。?window.location.href="...."?。?！ window.location.href="...."?。。∠旅媸谴a?。?！

注釋掉的部分是一開始我用params來(lái)傳參的，這樣就會(huì)出現(xiàn)我上面提到到在IOS上SPA頁(yè)面不會(huì)刷新 url的問(wèn)題，但是原生的window.location.href可以解決這個(gè)問(wèn)題?。。∵@樣在子頁(yè)面我們?cè)赾reate生命周期去截取url中的字符串把需要的參數(shù)截取下來(lái)，賦值到data中去一樣可以使用. 下面是子頁(yè)面接收數(shù)據(jù)截取字符串(這里的截取字符串是直接復(fù)制找的，趕時(shí)間，你可以自己寫，一次性截取3 個(gè)字符串)!!!

就這樣我們的分享IOS需求就實(shí)現(xiàn)了，不需要在去改動(dòng)我上面的微信分享配置的代碼!!但是此方法個(gè)人想的只適用于分享特定頁(yè)面，如果用戶需要分享每一個(gè)頁(yè)面不同的自定義內(nèi)容，可以去網(wǎng)上找使用其他的路由守衛(wèi)判斷，或者用Hash模式來(lái)開發(fā) （Hash模式我也不確定是否真的可以,有興趣的可以嘗試，嘗試后歡迎留言！?。?/p>

以下是真機(jī)測(cè)試成功！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。