微信公众号页面获取code进行微信授权登录

1,配置测试号

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

image.png
2,关注测试号
image.png
3，设置| 网页帐号 | 网页授权获取用户基本信息 | image.png
image.png

4，主要代码

//进入页面执行login方法
                    login() {
                        let appid = 'wx6af9f4be19acd77b';
                        let redirect_uri='http://192.168.30.49:8080/'
                        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
                            this.code = this.getUrlCode().code;
                            //如果没有code 去获取code
                        if (this.code == null) {
                            window.location.href = url;
                        }else{
                            //获取到code后的逻辑
                            console.log('code', this.code);
                        }
                    },
                    //截取code
                getUrlCode() { // 截取url中的code方法
                            var url = location.search
                            var theRequest = new Object()
                            if (url.indexOf("?") != -1) {
                                var str = url.substr(1)
                                var strs = str.split("&");
                                for (var i = 0; i < strs.length; i++) {
                                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
                                }
                            }
                            // console.log(theRequest)
                            return theRequest
                            console.log(theRequest)
                        },

5，打开微信开发者工具输入地址

image.png