用cookie解决新版微信中H5页面底部白条问题

时间: 2018-06-05阅读: 4896标签: 微信作者: 转载

背景

5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞。不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条



分析

 在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。如果进入H5首页每次都要微信授权来获取用户信息,那这个白条将每次都会出现,因为oauth授权一定会有跳转。第一次授权跳转是无法避免的,那么只要避免用户进行二次授权,也就避免了白条的再次出现。所以,解决问题的关键点在于如何避免微信二次授权。


解决方法

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

首先,定义创建和读取cookie的函数

// 创建cookie  
function setCookie(c_name, value, expiredays){  
  var exdate = new Date();  
  exdate.setDate(exdate.getDate() + expiredays);  
  document.cookie = c_name+ "=" + escape(value) +   
  ((expiredays==null) ? "" : "; expires="+exdate.toGMTString());  
}  
// 读取cookie  
function getCookie(c_name){   
  if(document.cookie.length > 0){   
    c_start = document.cookie.indexOf(c_name + "=");  
    if(c_start != -1){   
      c_start = c_start + c_name.length + 1 ;  
      c_end = document.cookie.indexOf(";", c_start)  
  
      if(c_end == -1){  
        c_end = document.cookie.length;  
      }  
      return unescape(document.cookie.substring(c_start, c_end));  
    }   
  }  
  return "";  
}


然后,通过检查是否有用户信息cookie值,来判断是否要跳转授权,

var openid; // 用户openid  
var nickname; // 用户昵称  
var headimgurl; //用户头像  
  
// 检查cookie  
function checkCookie(){  
  userinfo = getCookie('userinfo');  
    
  if(userinfo != null && userinfo != "" && userinfo != "null,null,null"){ // 有相应cookie,读取用户信息  
    var strArr = userinfo.split(',');  
    openid = strArr[0];   
    nickname = strArr[1];   
    headimgurl = strArr[2];  
  
  }else{ // 没有相应cookie,重新授权并写入cookie  
    openid = getUrlParam("openid");   
    nickname = getUrlParam("nickname");   
    headimgurl = getUrlParam("headimgurl");  
      
    /*  
      此处为“跳转授权,获取用户信息代码”。上篇分享过,这里省略... ... 
    */  
  
    var strInfo = openid + "," + nickname + "," + headimgurl;  
    setCookie('userinfo', strInfo, 365); // 创建cookie,cookie的名称、值以及过期天数。  
  }  
}

在进入页面后,调用以上方法,即可解决问题。  来源:https://blog.csdn.net/gaofei880219/article/details/80569026

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/854

关闭

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

QQ/微信里域名经常被举报二屏蔽?微信/QQ屏蔽域名举报按钮的实现方式

近很多老哥问我,为啥自己的域名在QQ/微信里面很容易被封?1、页面里面的内容违规或者诱导被举报而导致的拦截;2、用户和同行举报;3、腾讯等定期会检查;

解决微信返回上一页之后,页面不刷新

由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。

移动端检测微信浏览器返回,关闭,进入后台操作

最近做一个倒计时记录学习时长项目,需要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

Kbone:微信官方推出 Web 前端和小程序统一框架

最近微信官方重磅推出了一个统一 Web 前端和小程序的框架 —— Kbone 。微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代码挪到小程序环境内执行。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信分享朋友与朋友圈实现自定义标题,描述,图片

由上面效果图可以看出,是否实现了自定义分享绝对了您分享出去的推广链接的展示效果。实现自定义分享后分享给好友或者朋友圈可以实现自定义标题

解决微信返回上一页.页面不刷新问题

在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。

微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)

微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!