preface

Wechat update 6.6.7, the new article narrowing float window function is really great. However, there is one update that has bothered H5 developers. It is the addition of a white forward and back control bar at the bottom of the iPhone’s H5 screen.

Analysis of the

In wechat, the white bar that controls the browser’s advance and retreat appears whenever a page jumps. If you need wechat authorization to obtain user information every time you enter H5 home page, this white bar will appear every time, because oAuth authorization must jump. The first authorization jump is unavoidable. Therefore, you can avoid the occurrence of the white bar as long as the user does not have to perform the second authorization. Therefore, the key point to solve the problem lies in how to avoid wechat second authorization.

The solution

Obtain user information method is shared before, continue to optimize in the previous code, to avoid wechat twice authorization. The implementation idea is to introduce the cookie function and create a cookie to store visitors’ wechat user information. When the user visits for the first time, the user information is obtained through oAuth authorization and stored in cookies. When the user accesses again, it determines whether there is a corresponding cookie to retrieve the user information, so that secondary authorization will not be triggered.

  • First, define functions that create and read cookies,
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()); } 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 ""; }Copy the code
  • Then, it determines whether to redirect authorization by checking whether there is a user information cookie value.
var openid; Openid var nickname; Var headimgurl; Function checkCookie(){userinfo = getCookie('userinfo'); if(userinfo ! = null && userinfo ! = "" && userinfo ! Var strArr = userinfo.split(','); var strArr = userinfo.split(','); openid = strArr[0]; nickname = strArr[1]; headimgurl = strArr[2]; }else{// No corresponding cookie, reauthorize and write cookie openId = getUrlParam(" openID "); nickname = getUrlParam("nickname"); headimgurl = getUrlParam("headimgurl"); /* select * from user; Shared in the previous post, omitted here... . */ var strInfo = openid + "," + nickname + "," + headimgurl; setCookie('userinfo', strInfo, 365); // Create a cookie with its name, value, and expiration date. }}Copy the code
  • After entering the page, call the above method to solve the problem.

Refer to the link

Single sign-on (sso) three methods and principle: blog.csdn.net/u013378306/…

JavaScript Cookies:www.w3school.com.cn/js/js_cooki…