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


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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
js中substring和substr的定义和用法
May 05 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 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
漂亮但不安全的CTB
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
js实现碰撞检测
2021/01/29 Javascript
python 文本单词提取和词频统计的实例
2018/12/22 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
django queryset相加和筛选教程
2020/05/18 Python
使用Python构造hive insert语句说明
2020/06/06 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
安全责任书范本
2014/04/15 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
《法国号》教学反思
2016/02/22 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js