VUE_vue微信授权页面

╰+哭是因爲堅強的太久メ 2022-12-10 08:49 239阅读 0赞

![在这里插入图片描述][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:{ //获取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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5f313979d0024fc184663bfe2aeb1a39.png