微信分享—ios和安卓機制居然不一樣!
在加入了使用者分享追蹤功能
之後,頁面已經載入完成的情況下,安卓分享功能沒有任何問題,ios卻總是分享失敗。
關於ios和安卓裝置的差別
專案需求是,我們需要對使用者的分享行為做追蹤,對使用者從哪個人分享的連結進來的做記錄。所以每個使用者有一個唯一的分享碼。
使用者A分享出去,連結上帶有他自己的分享碼。
使用者B點進連結的一瞬間,把當前url上的分享碼傳給後端做記錄,同時替換上自己的分享碼。
我使用替換引數的方式是直接修改router的query
this.$router.push({ name: 'routername' //當前路由名稱 query: { sharecode: 'sharecode' //修改後的sharecode }})
加上追蹤記錄之後,卻發現安卓裝置能夠分享成功,也能拿到正確的記錄。但是ios總是分享失敗,就算切換到其他頁面也依然無法分享,只有在重新整理頁面後才能分享成功。。。
amazing...
如何和後端互動
簽名是後端和微信伺服器做的事情,我要做的就是把要做簽名的url傳給後端。
做法很簡單,就是監聽路由變化(只變化了引數也需要監聽),每次變化時給後端傳url。
因為不管從什麼渠道點入我們的連結,都會有分享碼生成並加在路由上,導致一開始頁面就會觸發兩次路由變化;而且,如果使用者沒有登陸的話微信爸爸還會強行跳轉授權,導致頁面過載一次,所以如果一個使用者沒有登陸,那頁面會觸發4次路由變化!那就需要和後端互動四次。
不能忍!
最後商議的是,預設進入頁面的第一次不做記錄 ,這樣首屏最多隻需要互動2次(劃重點,後面要考)。
以上故事在告訴我們人為什麼要作死
好了我們回到ios分享失敗的問題上
解決過程
chorme瀏覽器除錯模式沒發現毛病,微信開發者工具也沒發現有問題,就是在ios真機上出現了這個bug。(微信開發者工具居然是一個披著ios外衣的android??dev環境是ios,表現行為卻和安卓一毛一樣)
千辛萬苦線上線下除錯,最後發現是真機上在用自己的分享碼
替換別人分享碼
的這個步驟出現了問題。
安卓裝置能夠正常替換sharecode引數,但是ios卻沒有替換成功。後端做簽名使用的url是拼接sharecode替換後的連結,所以導致簽名和路由匹配不上。
確認使用路由引數替換的方法沒有問題,因為安卓環境能夠正常替換。所以ios環境該怎麼辦??
這就引申出了一個問題:vue框架下ios如何在當前頁面替換路由引數??
最後是很不優雅的強行過載 - -,相信我會找到解決辦法的 > _ <
就這樣第一天結束了
——————————時間到了第二天————————————
繼續填坑
過載這麼噁心的方法當然不行了,不要虛繼續幹
索性把所有的url都alert出來。
然後,在ios上發現了一個神奇的現象
- 點選一個連結,比如
http:example.com/a&share=111
- ios中彈出當前url沒有問題
http:example.com/a&share=111
,緊接著下一步執行替換分享碼操作,將share替換成222,即理論上url會變成http:example.com/a&share=222
。 - 按照昨天的邏輯,share不會被替換,可以彈出url發現,被替換了!當前url的確是
http:example.com/a&share=222
。 - 此時再執行分享操作,同時複製當前url。
- 分享失敗!貼上剛剛複製的url,share依然是
111
!wtf !?
ok,緊接著我進行了下一步操作
- 我頻繁切換的我的路徑,跳到c又跳到d,等等,alert出來的url也隨著我的切換進行了變化。
- 在c或者d頁面執行分享操作,同時複製當前url。
- 分享失敗!貼上剛剛複製的url,share依然是
111
!(你沒看序列,就是和上面一毛一樣)
以上現象可以得出一個結論,在ios環境下(安卓分享正常所以沒有測試是不是也有同樣的行為),如果簽名驗證失敗,那麼不管路由如何變化,不僅分享本身不會成功,而且分享出去的路由永遠都是第一次載入時的路由。
後來查閱資料才發現,ios的簽名驗證機制和安卓不一樣。
- 安卓:對需要分享的每個頁面路由做簽名,並載入頁面分享資訊
- ios: 只需要對第一次進來的頁面路由做簽名,對每個要分享的頁面載入分享資訊
這說明了啥,ios環境下,微信只認第一次進來的路由啊!
讓我們再把和後端互動部分的重點重複一遍:預設進入頁面的第一次不做記錄 ,這樣首屏最多隻需要互動2次
不記錄你個大頭貼
最後,判斷環境是ios的時候,老老實實把第一次的路由給記上。
你問我那ios環境下的首屏最多需要載入4次啦?
認真聽講的小朋友,獎勵你一面國旗~
但是!ios只認第一次的路由,我只需要傳第一次路由給後端就行,監聽路由變化都不用