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

微信头像失效问题说明？

最近工作遇到一个微信头像失效的问题，情况是这样的，我们一个h5页面在微信授权后打开，会存储微信相关昵称和头像信息，不过，我们没有保存图片到自己的服务器，而是仅仅存储微信头像地址，然而过了n多天后，用户在微信修改了自己的头像，这时候，我们的服务是无感知的，又过了n多天，用户去访问我们那个h5页面，发现自己的头像是这样的：

用户找到我们，说自己有头像呀，怎么没显示呢？
我们也反问他，是否最近改过头像呢，他说没，不过很早之前改过。

而此时就比较尴尬，用户体验超级不好。

然后我们就去查看官方文档，发现这么说的：

官方文档说明-获取用户个人信息

官方也建议自己保存下来处理。

然后我们又去google了一把，看下别人是否也被同样的问题坑过。

看来好多用户都遇到了，相关问题链接

经常看到还有人的头像时而好时而不好，那是因为

旧的头像链接失效需要一定的时间，从 CDN 节点一个一个失效。你现在访问到的应该是旧的头像链接，每次访问可能到达不同的 CDN 节点，导致时有时无。

那么如何解决这个问题呢？

我们这边也想了好多方案，我们考虑下几个方面，分两个思路

思路1: 自己本地服务保存并CDN,缺点成本有点高

思路2: 有个策略定时更新头像

  • 定期更新下头像链接，不要一直缓存着，比如在 session_key 过期时一起更新下头像链接
  • 后台服务定期检查头像链接是否过期（怎么自动判断是否过期呢，下面会详细说明）
  • 前端根据头像链接判断是否过期，过期重新授权更新头像信息

下面介绍下，怎么判断微信的头像是否过期了，经过研究发现：

正常的微信图片返回的请求信息如下：

然而异常的图片地址怎么返回的呢？

可以看下异常情况，返回的信息不一样，可以根据X-Info: notexist:-6101 判断或者 X-ErrNo: -6101 关键字

不过还有一个疑问，如果本地存储的话，还会遇到，用户修改头像后，获取的地址可能不是最新的，虽然不会显示一个特别丑陋的头像，这里怎么解决呢，这里需要产品定义个策略，哪些场景需要定期授权，重新更新头像和用户信息等等。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信接入之获取用户头像的方法步骤

    前段时间写了关于微信支付接入,顺便就把获取用户昵称,头像的方式也归纳下,这个其实挺简单的,具体的方法看官方文档即可.这里只提几个重点. scope参数 看过微信文档的话,微信的规定是,对于scope参数,如果需要获取用户信息的话,scope参数为snsapi_userinfo.但是我接下来,使用过一次userinfo,实际上用snsapi_base也可以获得用户信息,一模一样的返回值,对于获取头像和昵称完全没有任何问题 获取头像 获取头像其实有一点麻烦的就是跨域问题.要解决这个跨域问题,可以采用

  • 微信小程序如何获取用户头像和昵称

    本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: <view > <view> <image class="avatar" src='{{userInfo.avatarUrl}}'></image> <view class="nickname">{{userInfo.nickName}}</view> </view> </view&g

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

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

    微信头像失效问题说明? 最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是无感知的,又过了n多天,用户去访问我们那个h5页面,发现自己的头像是这样的: 用户找到我们,说自己有头像呀,怎么没显示呢? 我们也反问他,是否最近改过头像呢,他说没,不过很早之前改过. 而此时就比较尴尬,用户体验超级不好. 然后我们

  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • Vue.js 踩坑记之双向绑定

    这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vmware导入ova文件踩坑记小结

    问题来源 众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环境进行模拟攻击,然乎使用wireshark进行抓包分析流量. 问题出现 因为vulnhub的环境是ova文件的虚拟机,是需要使用virtualbox打开的,但是我没有用过vbox,想着把他导入vmware中进行测试,很快遇到了第一个问题:当我把ova文件导入vmware时报错了,错误如下: 我尝试放

  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    目录 前言 常见的有以下多种情况 总结 前言 很多时候安装npm install 的时候并不能直接将当前的node_modules直接一键安装到本地. 总是会出现各种各样的报错 常见的有以下多种情况 tip1:本地node 跟npm 版本不匹配,项目创建者当时的版本为14 ,而新开发者本地node默认为最新需要重新降低版本,使用cmd打开查看本地node和npm版本,询问一下同事的版本,直接去node官网重新 下载安装新的node安装包即可,或者如果本地有多个新老项目为了方便的管理各个node的

  • 关于springboot配置druid数据源不生效问题(踩坑记)

    关于springboot配置druid数据源不生效问题(踩坑记)

    pom文件 如果你的springboot项目要用到druid,那么这三个依赖必不可少: <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> <!--Druid--> <depen

  • ThinkPHP框架下微信支付功能总结踩坑笔记

    ThinkPHP框架下微信支付功能总结踩坑笔记

    本文实例讲述了ThinkPHP框架下微信支付功能总结.分享给大家供大家参考,具体如下: 摘要 此文主要为个人解决 ThinkPHP3.2.3 下微信支付所遇到的一些坑的解决方案,仅供参考 详情请参考 原文 : 微信公众平台开发教程之ThinkPHP框架下微信支付功能 踩坑记录 为便于参考,此处附录部分 weixinpay.class代码截图 ①. 验证不严谨,损失教训 补充时间:[2017-01-02] 情况描述 [我尊重你,但不认同你] 恰逢元旦期间,遭到微信支付被大牛攻破的情况,损失近 80

  • 利用uni-app生成微信小程序的踩坑记录

    利用uni-app生成微信小程序的踩坑记录

    目录 前言 1.不允许id选择器 2.默认竖排 3.图片加载不出来 4.eval函数不可用 5.getStorage异步 6.props的中的值不可修改 7.wx.uploadFile携带字符串参数 8.picker的multiSelector mode中选择框出现undefined 总结 前言 毕设要求写一个浏览器端,一个APP端,一个微信端,刚开始以为要学三个技术然后写三个客户端,后来知道了uni-app这个神器,一次编写就可以编译生成APP.H5以及各种小程序版本的客户端.然而我比较熟悉的

  • js 下拉菜单点击旁边收起实现(踩坑记)

    js 下拉菜单点击旁边收起实现(踩坑记)

    背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h

随机推荐