VUE_vue微信授权页面

<!-- 微信授权 -->
<template>
    <div>
        <Header :title="'微信授权'" />
        
        <div class="wechat">
            <div class="wechat_">

                <div class="wechat_top">
                    <img src="../../assets/user/weixin.png" alt="">
                    <div class="wechat_top_title">微信授权</div>
                    <div class="wechat_top_xian"></div>
                </div>

                <div class="wechat_min">
                    <div class="wechat_min_title">
                        网页由该公众号开发，请求确定授权一下信息
                    </div>
                    <div class="wechat_min_txt">
                       ● 获取你的公开信息（昵称、头像等）
                    </div>
                </div>

                <div class="wechat_btn" @click="onwechat">确定授权</div>

            </div>
        </div>
    </div>
</template>
<script>
import Header from '../layout/header'			//头部组件没有则删除
import { Toast  } from 'vant';
export default {
    data() {
        return {
            power:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="授权后重定向的回调链接地址"&response_type=code&scope=snsapi_userinfo#wechat_redirect
",           //授权地址
        }
    },
    created(){
        this.onweixintwo()
    },
    mounted() {
        
    },
    methods:{
        //获取url参数
        urldata(name){
            //构造一个含有目标参数的正则表达式对象
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            //匹配目标参数
            var r = window.location.search.substr(1).match(reg);
            //返回参数值
            if (r!=null) return unescape(r[2]);
            return null;
        },
        //授权按钮
        onwechat(){
            var ua = navigator.userAgent.toLowerCase();			//判断是否是微信浏览器
            var isWeixin = ua.indexOf('micromessenger') != -1;	//判断是否
            if (!isWeixin) {
                Toast("请在微信浏览器中打开");
                return false;
            }else{
                window.location.href=this.power
            }
            
        },
        //绑定授权
        onweixintwo(){
            let code = this.urldata('code')
            if(!code){
                return false;
            }
           	//这里拿到code发起请求
            console.log(code)
        },
    },
    components:{
        Header,
    }
};
</script>
<style scoped>

.wechat{
    width: 100vw;
    height: 100vh;
    background: #fff;
    overflow: hidden;
    margin-top: -46px;
}
.wechat_{
    width: 300px;
    height: 100%;
    min-height: 550px;
    margin: 0 auto;
    text-align: left;
}
.wechat_top{
    text-align: center;
    font-size: 24px;
    margin-top: 96px;
}
.wechat_top >img{
    width: 100px;
    height: 100px;
    border-radius: 7px;
}
.wechat_top_title{
    padding-top: 10px;
}
.wechat_top_xian{
    width: 300px;
    height: 1px;
    background: #f5f5f5;
    margin-top: 30px;
}

.wechat_min{
    width: 100%;
    padding-top: 30px;
}
.wechat_min_title{
    font-size: 18px;
}
.wechat_min_txt{
    font-size: 16px;
    color: #777;
    padding-top: 20px;
}

.wechat_btn{
    width: 300px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background: #00cc00;
    font-size: 24px;
    color: #fff;
    border-radius: 7px;
    margin-top: 50px;
}
</style>