微信公众号网页授权调试

一、微信公众号调试工具
在发布之后为了在 真机调试的时候 看到 是否获取到数据 可以将 数据打印到页面。

<div id="urlCode">div>

 url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+appIdUrl+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
 $("#urlCode").text(url);

微信开发者工具菜单栏 微信开发者工具下有选项更换开发模式有一个公众号网页调试。

可以在发布后将url地址放在上面进行调试。
在调试中遇到的问题：
1.在授权登录时我用的是静默授权 使用户点击之后直接重定向到设置页面，这时控制台上报 login接口 获得token失败。
原因：通过查看调用方法，发现是获取token的账号密码错误，未发布到线上的时候使用的是本地的接口和数据库，本地和线上获取token的账号和密码是不一样的。
2.刷新页面报code错误码 40163，code码被使用过，这个错误是因为 微信授权获得code码只能使用一次，重复刷新页面导致没有重新获得code码，所以报40163。
3.关联第二个问题，因为code码只能获取一次而且时效是5分钟，所以如果用户刷新页面就会导致调用接口失败。
解决办法：在第一次获取code的时候，因为要调用接口获取openid（身份唯一标识），然后就可以把openid存在cookie缓存里，然后在，进入页面的时候取出cookie的缓存判断是否存在openid如果存在 就掉用openid获取用户信息的接口，如果不存在就用code调用接口换取openid放入缓存。

 OpenId = getCookie('openid')
    //console.log(OpenId);
    GetToken(function () {
        GetUserSettings(code, state, token, OpenId)
    })
    
// 获取用户设置
function GetUserSettings(code, state, token, OpenId) {
    //console.log(OpenId);
    if (OpenId && OpenId!='') {
        var data = {
            openId: OpenId,
            code: '',
            unit_id: state
        }
        var reqUrl = "";
        reqUrl = hosturl + "/earlyWarningOpenidSet/earlyWarningOpenidSet?&token=" + token;
        console.log(reqUrl)
        if (reqUrl != "") {
            $.ajax({
                type: "POST",
                url: reqUrl,
                data: data,
                success: function (response) {
                    var selectData = response.lists[0];
                    for (let i in selectData) {
                        // 取value 判断是否绑定 checkbox
                        if (selectData[i] == 1) {
                            // 取key 调用方法绑定 checkbox
                            checkedSelect(i);
                        }
                    }
                }
            });
        }
    } else {
        var data = {
            openId: '',
            code: code,
            unit_id: state
        }
        var reqUrl = "";
        reqUrl = hosturl + "/earlyWarningOpenidSet/earlyWarningOpenidSet?&token=" + token;
        if (reqUrl != "") {
            $.ajax({
                type: "POST",
                url: reqUrl,
                data: data,
                success: function (response) {
                    OpenId = response.lists[0].openId;
                    //写入cookie
                    Setcookie('openid', OpenId);
                    var selectData = response.lists[0];
                    for (let i in selectData) {
                        // 取value 判断是否绑定 checkbox
                        if (selectData[i] == 1) {
                            // 取key 调用方法绑定 checkbox
                            checkedSelect(i);
                        }
                    }
                }
            });
        }
    }
  
}

// 设置Cookie缓存
function Setcookie(name, value) {
    //设置名称为name,值为value的Cookie
    var expdate = new Date();   //初始化时间
    expdate.setTime(expdate.getTime() + 1 * 60 * 60 * 1000);   //时间
    document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString() + ";path=/";

    //即document.cookie= name+"="+value+";path=/";   时间可以不要，但路径(path)必须要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效！~
}
// 获取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 OpenId="";
}

4.在真机调试的时候，第一次设置点击保存会报设置失败。
因为我在点击保存的时候做了判断如果 openid 不存在 就返回 ‘保存失败’ 信息弹窗。
所以是在第一次点击保存的时候我没有获取openid。
因为已经把openid放入了缓存所以，只要把openid从缓存中取出来，就不会报错。

OpenId = getCookie('openid')

总结：在调试的过程中可以通过打断点来知道代码的运行路径，同时可以看到打印出来的数据，这样就有利于开发者判断是否是正确的。