3.5【微信小程序全栈开发课程】登录功能（三）--获取用户信息

柔情只为你懂 2023-06-08 04:41 8阅读 0赞

#### 1、获取用户信息 ####

我们在实现登录功能时，添加的登录成功时调用的方法loginSuccess。

方法中代码`wx.setStorageSync('userinfo', res)`的作用是将用户信息保存到了缓存中，并将这条缓存信息命名为userinfo。

缓存信息会一直存储在用户的手机中，等到下次打开小程序的时候，小程序会读取微信的缓存，来获得用户信息。如果用户清除了微信的缓存，那么需要用户重新登录小程序。

现在我们从缓存中将用户信息读取出来

###### （1）查看缓存数据 ######

打开微信开发者工具，点击控制台中>>图标，会出现Storage，缓存就是保存在这里，点击Storage后，我们看到一条名为userinfo的信息，里面存储的就是用户信息，每条用户信息都会包括openId、nickName等内容。  
![format_png][]  
![g][]

###### （2）编辑index.vue文件 ######

添加userinfo变量，用来保存用户信息

data () { 
      return { 
        mark:0,
        userinfo:{ },
      }
    },

###### （3）获取用户信息 ######

编辑index.vue文件

每次打开小程序先从缓存中读取是否有名为userinfo的信息，如果有，说明用户登录了，打开小程序会直接显示首页；如果没有，说明用户还未登录，打开小程序显示登录弹窗，提示登录

//onShow是小程序的生命周期，每次切换到当前页面都会触发
    onShow () { 
      const userinfo = wx.getStorageSync('userinfo')
      //如果缓存中有userinfo的信息，说明用户登录了。
      if(userinfo.openId){ 
        //将用户信息储存到data的userinfo字段里面，this.userinfo就是指的这个字段。
        this.userinfo = userinfo
       }else{ 
        wx.hideTabBar()
        this.showLogin = true
       }
    },

###### （4）查看效果 ######

command+c保存代码后，开发者工具会自动刷新效果，如果没有刷新，可以点击编辑自己手动刷新，如果没有看到应该出现的效果，就需要查看终端，看看是不是有报错  
![format_png 1][]

#### 2、登录弹窗显示控制 ####

实现的效果：在点击「授权登录」按钮后，隐藏登录弹窗

###### （1）编辑index.vue文件 ######

在data函数中添加showLogin变量，用来控制登录弹窗是否显示

//参考代码，无需粘贴
    //userinfo:{},
    
    
    //需要粘贴的部分，设置默认值为false
    showLogin:false

###### （2）编辑index.vue文件 ######

当没有从缓存中读取名为userinfo的信息，说明用户没有登录，那就应该显示登录弹窗，将showLogin改为true

//参考代码，无需粘贴
    //}else{ 
     //wx.hideTabBar()
    
    
    //需要粘贴的部分
     this.showLogin = true

###### （3）编辑template部分 ######

用一个

标签将登录弹窗部分的页面代码包起来，然后通过vue的语法v-if来控制登录弹窗是否显示

<div v-if="showLogin">
    
    
      
    </div>

#### 3、子组件向父组件传递信息 ####

上一步完成之后，点击授权登录按钮，登录弹窗还是存在，没有消失，因为在登录成功之后，没有将showLogin改为false，需要在login方法中操作

但是login方法在LoginWindow.vue文件中，这个文件是我们上一节创建的子组件，index.vue文件是他的父组件

我们下面演示子组件向父组件传递信息，即在子组件中告诉父组件，将showLogin变量改为false，从而控制登录弹窗消失

###### （1）编辑子组件，也就是LoginWindow.vue文件，在this.$emit中添加需要传递的信息 ######

编辑

//参考代码，无需粘贴
    //qcloud.login({ 
    // success: res => { 
    
    
          //需要添加的部分
          this.$emit('changeShow',false,res)
    
    
          //参考代码，无需粘贴
          //wx.showTabBar()

###### （2）编辑父组件，也就是index.vue文件，读取子组件传递的信息 ######

在template中的HTML组件元素上面，将从子组件中传递过来的信息名称changeShow指向一个方法，并且在该方法中读取信息

1）在标签上面，将信息名称changeShow指向getModel方法，并传递参数arguments，这个参数包含着我们要传递的信息

2）在script标签中methods对象中添加方法getModel

//参考代码，无需粘贴
    //addMark (add) { 
      //...
    //},
    
    
    //需要添加的部分
    getModel (arguments) { 
      console.log("arguments",arguments)
      //将第一个信息false赋值到showLogin变量中，控制登录弹窗消息
      this.showLogin = val[0]
      //将第二个信息赋值到userinfo变量中
      this.userinfo = val[1]
    }

#### 3、测试效果 ####

在Storage中删除掉缓存信息，点击编译按钮刷新页面，点击授权登录按钮，就会出现我们下面演示的效果  
![format_png 2][]

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 3][]

[format_png]: /images/20230531/42c8613eed4e41c0af1e9f40c7f1ffdb.png
[g]: /images/20230531/0f9eaafb807e495192ad820f78686b5a.png
[format_png 1]: /images/20230531/40359538da5a415a8d855cea8b2a7f92.png
[format_png 2]: /images/20230531/51c8517f9dfa411cacde8cfe582f865d.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 3]: /images/20230531/9f237f5784d64a25b7cd8f252193e45b.png