对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案
關(guān)于Vue中路由使用history模式,開發(fā)微信H5頁面分享時(shí)在安卓上簽名有效成功,但是在IOS設(shè)備上一直報(bào)錯(cuò)簽名失效問題
問題描述:在Vue開發(fā)過程中,路由使用History模式下,在使用微信分享時(shí),在微信開發(fā)者工具上一切正常。在安卓上一切正常。 但是!!!在IOS上反復(fù)報(bào)簽名錯(cuò)誤。
以下是真機(jī)測試截圖,劃掉黑線的是我個(gè)人IOS設(shè)備分享出來一直是服務(wù)號,接著下面分享出來自定義內(nèi)容是安卓分享正常,話不多說上圖!!!!
我的代碼:
需求描述:需要從首頁進(jìn)入活動詳情頁,然后在詳情頁分享詳情頁面內(nèi)容。所以需要帶參數(shù)傳參,通常vue傳參通過params,query,字符串拼接這三種方式進(jìn)行跳轉(zhuǎn)傳參
問題分析:因?yàn)樘O果分享會是調(diào)取簽名失敗是因?yàn)?蘋果在微信中瀏覽器機(jī)制和安卓不同,有IOS緩存問題,和IOS對單頁面的優(yōu)化問題,通俗點(diǎn)說安卓進(jìn)行頁面跳轉(zhuǎn)分享時(shí)會刷新當(dāng)前的url,而蘋果不會,蘋果是通過歷史記錄進(jìn)來的,不會刷新url所以會導(dǎo)致簽名失敗(這里解釋的可能不夠詳細(xì),可以去百度)。
因?yàn)樾枨笾恍枰窒懋?dāng)前頁面的時(shí)候有自定義內(nèi)容,其他頁面分享出去是公眾號都無所謂,主要是活動,所以就用了如下解決辦法!!!!
因?yàn)関ue的history在IOS的微信分享時(shí)不會刷新,但是我們又要做自定義分享。我在網(wǎng)上也看了很多,比如什么beforerouteEnter的路由判斷,或者寫在Vue.prototype.Wxshare()的原型鏈中等,看起來都太麻煩,不夠簡單粗暴,但是這些方法可以好像可以做到判斷每一個(gè)分享頁面的自定義內(nèi)容。而我只需要當(dāng)前分享特定的單一頁面,那么我們在A頁面跳轉(zhuǎn)B頁面(需要分享的頁面)就不用vue的history的push來跳轉(zhuǎn)傳參, 我們用!我們用!我們用!window.location.href="...." rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 來跳轉(zhuǎn)傳參,重要的事情說三遍!!!!
用:window.location.href="...." !!! window.location.href="...."!!! window.location.href="...."!!!下面是代碼!!!
注釋掉的部分是一開始我用params來傳參的,這樣就會出現(xiàn)我上面提到到在IOS上SPA頁面不會刷新 url的問題,但是原生的window.location.href可以解決這個(gè)問題!!!這樣在子頁面我們在create生命周期去截取url中的字符串把需要的參數(shù)截取下來,賦值到data中去一樣可以使用. 下面是子頁面接收數(shù)據(jù)截取字符串(這里的截取字符串是直接復(fù)制找的,趕時(shí)間,你可以自己寫,一次性截取3 個(gè)字符串)!!!
就這樣我們的分享IOS需求就實(shí)現(xiàn)了,不需要在去改動我上面的微信分享配置的代碼!!但是此方法個(gè)人想的只適用于分享特定頁面,如果用戶需要分享每一個(gè)頁面不同的自定義內(nèi)容,可以去網(wǎng)上找使用其他的路由守衛(wèi)判斷,或者用Hash模式來開發(fā) (Hash模式我也不確定是否真的可以,有興趣的可以嘗試,嘗試后歡迎留言!!)
以下是真機(jī)測試成功!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: relativelayout设置边框_A
- 下一篇: vue 父组建获取子组建方法为获得_Vu