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

背景

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_854