vue 登录页面_微信小程序全栈开发课程【视频版】3.4 登录功能-控制登录弹窗显示...

823c1b6b961eff574339edde37ded62f.png

点击观看视频 ↓↓↓

d9e099743ddeb184fd320884bad433c1.png
登录功能-控制登录弹窗显示https://www.zhihu.com/video/1200446097694580736

课程文字版

1、获取用户信息

我们在实现登录功能时,添加的登录成功时调用的方法loginSuccess。方法中代码wx.setStorageSync('userinfo', res)的作用是将用户信息保存到了缓存中,并将这条缓存信息命名为userinfo。缓存信息会一直存储在用户的手机中,等到下次打开小程序的时候,小程序会读取微信的缓存,来获得用户信息。如果用户清除了微信的缓存,那么需要用户重新登录小程序。现在我们从缓存中将用户信息读取出来

(1)查看缓存数据

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

b711314a7bdb583722943e832c5bd1f5.png

ba5c9a12538a4452fb4f0e942cf904a9.png

(2)编辑index.vue文件<script>部分的data对象

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

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

(3)获取用户信息

编辑index.vue文件<script>部分,添加mounted函数每次打开小程序先从缓存中读取是否有名为userinfo的信息,如果有,说明用户登录了,打开小程序会直接显示首页;如果没有,说明用户还未登录,打开小程序显示登录弹窗,提示登录

//mounted是vue的生命周期,在页面加载完成后执行
mounted () {
  const userinfo = wx.getStorageSync('userinfo')
  //如果缓存中有userinfo的信息,说明用户登录了。
  if(userinfo.openId){
    //将用户信息储存到data的userinfo字段里面,this.userinfo就是指的这个字段。
    this.userinfo = userinfo
   }else{
    wx.hideTabBar()
   }
},

(4)查看效果

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

e5b735abccef422b3a5b8e664a1b968c.png

2、登录弹窗显示控制

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

(1)编辑index.vue文件<script>部分的data对象

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

//参考代码,无需粘贴
//userinfo:{},


//需要粘贴的部分,设置默认值为false
showLogin:false

(2)编辑index.vue文件<script>部分的onShow函数

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

//参考代码,无需粘贴
//}else{
 //wx.hideTabBar()


//需要粘贴的部分
 this.showLogin = true

(3)编辑template部分

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

<!-- 需要添加的部分 —>
<!-- v-if是vue的语法,判断语句,当showLogin为true时,显示v-if所在标签包含的部分,也就是登录弹窗页面 -->
<div v-if="showLogin">


  <!-- 参考代码,无需粘贴
  <LoginWindow></LoginWindow>


<!-- 需要添加的部分 -->
</div>

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

上一步完成之后,点击授权登录按钮,登录弹窗还是存在,没有消失,因为在登录成功之后,没有将showLogin改为false,需要在login方法中操作但是login方法在LoginWindow.vue文件中,这个文件是我们上一节创建的子组件,index.vue文件是他的父组件我们下面演示子组件向父组件传递信息,即在子组件中告诉父组件,将showLogin变量改为false,从而控制登录弹窗消失

(1)编辑子组件,也就是LoginWindow.vue文件,在this.$emit中添加需要传递的信息

编辑<script>部分,methods对象中的login方法,将要传递的信息命名为changeShow,后面跟着要传递的信息,第一个信息是false,第二个信息res是用户信息

//参考代码,无需粘贴
//qcloud.login({
//  success: res => {


      //需要添加的部分
      this.$emit('changeShow',false,res)


      //参考代码,无需粘贴
      //wx.showTabBar()

(2)编辑父组件,也就是index.vue文件,读取子组件传递的信息

在template中的HTML组件元素上面,将从子组件中传递过来的信息名称changeShow指向一个方法,并且在该方法中读取信息1)在<LoginWindow>标签上面,将信息名称changeShow指向getModel方法,并传递参数arguments,这个参数包含着我们要传递的信息

<LoginWindow @changeShow="getModel(arguments)"></LoginWindow>

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

//参考代码,无需粘贴
//addMark (add) {
  //...
//},


//需要添加的部分
getModel (val) {
  //将第一个信息false赋值到showLogin变量中,控制登录弹窗消息
  this.showLogin = val[0]
  //将第二个信息赋值到userinfo变量中
  this.userinfo = val[1]
}

4、测试效果

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

ec6771a71ee6e50578b57c63e09af277.png
关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码
B站可以1.5倍加速观看视频课程
微信小程序实战开发课程【提供源码】实际上线项目 mpvue+koa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com
1f8a74f1a42851f7bcf449837c29f6bf.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值