uniapp APP登录页面设计

场景:

在没有登录的时候,一打开app 就要显示登录页面,如果登录过则显示第一个tab页面

由于底部的tab最多只能有五个,并且五个都已经占用,没有多余的tab分给登录页面,

如果将登录放在二级页面,那么,ios下屏幕上的左滑动,会返回到上一层,安卓的物理返回键,也会返回到上一层,无法做到登录页面视觉上是第一个页面

 

解决方案有两种

1、将登录做成一个组件页面,放在pages 配置的首页上,首页onload 时就判断登录态,根据条件显示是否为登录组件

2、将登录页面放在二级页面,并且pages.json 里面配置该页面不能左滑动 "popGesture": "none"  ,同时,在页面的 onBackPress 事件中

onBackPress(e){
    if(e.from=='backbutton'){
    //安卓下物理返回键无效
    return true;
    }
}

就可以做到登录页面视觉上为第一级页面,在首页中判断登录态,然后reLauch到登录页面,登录后调用switchTab切换到首页即可

 

注意:

退出登录的时候,如果只是清掉登录态,将页面跳转(navigateTo)到登录页面,或者是switchTab到放有登录组件的首页,在没有重启APP的情况下,所有的tab页面是不会被销毁的,在此情况下登录,所有放在页面作用域下的变量都是不会更新的。

使用 reLaunch 到登录页面可以避免这个问题

posted @ 2020-05-29 17:58  abc1234_abc  阅读(1164)  评论(0编辑  收藏