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

前端 专栏收录该内容
21 篇文章 0 订阅

背景

        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的名称、值以及过期天数。
        }
      }
        在进入页面后,调用以上方法,即可解决问题。


Demo二维码

        


参考链接

        单点登录三个方法及原理:https://blog.csdn.net/u013378306/article/details/78969785

        JavaScript Cookies:http://www.w3school.com.cn/js/js_cookies.asp

  • 4
    点赞
  • 31
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

高飞家的猫

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值