微信头像地址失效踩坑记附带解决方案
微信头像失效问题说明?
最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是无感知的,又过了n多天,用户去访问我们那个h5页面,发现自己的头像是这样的:
用户找到我们,说自己有头像呀,怎么没显示呢?
我们也反问他,是否最近改过头像呢,他说没,不过很早之前改过。
而此时就比较尴尬,用户体验超级不好。
然后我们就去查看官方文档,发现这么说的:
官方也建议自己保存下来处理。
然后我们又去google了一把,看下别人是否也被同样的问题坑过。
看来好多用户都遇到了,相关问题链接
经常看到还有人的头像时而好时而不好,那是因为
旧的头像链接失效需要一定的时间,从 CDN 节点一个一个失效。你现在访问到的应该是旧的头像链接,每次访问可能到达不同的 CDN 节点,导致时有时无。
那么如何解决这个问题呢?
我们这边也想了好多方案,我们考虑下几个方面,分两个思路
思路1: 自己本地服务保存并CDN,缺点成本有点高
思路2: 有个策略定时更新头像
- 定期更新下头像链接,不要一直缓存着,比如在 session_key 过期时一起更新下头像链接
- 后台服务定期检查头像链接是否过期(怎么自动判断是否过期呢,下面会详细说明)
- 前端根据头像链接判断是否过期,过期重新授权更新头像信息
下面介绍下,怎么判断微信的头像是否过期了,经过研究发现:
正常的微信图片返回的请求信息如下:
然而异常的图片地址怎么返回的呢?
可以看下异常情况,返回的信息不一样,可以根据X-Info: notexist:-6101 判断或者 X-ErrNo: -6101 关键字
不过还有一个疑问,如果本地存储的话,还会遇到,用户修改头像后,获取的地址可能不是最新的,虽然不会显示一个特别丑陋的头像,这里怎么解决呢,这里需要产品定义个策略,哪些场景需要定期授权,重新更新头像和用户信息等等。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: <view > <view> <image class="avatar" src='{{userInfo.avatarUrl}}'></image> <view class="nickname">{{userInfo.nickName}}</view> </view> </view&g
-
微信接入之获取用户头像的方法步骤
前段时间写了关于微信支付接入,顺便就把获取用户昵称,头像的方式也归纳下,这个其实挺简单的,具体的方法看官方文档即可.这里只提几个重点. scope参数 看过微信文档的话,微信的规定是,对于scope参数,如果需要获取用户信息的话,scope参数为snsapi_userinfo.但是我接下来,使用过一次userinfo,实际上用snsapi_base也可以获得用户信息,一模一样的返回值,对于获取头像和昵称完全没有任何问题 获取头像 获取头像其实有一点麻烦的就是跨域问题.要解决这个跨域问题,可以采用
-
微信小程序 上传头像的实例详解
微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像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微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入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报错问题解决总结
目录 前言 常见的有以下多种情况 总结 前言 很多时候安装npm install 的时候并不能直接将当前的node_modules直接一键安装到本地. 总是会出现各种各样的报错 常见的有以下多种情况 tip1:本地node 跟npm 版本不匹配,项目创建者当时的版本为14 ,而新开发者本地node默认为最新需要重新降低版本,使用cmd打开查看本地node和npm版本,询问一下同事的版本,直接去node官网重新 下载安装新的node安装包即可,或者如果本地有多个新老项目为了方便的管理各个node的
-
关于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框架下微信支付功能总结.分享给大家供大家参考,具体如下: 摘要 此文主要为个人解决 ThinkPHP3.2.3 下微信支付所遇到的一些坑的解决方案,仅供参考 详情请参考 原文 : 微信公众平台开发教程之ThinkPHP框架下微信支付功能 踩坑记录 为便于参考,此处附录部分 weixinpay.class代码截图 ①. 验证不严谨,损失教训 补充时间:[2017-01-02] 情况描述 [我尊重你,但不认同你] 恰逢元旦期间,遭到微信支付被大牛攻破的情况,损失近 80
-
利用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 下拉菜单点击旁边收起实现(踩坑记)
背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h
随机推荐
- Vmware虚拟机安装Ubuntu 16.04 LTS(长期支持)版本+VMware tools安装的图文教程
- php中替换字符串函数strtr()和str_repalce()的用法与区别
- Perl脚本检测一个域名是否有效
- 学习Angularjs分页指令
- 批处理命令详解之目录跳转:cd
- 详解利用Spring加载Properties配置文件
- 学习JavaScript编程语言的8张思维导图分享
- Repeater中添加按钮实现点击按钮获取某一行数据的方法
- 通过Python来使用七牛云存储的方法详解
- Android使用Sqlite存储数据用法示例
- js 内存释放问题
- 原生javascript 学习之js变量全面了解
- 解决JS无法调用Controller问题的方法
- 探索PowerShell(七) PowerShell变量
- 基于javascript实现右下角浮动广告效果
- 理解nodejs的stream和pipe机制的原理和实现
- Python实现淘宝秒杀聚划算抢购自动提醒源码
- js数组去重的N种方法(小结)
- vue.extend与vue.component的区别和联系
- java中文转拼音工具类详解