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


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 jscroll模拟html元素滚动条
Dec 18 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript实用方法总结
Feb 06 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
原生js实现表格循环滚动
Nov 24 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利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
canvas绘制七巧板
2017/02/03 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python 多线程重启方法
2019/02/18 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
安全教育感言
2014/03/04 职场文书
商业项目策划方案
2014/06/05 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python