uniapp+vue H5页面实现微信公众号授权登录

<template>
    <view class="my-userinfo-container">
        <!-- 头像和昵称区域 -->
        <view class="top-box">
            <image :src="form.headimgurl" class="avatar"></image>
            <view class="nickname">{{form.nickname}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    nickname: '',
                    headimgurl: ''
                }
            }
        },
        onLoad() {
            this.login()
        },
        methods: {
            // 截取url中的code
            getUrlCode(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            async login() {
                const userInfo = uni.getStorageSync("userinfo")
                if (!this.$utils.isNull(userInfo)) {
                    this.form = userInfo
                } else {
                    // 获取url上的code
                    let code = this.getUrlCode('code')
                    console.log(code)
                    if (code) {
                        //授权登录
                        const res = await this.$api.WeChatLogin({
                            'weChatCode': code
                        });

                        if (res.data.rcrm.RC == "1") {
                            this.$u.toast("授权成功")
                            this.form = res.data.results.user_data;
                            uni.setStorageSync('userinfo', res.data.results.user_data)
                        } else {
                            this.$u.toast('授权失败：' + res.data.rcrm.RM)
                        }
                    } else {
                        // code 不存在，走微信网页授权逻辑 
                        // 当前网页的url，供微信重定向使用 
                        let loc_href = = encodeURIComponent(window.location.href);

                        // this.$config.weChat.appID 为微信公众号的appid 
                        let wxUrl =
                            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$config.weChat.appID}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`

                        // 跳转链接获取code 
                        location.href = wxUrl
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f4f4f4;
    }

    .my-userinfo-container {
        height: 100%;
        background-color: #f4f4f4;

        .top-box {
            height: 400rpx;
            background-color: #55aaff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .avatar {
                width: 90px;
                height: 90px;
                border-radius: 45px;
                border: 2px solid #FFF;
                box-shadow: 0 1px 5px black;
            }

            .nickname {
                font-size: 16px;
                color: #ffffff;
                font-weight: bold;
                margin-top: 10px;
            }

            .phone {
                font-size: 13px;
                color: #515151;
                margin-top: 3px;
            }

            .merchant {
                font-size: 13px;
                color: #515151;
                margin-top: 3px;
            }
        }
    }

    .panel-list {
        padding: 0 10px;
        position: relative;
        top: 30px;

        .panel {
            background-color: white;
            border-radius: 3px;
            margin-bottom: 8px;


            .panel-body {
                display: flex;
                justify-content: space-around;

                .panel-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    padding: 15px 0;
                    font-size: 13px;

                    .icon {
                        width: 35px;
                        height: 35px;
                    }

                    .txt {
                        margin-top: 10px;
                    }
                }
            }
        }
    }

    .panel-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        padding: 0 10px;
        line-height: 45px;
    }
</style>