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


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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
农历与西历对照
2006/09/06 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
闪闪的红星观后感
2015/06/08 职场文书
收入证明申请书
2015/06/12 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL