微信登录配置项目

首先在html文件里面引入微信官方的js文件

 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

　　然后在需要显示微信二维码的地方new一个实例对象，不能在钩子函数中的created中使用这个方法，此时html文件里面的js尚未引入，最早只能在mounted中使用，所以是

fun(){

            setTimeout(()=> {

            var obj = new WxLogin({
                self_redirect:false,
                id: "wxqcode",                                  //二维码容器的id
                appid: "*******",                    //应用的唯一标识
                scope: "snsapi_login",                          //作用域
                redirect_uri: window.location.origin + "/*****.html",    //重定向地址 需要进行UrlEncode，申请微信登录时候绑定的回调网址 => 微信登录成功后跳转到这个地址
                state: "",              //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）
                style: "",
                href: "",               //自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
                // http://sciusers.shenghui.info/wxhref.html
                // http://localhost:8080/personal.html
                // http://dev.sci-hua.com/scihua/webapp/login/scanCallBack

            });

            }, 50)        //防止js未加载完成延时执行

            },    

mounted(){
    this.fun();
}  //在mounted中构建这个对象获取微信二维码

　　这时候重定向的网页上会获取到用户的数据，我们需要拿到微信返回的code去换取后台的用户资料

geturl(name) {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                if(r!=null) {
                    return  unescape(r[2]);
                }else {
                    return null;
                }
            },
            inwxcode(){
                this.wxcode = this.geturl('code');　　　　　　　　//重定向成功之后微信服务器会在url后面添加code
                if(this.wxcode==null){
                    console.log('不执行')
                }else {
                    this.$axios({
                        methods:'GET',
                        url:`/****/****/login/scanCallBack?code=${this.wxcode}`,
                    }).then(res=>{
                        console.log(res)
                        if (res.data.code==0){
                           
                            window.localStorage.setItem('headImg',res.data.userInfo.headImg)　　　　//本地存储头像
                            window.localStorage.setItem('name',res.data.userInfo.nickname)　　　　　　//本地存储昵称
                            window.localStorage.setItem('wxuserinfo',JSON.stringify(res.data.userInfo))　　　　　　//将传过来的json对象转化为字符串存储在本地
                            if(res.data.token==undefined&&res.data.token==null){　　　　　　　//判断userinfo是否存在，存在即为注册过的用户 跳转到文件中心页面，不存在则跳转到登录页面，进行绑定手机号

　　　　　　　　　　　　　　　　　　　　　　window.location.href=`index.html?wxuserinfo=0`　　　　　　　　　　　　　　　　　　//不存在则携带固定参数完成跳转到登录页面 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}else {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 window.localStorage.setItem('token',res.data.token)　　　　　　　　　　　　　　　　//存在则存储token跳转文件中心页面 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　window.location.href='file.html' 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 } else {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //退回扫码界面 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　} 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}).catch(req=>{ 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　console.log(req)
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 })
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 },
 　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 mounted() { 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　this.inwxcode()　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　

 this.data = JSON.parse(window.localStorage.getItem('wxuserinfo')||null)　　　　//在另外一个页面从本地存储拿到json转化为对象获取我们需要的属性
                this.img=this.data.headimgurl||null
                this.openid=this.data.openid||null
                this.nickname=this.data.nickname||null
                this.unionid=this.data.unionid||null
                if (this.data !== null){
                    window.localStorage.setItem('name',this.nickname)
                    window.localStorage.setItem('headImg',this.img)
                }　　

在注册新手机号或者其他微信操作里面我们都可以利用这些数据

 

inwxuser() {
                this.data = JSON.parse(window.localStorage.getItem('wxuserinfo') || null)
                console.log(this.data)

                this.wx.headimgurl = this.data.headimgurl || null
                this.wx.openid = this.data.openid || null
                this.wx.nickname = this.data.nickname || null
                this.wx.unionid = this.data.unionid || null

            },


            register(){

                if(this.wx.phone==null||this.wx.password==null){
                    this.warning('请填写正确信息')
                } else if (this.wx.phone.length!==11&&this.wx.password.length<2){
                    this.warning('手机号或者密码不符合规范')
                }else {
                    console.log(this.wx)
                    this.$axios.post('/scihua/webapp/login/bindingExistUser',this.wx)
                        .then( res=> {
                        if(res.data.msg == 'success'){

                            window.localStorage.setItem('token',res.data.token)
                            setTimeout(()=>{
                            window.location.href='file.html'
                            },300)
                        }else{

                            this.warning(res.data.msg)
                        }
                    }).catch( req=> {
                        console.log(req)
                    })
                }
            },          //携带密码验证码注册
            agreement(){
                window.open('agreement.html')
            },
            warning (a) {
                this.$message.warning(a);
            },

        },
        mounted(){
            this.inwxuser()
        }