Vue開發微信H5 微信分享簽名失敗問題解決方案

 關於Vue中路由使用history模式,開發微信H5頁面分享時在安卓上簽名有效成功,可是在IOS設備上一直報錯簽名失效問題

問題描述:在Vue開發過程當中,路由使用History模式下,在使用微信分享時,在微信開發者工具上一切正常。在安卓上一切正常。 可是!!!在IOS上反覆報簽名錯誤。vue

如下是真機測試截圖,劃掉黑線的是我我的IOS設備分享出來一直是服務號,接着下面分享出來自定義內容是安卓分享正常,話很少說上圖!!!!瀏覽器

 

個人代碼:緩存

 

 

需求描述:須要從首頁進入活動詳情頁,而後在詳情頁分享詳情頁面內容。因此須要帶參數傳參,一般vue傳參經過params,query,字符串拼接這三種方式進行跳轉傳參
問題分析:由於蘋果分享會是調取簽名失敗是由於:蘋果在微信中瀏覽器機制和安卓不一樣,有IOS緩存問題,和IOS對單頁面的優化問題,通俗點說安卓進行頁面跳轉分享時會刷新當前的url,而蘋果不會,蘋果是經過歷史記錄進來的,不會刷新url因此會致使簽名失敗(這裏解釋的可能不夠詳細,能夠去百度)。微信

由於需求只須要分享當前頁面的時候有自定義內容,其餘頁面分享出去是公衆號都無所謂,主要是活動,因此就用了以下解決辦法!!!!微信開發

由於vue的history在IOS的微信分享時不會刷新,可是咱們又要作自定義分享。我在網上也看了不少,好比什麼beforerouteEnter的路由判斷,或者寫在Vue.prototype.Wxshare()的原型鏈中等,看起來都太麻煩,不夠簡單粗暴,可是這些方法能夠好像能夠作到判斷每個分享頁面的自定義內容。而我只須要當前分享特定的單一頁面,那麼咱們在A頁面跳轉B頁面(須要分享的頁面)就不用vue的history的push來跳轉傳參,咱們用!咱們用!咱們用!window.location.href="...."來跳轉傳參,重要的事情說三遍!!!!工具

用:window.location.href="...."  !!! window.location.href="...."!!! window.location.href="...."!!!下面是代碼!!!測試

註釋掉的部分是一開始我用params來傳參的,這樣就會出現我上面提到到在IOS上SPA頁面不會刷新 url的問題,可是原生的window.location.href能夠解決這個問題!!!這樣在子頁面咱們在create生命週期去截取url中的字符串把須要的參數截取下來,賦值到data中去同樣可使用.下面是子頁面接收數據截取字符串(這裏的截取字符串是直接複製找的,趕時間,你能夠本身寫,一次性截取3 個字符串)!!!優化

 

 

 

 就這樣咱們的分享IOS需求就實現了,不須要在去改動我上面的微信分享配置的代碼!!可是此方法我的想的只適用於分享特定頁面,若是用戶須要分享每個頁面不一樣的自定義內容,能夠去網上找使用其餘的路由守衛判斷,或者用Hash模式來開發(Hash模式我也不肯定是否真的能夠,有興趣的能夠嘗試,嘗試後歡迎留言!!)url

如下是真機測試成功!spa

相關文章
相關標籤/搜索