微信小程序最新授权登录方式

微信小程序最新授权登录方式_第1张图片
微信小程序登录授权获取用户信息展示:

<View className='index'>
    <AtModal className='shouquan' isOpened={this.state.isOpened}>
    <View className='login-page'>
    <view className='header'>
    <Image src={loginFile} mode='aspectFit' className='login-img' />
    view>
    <view class='content'>
        <view>申请获取以下权限view>
        <text>获得你的公开信息(昵称,头像等)text>
    view>
    { oauthBtnStatus ? <Button className='bottom' type='primary'  open-type='getUserInfo' onClick={this.onGotUserInfo}>{btnText}Button> : ''}
    { userInfo ? JSON.stringify(userInfo) : ''}
    { userInfo ? <Image src={userInfo.avatarUrl} /> : ''}   
  View>
  AtModal>
  View> 

微信小程序最新授权登录方式_第2张图片
因为getUserInfo不再维护,新版不能获取使用。采取以下的方式:


```html

```css

```xml
//获取用户信息
  onGotUserInfo = (e)=>{
    var that = this;
     console.log(e);
    Taro.getUserProfile({
      desc:'获取你的昵称、头像、地区及性别',
      success:function(res){
        console.log(res)
        Taro.setStorageSync('userInfo', res.userInfo)
        // Taro.redirectTo({
        //   url:'../login/index' //跳转
        // })
        Taro.reLaunch({
          url:'../login/index' //跳转
        })
        
      },
      
      fail(res){
        console.log(res);
        Taro.showToast({
          title:'您拒绝了请求,请授权后登录',
          icon:'none',
        });
        return;
      }
    }).catch(error=>{  
      console.log(error);
    })
  }

微信小程序最新授权登录方式_第3张图片
成功获取用户的信息:
在这里插入图片描述



你可能感兴趣的:(微信小程序,小程序,前端,css,js)