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


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添加重载函数的辅助方法
Jul 04 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Python实现栈的方法
2015/05/26 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python实现百度语音识别api
2018/04/10 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python3 实现口罩抽签的功能
2020/03/11 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
安全教育心得体会
2013/12/29 职场文书
中式婚礼主持词
2014/03/13 职场文书
国庆宣传标语
2014/06/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书