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


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的网页SELECT下拉框美化代码
Oct 28 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
树结构之JavaScript
2017/01/24 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
python读取和保存视频文件
2018/04/16 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python如何绘制日历图和热力图
2020/08/07 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
介绍一下gcc特性
2012/01/20 面试题
个人找工作自荐信格式
2013/09/21 职场文书
测试工程师职业规划书
2014/02/06 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年派出所工作总结
2015/04/24 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
把77A收信机改造成收音机
2022/04/05 无线电