uniapp微信浏览器H5授权微信登录

1.准备一个触发微信登录的按钮

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

2.用户点击弹出授权页
微信浏览器的登录配置
scope为snsapi_base时， 为静默登录
scope为snsapi_userinfo时，会弹出“xxx申请获得你的微信头像、昵称、地区和性别信息”这样的弹出框，需要经过用户同意

// 看地址中有没有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'
},
3.因为授权成功微信会跳转到我们设置的回调地址，所以还要在页面生命周期onLoad中设置一下

onLoad() { const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null; if(hasWechatLogin) { this.checkWeChatCode(); } }

在methods中设置以下方法：

// 重定向回来本页面检查有没有code
checkWeChatCode() {
    let code = this.getUrlCode('code');
    if(code) {
        this.handleToLogin(code)
    }
},
// 正则匹配请求地址中的参数函数
getUrlCode(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
},
// 把后端需要的code以及其他信息调用接口传过去
//比如调用接口loginIn
handleToLogin(code) {
    loginIn({
        code,
    }).then(res => {
        console.log('登录成功')
        uni.redirectTo({
            url: '/pages/index/index'
        })
    })
}

以上就是完整流程，但有几个需要注意的点

1.引导用户跳转授权那个链接 window.location.href 那串，顺序不能变动，最好直接复制我这个
2.那个appID，记住，一定要是公众号的ID ，一般是如果是小程序同步的H5，那就是这个小程序关联的那个公众号ID，不是开放平台的ID
3.回调地址是完整的链接，所以，要确保在公众号里设置了授权回调域名 ，你用的这个回调地址的域名，必须和公众号设置的一致(可以去微信公众平台登录关联的公众号看看有没有设置)
链接: 微信公众平台

完整代码如下：

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

<script>
export default {
    onLoad() {
        const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
        if(hasWechatLogin) {
            this.checkWeChatCode();
        }
    },
    methods: {
        // 重定向回来本页面检查有没有code
        checkWeChatCode() {
            let code = this.getUrlCode('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/index'
                })
            })
        }
    }        
}
</script>