유니앱에서 네비게이션 바 설정 및 기본 포트 수정 방법에 대한 간략한 분석

青灯夜游
풀어 주다: 2021-09-06 19:08:31
앞으로
3270명이 탐색했습니다.

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

유니앱에서 네비게이션 바 설정 및 기본 포트 수정 방법에 대한 간략한 분석

设置导航栏

全局导航栏样式设置: 在pages.jsonglobalStyle里进行各个参数配置。【相关推荐:《uniapp教程》】

"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配置,设置端口就可以了。

유니앱에서 네비게이션 바 설정 및 기본 포트 수정 방법에 대한 간략한 분석

更多编程相关知识,请访问:编程入门!!

위 내용은 유니앱에서 네비게이션 바 설정 및 기본 포트 수정 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!