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


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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
详解vue axios二次封装
Jul 22 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
微信小程序如何获取用户头像和昵称
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
探讨如何把session存入数据库
2013/06/07 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
关于vue面试题汇总
2018/03/20 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python全局变量操作详解
2015/04/14 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python计算导数并绘图的实例
2020/02/29 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
为什么说python更适合树莓派编程
2020/07/20 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
维也纳通行证:Vienna PASS
2019/07/18 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
数据库基础的一些面试题
2012/02/25 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
四种会话跟踪技术
2015/05/20 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
零件设计自荐信范文
2013/11/27 职场文书
毕业寄语大全
2014/04/09 职场文书
防震减灾主题班会
2015/08/14 职场文书