微信頭像地址失效踩坑記附帶解決方案
微信頭像失效問題說明?
最近工作遇到一個(gè)微信頭像失效的問題,情況是這樣的,我們一個(gè)h5頁面在微信授權(quán)后打開,會(huì)存儲(chǔ)微信相關(guān)昵稱和頭像信息,不過,我們沒有保存圖片到自己的服務(wù)器,而是僅僅存儲(chǔ)微信頭像地址,然而過了n多天后,用戶在微信修改了自己的頭像,這時(shí)候,我們的服務(wù)是無感知的,又過了n多天,用戶去訪問我們那個(gè)h5頁面,發(fā)現(xiàn)自己的頭像是這樣的:
用戶找到我們,說自己有頭像呀,怎么沒顯示呢?
我們也反問他,是否最近改過頭像呢,他說沒,不過很早之前改過。
而此時(shí)就比較尷尬,用戶體驗(yàn)超級不好。
然后我們就去查看官方文檔,發(fā)現(xiàn)這么說的:
官方也建議自己保存下來處理。
然后我們又去google了一把,看下別人是否也被同樣的問題坑過。
看來好多用戶都遇到了,相關(guān)問題鏈接
經(jīng)??吹竭€有人的頭像時(shí)而好時(shí)而不好,那是因?yàn)?/p>
舊的頭像鏈接失效需要一定的時(shí)間,從 CDN 節(jié)點(diǎn)一個(gè)一個(gè)失效。你現(xiàn)在訪問到的應(yīng)該是舊的頭像鏈接,每次訪問可能到達(dá)不同的 CDN 節(jié)點(diǎn),導(dǎo)致時(shí)有時(shí)無。
那么如何解決這個(gè)問題呢?
我們這邊也想了好多方案,我們考慮下幾個(gè)方面,分兩個(gè)思路
思路1: 自己本地服務(wù)保存并CDN,缺點(diǎn)成本有點(diǎn)高
思路2: 有個(gè)策略定時(shí)更新頭像
- 定期更新下頭像鏈接,不要一直緩存著,比如在 session_key 過期時(shí)一起更新下頭像鏈接
- 后臺(tái)服務(wù)定期檢查頭像鏈接是否過期(怎么自動(dòng)判斷是否過期呢,下面會(huì)詳細(xì)說明)
- 前端根據(jù)頭像鏈接判斷是否過期,過期重新授權(quán)更新頭像信息
下面介紹下,怎么判斷微信的頭像是否過期了,經(jīng)過研究發(fā)現(xiàn):
正常的微信圖片返回的請求信息如下:
然而異常的圖片地址怎么返回的呢?
可以看下異常情況,返回的信息不一樣,可以根據(jù)X-Info: notexist:-6101 判斷或者 X-ErrNo: -6101 關(guān)鍵字
不過還有一個(gè)疑問,如果本地存儲(chǔ)的話,還會(huì)遇到,用戶修改頭像后,獲取的地址可能不是最新的,雖然不會(huì)顯示一個(gè)特別丑陋的頭像,這里怎么解決呢,這里需要產(chǎn)品定義個(gè)策略,哪些場景需要定期授權(quán),重新更新頭像和用戶信息等等。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-03-03JS 頁面自動(dòng)加載函數(shù)(兼容多瀏覽器)
兼容多個(gè)瀏覽器的自動(dòng)加載函數(shù)。2009-05-05簡單了解微信小程序 e.target與e.currentTarget的不同
這篇文章主要介紹了微信小程序 e.target與e.currentTarget的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02javascript中的previousSibling和nextSibling的正確用法
這篇文章主要介紹了javascript中的previousSibling和nextSibling的正確用法的相關(guān)資料,需要的朋友可以參考下2015-09-09純JS實(shí)現(xiàn)可用于頁碼更換的飛頁特效示例
這篇文章主要介紹了純JS實(shí)現(xiàn)可用于頁碼更換的飛頁特效,涉及javascript結(jié)合時(shí)間函數(shù)的數(shù)學(xué)運(yùn)算與頁面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05Echarts通過dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Echarts如何通過dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02