微信公众号H5微信授权获取code

我是使用了cpolar内网穿透来调试的，本地不好操作，

第一部分：

1.下载安装cpolar

打开cpolar创建一个隧道

 8080为你启动的端口，改成你自己的，点击创建

2.然后再状态里面找到你刚刚创建的

 

 红色框为你的地址

3当你把这个地址复制打开的时候会提示invalid host header

vue项目到

vue.config.js 文件下 devServer加入 disableHostCheck: true, 就可以了 

devServer: {

               disableHostCheck: true, //正式环境要注释掉

}

 本人是uniapp项目要到manifest.json里面

 配置好之后关闭项目重新启动编译器就好了

第二部分：

百度搜索微信公众号测试号

 扫码登录后看到下面的页面，下翻找到下图所示点击修改

 

 这里的域名填写第一步内网穿透的地址不要前面的http，只要域名部分比如baidu.com就可以了

完成这一步之后你就可以去项目中调用了

第三步:

下面是简单的个人源码可以直接使用但是要替换appid和回调地址

<template>
    <button class="wechat-logo" @click="getWeChatCode">微信授权登录</button>
</template>

<script>
export default {
    onShow() {
        const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
        if(hasWechatLogin) {
            this.checkWeChatCode();
        }
    },
    methods: {
        // 重定向回来本页面检查有没有code
        checkWeChatCode() {
            let code = this.getUrlCode('code');
            console.log('我的code',code)
            if(code) {
                this.handleToLogin(code)
            }
        },
        // 正则匹配请求地址中的参数函数
        getUrlCode(name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
        },
        // 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
        getWeChatCode() {
            //用于退出登录回来不会再调一次授权登录
            uni.setStorageSync('wechat_login_tag', 'true');
                        
            const appID = '';  //公众号appID
            const callBack = ''; //回调地址 就是你的完整地址登录页
                        
            //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                            appID + '&redirect_uri=' + encodeURIComponent(callBack) +
                            '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        },
        // 把后端需要的code以及其他信息调用接口传过去
        //比如调用接口loginIn
        handleToLogin(code) {
            loginIn({
                code,
            }).then(res => {
                console.log('登录成功')
                uni.redirectTo({
                    url: '/pages/index/details'
                })
            })
        }
    }        
}
</script>

 appid用刚刚测试号的appid

回调地址填写你刚刚第二步修改配置的那个

最后一步：

你在微信开发者工具，打开公众号网页

 在上方把你的第一步得到的穿透地址复制打开（这里有一个慢打开速度很慢）

点击按钮你就能在线调试微信授权登录获取code了，

恭喜你，我花了几天才明白的东西，你只看一篇文章就会了，很保姆把！！！！！

哈哈哈哈哈哈哈哈哈