Vue history模式微信分享填坑

這個問題困擾了我很久,相信有很多人也都碰到過,因為關(guān)于這個坑的提問能百度出一堆,之前也一直在網(wǎng)上尋找解決方案,有些文章要么一筆帶過,有些要么不適用,姿勢始終不正確,還好,通過不斷的嘗試與摸索,終于搞定了。

行李旅宿

先說問題,做過傳統(tǒng)多頁面應(yīng)用微信分享的人都知道,不管是Android還是IOS上,在需要做自定義分享的頁面上做一次簽名和注入就可以了,只要簽名正確,就不會有問題。但是對于SPA的應(yīng)用,表現(xiàn)的就很奇葩,我的問題是Android分享正常,但是在IOS上始終報"Invalid Signature",而有些人是Android有問題,而IOS沒問題,從jssdk文檔上看,這個可能是android對于pushState的支持問題,在此不討論這個。

由于使用的是vue-router做頁面跳轉(zhuǎn),而問題也出現(xiàn)在這里,IOS對于URL的處理與Android有差異。對于Android而言,它的每次路由的變換,URL都跟著改變,也就是說它的Landing Page和Current Page同時在變,這就和傳統(tǒng)應(yīng)用一樣,在每個頁面做簽名就行。但是對IOS而言,每次路由的變換,URL卻不變,也就是說雖然它的Currernt Page在變,但是它的Landing Page不變,這就是讓人很蛋疼的地方,也不知道是微信的問題還是safari的問題,當(dāng)初想搞清楚這個還給微信團(tuán)隊發(fā)了封郵件,很顯然,他們很忙沒有理我。

經(jīng)過反復(fù)的試錯,起初,將一般分享的問題解決了,但是如果配些諸如GA的跟蹤參數(shù),或者進(jìn)行二次分享還是會有問題,最后對URL又進(jìn)行了一次編碼處理,總算一切正常。

分享成功

解決方案也不麻煩:

1、對于Android,用每個頁面的URL做簽名參數(shù),對于IOS,使用入口URL進(jìn)行簽名(切記),我是使用VUEX進(jìn)行url的更新

2、一定要在mounted中做簽名的初始化操作,反正我的created就是不成功。

3、對需要簽名的URL進(jìn)行encodeURIComponent編碼,這個主要處理URL帶參的分享問題。

4、在后臺再對用于簽名的URL進(jìn)行一次解碼。

踩了這么長時間的坑,趕緊給后人栽個樹,我這個只是history模式的解決方法,hash模式的問題不在這個討論范圍內(nèi)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,460評論 25 708
  • 無所為而無所謂,無所謂而無所不為。 ——三火卍 ...
    陳小五525閱讀 436評論 0 0
  • AssetLibrary組成 AssetLibrary:代表整個設(shè)備中的資源庫(照片庫),通過AssetLibra...
    堂吉訶德灬閱讀 924評論 0 0
  • 小時候是父母留我們在家出門打拼,現(xiàn)在反過來,成了我們外出不歸。昨天晚上吃飯,爸爸說明天就沒有人幫我洗碗了,一...
    Amanda_DQQ閱讀 214評論 1 1
  • “活在未來”,一直以為,我們都接觸到“活在當(dāng)下”這個概念,今天聽到“活在未來”這個詞確實(shí)有點(diǎn)震動。 “活在未來”其...
    明娜的詩和遠(yuǎn)方閱讀 331評論 0 0