微信头像地址失效踩坑记附带解决方案


Posted in Javascript onSeptember 23, 2019

微信头像失效问题说明?

最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是无感知的,又过了n多天,用户去访问我们那个h5页面,发现自己的头像是这样的:

微信头像地址失效踩坑记附带解决方案

用户找到我们,说自己有头像呀,怎么没显示呢?
我们也反问他,是否最近改过头像呢,他说没,不过很早之前改过。

而此时就比较尴尬,用户体验超级不好。

然后我们就去查看官方文档,发现这么说的:

官方文档说明-获取用户个人信息

微信头像地址失效踩坑记附带解决方案

官方也建议自己保存下来处理。

然后我们又去google了一把,看下别人是否也被同样的问题坑过。

微信头像地址失效踩坑记附带解决方案

微信头像地址失效踩坑记附带解决方案

看来好多用户都遇到了,相关问题链接

经常看到还有人的头像时而好时而不好,那是因为

旧的头像链接失效需要一定的时间,从 CDN 节点一个一个失效。你现在访问到的应该是旧的头像链接,每次访问可能到达不同的 CDN 节点,导致时有时无。

那么如何解决这个问题呢?

我们这边也想了好多方案,我们考虑下几个方面,分两个思路

思路1: 自己本地服务保存并CDN,缺点成本有点高

思路2: 有个策略定时更新头像

  • 定期更新下头像链接,不要一直缓存着,比如在 session_key 过期时一起更新下头像链接
  • 后台服务定期检查头像链接是否过期(怎么自动判断是否过期呢,下面会详细说明)
  • 前端根据头像链接判断是否过期,过期重新授权更新头像信息

下面介绍下,怎么判断微信的头像是否过期了,经过研究发现:

正常的微信图片返回的请求信息如下:

微信头像地址失效踩坑记附带解决方案

然而异常的图片地址怎么返回的呢?

微信头像地址失效踩坑记附带解决方案

可以看下异常情况,返回的信息不一样,可以根据X-Info: notexist:-6101 判断或者 X-ErrNo: -6101 关键字

不过还有一个疑问,如果本地存储的话,还会遇到,用户修改头像后,获取的地址可能不是最新的,虽然不会显示一个特别丑陋的头像,这里怎么解决呢,这里需要产品定义个策略,哪些场景需要定期授权,重新更新头像和用户信息等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 #Javascript
微信小程序使用蓝牙小插件
Sep 23 #Javascript
微信小程序实现蓝牙打印
Sep 23 #Javascript
微信接入之获取用户头像的方法步骤
Sep 23 #Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 #Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 #Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JavaScript Date对象详解
2016/03/01 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python tqdm库的使用
2020/11/30 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
计算机操作自荐信
2013/12/07 职场文书
小学新学期教师寄语
2014/01/18 职场文书
法人授权委托书范本
2014/04/04 职场文书
企业人事任命书
2014/06/05 职场文书
React四级菜单的实现
2022/04/08 Javascript
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS