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


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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
用js实现的页面关键字密度查询代码
Dec 27 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php url路由入门实例
2014/04/23 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python中实现将多个print输出合成一个数组
2018/04/19 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python生成器generator原理及用法解析
2020/07/20 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
婚假请假条格式及范文
2014/04/10 职场文书
设计师求职信模板
2014/05/06 职场文书
小学班级口号
2014/06/09 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
名人传读书笔记
2015/06/26 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android