mpvue 用户授权登录

阳光穿透心脏的1/2处 2021-07-24 16:44 465阅读 0赞

1、button按钮添加属性
    	open-type='getUserInfo'
    
    2、button绑定事件监听
    	@getuserinfo="回调"
    
    3、回调的第一个参数即为登录信息
    	x.mp.detail.userInfo;
    
    4、生命周期函数中判断是否已授权登录
    	第一次授权后,再次编译时,数据将不再显示,且不再弹出授权窗口,使用如下方法,将授权后的信息显示
    	  
    	  wx.getUserInfo({
            success:(res)=>{
              res.userInfo;  已授权后的数据
            },
            fail:(res)=>{
              console.log('还未授权');
            }
          })

代码示例:

<template>
      <div>
        <div class='header'>
          <img :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/tabs/7.png'" alt="">
          <button size='mini' open-type='getUserInfo' @getuserinfo="bindGetUserInfo" >{ { userInfo.nickName?userInfo.nickName:'登录'}}</button>
        </div>
        <div class='cardlist'>
          <div class='card'>
            <span>扫码看书</span>
            <span>></span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default{ 
        data()
        { 
          return{ 
            userInfo:[]
          }
        },
        methods:{ 
          bindGetUserInfo(e)
          { 
            console.log(e);
            //判断是否允许
            if(e.mp.detail.userInfo)
            { 
              this.userInfo=e.mp.detail.userInfo;
            }
          }
        },
        mounted()
        { 
          wx.getUserInfo({ 
            success:(res)=>{ 
              console.log(res);
              this.userInfo=res.userInfo;
            },
            fail:(res)=>{ 
              console.log(res);
              console.log('还未授权');
            }
          })
        }
      }
    </script>
    
    <style>
      .header{ 
        padding: 40rpx;
        background-color: #02A774;
      }
      .header>img{ 
        width: 100rpx;
        height: 100rpx;
        vertical-align: middle;
        border-radius: 50rpx;
      }
      .header>button{ 
        vertical-align: middle;
        margin-left: 40rpx;
        max-width: 200rpx;
      }
      .card{ 
        display: flex;
        justify-content: space-between;
        width: 94%;
        height: 60rpx;
        line-height: 60rpx;
        margin:10rpx auto;
        border:solid 1px #eee;
        padding: 10rpx;
      }
    </style>