![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925093211267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70#pic_center)
<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:{
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;
}
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>