本地微信授权登录-redirect_uri参数错误

背景

使用微信公众平台的测试号进行本地联调，可以使用内网的IP地址，笔者项目是Vue的

开发流程

1、启动vue的项目

yarn serve

2、找到cmd上的 Network：ip+port

image.png

3、复制ip+端口 例如:192.168.0.105:8088
4、把第3步去微信公众平台测试号上配置好：看图片名字描述

1.png

点击后就用微信登录就可以.png

扫一下关注上

将上边的ip+端口写上去

image.png

5、综上就算微信端配置完毕了
6、接下来就是在Vue代码上进行开发了

const appId = 'wx2323232323';
const state = 1;
//转码url
const redirectUri = encodeURIComponent(window.location.href);
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId
                                            + '&redirect_uri=' + redirectUri + '&response_type=code&scope=snsapi_userinfo&state='
                                            + state + '#wechat_redirect';

7、重新在进入此页面，后续拿到code-使用这个获取

getCode () {
            let url = location.search;
            let theRequest = new Object()
            if (url.indexOf("?") != -1) {
                let str = url.substr(1)
                let strs = str.split("&")
                for(let i = 0; i < strs.length; i ++) {
                    theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
                }
            }
            return theRequest;
},

8、然后通过code调用后端接口拉