APICloud怎么设置管理员和游客的底部导航栏显示的不一样

版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88422196

要求：

1、如果是管理员登录的话，底部导航栏就会看到 首页、发布、管理和我的

2、如果是游客或者是普通用户的话，只会看到首页和我的

---

 

1、尝试和百度有用的如下 

1、用tabbar模块（底部导航栏）

 tabbar实例教程：https://blog.csdn.net/qq_37591637/article/details/88528136

---

2、通过什么来判断是否登录 

2.1、setstrorage(不推荐使用)

2.2、广播登录登出(后期博客会有这个内容)

2.3、在一个页面调用另一个页面的js方法：api.execScript(）+传参（主要推荐的）

---

3、贴代码并且解析

第一步：两个底部导航栏，一个是管理员登录时候显示的导航栏，一个是用户或者游客看到的导航栏

          游客/用户看到的导航栏

  //显示部分

function showpart() {
    alert("开始---部分");
    var NVTabBar = api.require('NVTabBar');
    //开始
    NVTabBar.open({ //({
        //style
        styles: {
            bg: '#333',
            //bg:"widget://image/NVTabBar/tabbar_bg.png",
            h: 65,
            dividingLine: {
                width: 0,
                color: '#000'
            },
            badge: {
                bgColor: '#ff0',
                numColor: '#fff',
                size: 6.0,
                centerX: 40,
                centerY: 6
            }
        },
        //style
        items: [{
            w: api.winWidth / 2.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/shouyes.png',
                highlight: 'widget://image/shouyes.png',
                selected: 'widget://image/shouye.png'
            },
            title: {
                text: '首页',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }, {
            w: api.winWidth / 2.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/mys.png',
                highlight: 'widget://image/mys.png',
                selected: 'widget://image/my.png'
            },
            title: {
                text: '我的',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }], //以上都没有缺口
        selectedIndex: 0
    }, function(ret, err) {
        //if
        if (ret) {
            //1
            if (ret.eventType == "show") {
                api.openFrame({
                    name: 'frame0',
                    url: 'widget://html/frame0.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            //1
            if (ret.eventType == "click" && ret.index == 0) {
                api.openFrame({
                    name: 'frame0',
                    url: 'widget://html/frame0.html',
                    rect: {
                        x: 0,
                        y: 30,
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            if (ret.eventType == "click" && ret.index == 1) {
                api.openFrame({
                    name: 'frame3',
                    url: 'widget://html/frame3.html',
                    rect: {
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            var NVTabBar = api.require('NVTabBar');
            NVTabBar.bringToFront();
        }
        //if
    });
}

//显示部分

                       管理员看到的导航栏 

//显示全部
function showall() {
    alert("开始---全部");
    //开始
    var NVTabBar = api.require('NVTabBar');
    NVTabBar.open({ //({
        //style
        styles: {
            bg: '#333',
            //bg:"widget://image/NVTabBar/tabbar_bg.png",
            h: 65,
            dividingLine: {
                width: 0,
                color: '#000'
            },
            badge: {
                bgColor: '#ff0',
                numColor: '#fff',
                size: 6.0,
                centerX: 40,
                centerY: 6
            }
        },
        //style
        items: [{
            w: api.winWidth / 4.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/shouyes.png',
                highlight: 'widget://image/shouyes.png',
                selected: 'widget://image/shouye.png'
            },
            title: {
                text: '首页',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }, {
            w: api.winWidth / 4.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/guanlis.png',
                highlight: 'widget://image/guanlis.png',
                selected: 'widget://image/guanli.png'
            },
            title: {
                text: '管理',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }, {
            w: api.winWidth / 4.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/publics.png',
                highlight: 'widget://image/publics.png',
                selected: 'widget://image/public.png'
            },
            title: {
                text: '发布',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }, {
            w: api.winWidth / 4.0,
            bg: {
                marginB: 0,
                image: 'rgba(200,200,200,0.6)'
            },
            iconRect: {
                w: 25.0,
                h: 25.0,
            },
            icon: {
                normal: 'widget://image/mys.png',
                highlight: 'widget://image/mys.png',
                selected: 'widget://image/my.png'
            },
            title: {
                text: '我的',
                size: 12.0,
                normal: '#696969',
                selected: '#eb4f38',
                marginB: 6.0
            }
        }], //以上都没有缺口
        selectedIndex: 0
    }, function(ret, err) {
        //if
        if (ret) {
            //1
            if (ret.eventType == "show") {
                api.openFrame({
                    name: 'frame0',
                    url: 'widget://html/frame0.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            //1
            if (ret.eventType == "click" && ret.index == 0) {
                api.openFrame({
                    name: 'frame0',
                    url: 'widget://html/frame0.html',
                    rect: {
                        x: 0,
                        y: 30,
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            if (ret.eventType == "click" && ret.index == 1) {
                api.openFrame({
                    name: 'frame1',
                    url: 'widget://html/frame1.html',
                    rect: {
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            if (ret.eventType == "click" && ret.index == 2) {
                api.openFrame({
                    name: 'frame2',
                    url: 'widget://html/frame2.html',
                    rect: {
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            if (ret.eventType == "click" && ret.index == 3) {
                api.openFrame({
                    name: 'frame3',
                    url: 'widget://html/frame3.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto',
                        marginLeft: 0, //相对父 window 左外边距的距离
                        marginTop: 0, //相对父 window 上外边距的距离
                        marginBottom: 0, //相对父 window 下外边距的距离
                        marginRight: 0 //相对父 window 右外边距的距离
                    }
                })
            }
            //1
            var NVTabBar = api.require('NVTabBar');
            NVTabBar.bringToFront();
        }
        //if
    });
}

 第二步、在加载页面的时候，处于未登录状态，这里要有判断

               未登录：显示部分导航栏

                   登录：显示全部导航栏

       

注意：在切换导航栏的时候必须先关闭模块，不然不生效不起作用

田江西是管理员账号，你也可以设置另一个参数密码，严谨

//导航栏的实现//导航栏的实现
function tabars(uu) {
    var NVTabBar = api.require('NVTabBar');
      //先关闭底部导航栏
    NVTabBar.close();
    alert('底部导航栏');
    if (uu == '田江西') {
        alert("全部显示");
        showall();
    } else {
        alert("部分显示");
        showpart();
    }
}

apiready = function() {
        var uu = '';
        tabars(uu);
    }
    //显示部分

在页面刚加载的时候必须设置uu='';不然就会出现下面的情况

 

 当这个app刚打开的时候因为uu是null的，就会显示游客/普通用户的导航栏，这个部分就结束了！！！

---

登录页面

当页面上输入用户名 密码，点击登录的时候

在js里面先判断是不是管理员在登录，是的话，提示登录成功，并且调用index.html（底部导航栏页面）里面的tabars方法

为什么？

我把管理员的用户名传递过去

index.html的js方法里面有判断参数是不是管理员账号的，是的话，就显示管理员的底部导航栏！！

 注意事项：怎么传参！！！

 应该是    var jsfun = 'tabars("'+uu+'");';

正确代码如下 

  //提示登录成功
        api.toast({
            msg: '登录成功',
            duration: 3000,
            location: 'bottom'
        });
        //提示登录成功
        //开始调用index页面的tabar方法
                    isdiv(uu);
                    $api.setStorage('username', uu);
                    var jsfun = 'tabars("'+uu+'");';
                    api.execScript({
                      name : 'root',
                      script: jsfun
                    });
                    //开启新的窗口
      //开始调用index页面的tabar方法

isdiv(uu);是我的一个方法，因为我把登录和登录成功以后的页面都放在一个html页面的不同div里面了

默认 登录成功的div是隐藏的；

登录页面是显示的；

当登录成功以后，就会调用isdiv(uu) 方法设置

登录成功的div是显示的；

登录页面是隐藏的的；

---

小知识：

 api.execScript({
                      name : 'root',
                      script: jsfun
                    });

之所以name:"root"是因为我要调用index.html页面里面的方法；而index.html是根窗口下面的文件 所以是root

如果是其他窗口，就写其他窗口的名称！！！！

---