浅析uni-app中设置导航栏和修改默认端口的方法

uni-app中怎么设置导航栏？怎么修改默认端口？下面本篇文章给大家介绍一下uni-app导航栏设置，以及在pages.json里面配置并修改默认端口的方法。

设置导航栏

全局导航栏样式设置： 在 pages.json 的 globalStyle 里进行各个参数配置。

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Hello uniapp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6",
    "mp-alipay": {
        "titleBarColor": "#FFFFFF"
    }
},

单页面导航栏样式设置：每个 page 下面的 style 配置中的 navigationBar 各个参数配置，即为通用配置，小程序、app、h5均生效。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主页",  
    }
},

我的一个demo的 pages.json 简单配置（这里引入了 uView）

{
    "easycom": { //uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        }, {
            "path": "pages/class/index",
            "style": {
                "navigationBarTitleText": "分类"
            }
        },
        {
            "path": "pages/car/index",
            "style": {
                "navigationBarTitleText": "购物车"
            }
        },
        {
            "path": "pages/mine/index",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/address/addSite",
            "style": {
                "navigationBarTitleText": "添加用户地址"
            }
        },
        {
            "path": "pages/address/index",
            "style": {
                "navigationBarTitleText": "用户地址"
            }
        }
    ],
    //底部导航栏
    "tabBar": {
        "color": "#999", //当前字体颜色
        "selectedColor": "#333", //点击激活的字体颜色
        "backgroundColor": "#F0F3F6", //背景颜色
        "borderStyle": "white",
        "list": [{
                "text": "首页", //字体
                "iconPath": "static/tabs/home.png", // 当前图片的颜色
                "selectedIconPath": "static/tabs/home-active.png", // 选中图片的颜色
                "pagePath": "pages/index/index" //路径
            },
            {
                "text": "分类",
                "iconPath": "static/tabs/welfare.png",
                "selectedIconPath": "static/tabs/welfare-active.png",
                "pagePath": "pages/class/index"
            },
            {
                "text": "购物车",
                "iconPath": "static/tabs/shop-car.png",
                "selectedIconPath": "static/tabs/shop-caron.png",
                "pagePath": "pages/car/index"
            },
            {
                "text": "我的",
                "iconPath": "static/tabs/my.png",
                "selectedIconPath": "static/tabs/my-active.png",
                "pagePath": "pages/mine/index"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "异联盟",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#F8F8F8",
        "backgroundTextStyle": "light"
    }
}

结果如下：

修改端口

uni-app 默认端口为 8080，与 tomcat 的默认端口冲突。

解决方案一：不推荐

先启动 tomcat，再启动 uni-app 端口会自动修改为 8081 。

解决方案二：

打开项目--->打开 manifest.json 文件，选择h5配置，设置端口就可以了。