Uniapp开发总结

一、tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

pages.json 页面路由 | uni-app官网

pages.json基本配置：

"tabBar": {"color": "#000","selectedColor": "#4BB7DB","borderStyle": "white","fontSize": "14px","list": [{"text": "预警","pagePath": "pages/early_warning_list/early_warning_list","iconPath": "./static/warning.png","selectedIconPath": "./static/warning-selected.png"},{"text": "工单","pagePath": "pages/work_order_list/work_order_list","iconPath": "./static/work-order.png","selectedIconPath": "./static/work-order-selected.png"},{"text": "监控","pagePath": "pages/monitor/monitor","iconPath": "./static/monitor.png","selectedIconPath": "./static/monitor-selected.png"},{"text": "上报","pagePath": "pages/data-report-list/data-report-list","iconPath": "./static/data-report.png","selectedIconPath": "./static/data-report-selected.png"},{"text": "我的","pagePath": "pages/user/user","iconPath": "./static/user.png","selectedIconPath": "./static/user-selected.png"}]}

二、globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

pages.json 页面路由 | uni-app官网

pages.json基本配置：

	"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "XXX","navigationBarBackgroundColor": "#D4ECFF","backgroundColor": "#D4ECFF","app-plus": {"bounce": "none" //关闭窗口回弹效果}}

三、跳转至tabBar页

uni.switchTab(OBJECT)：

uni.navigateTo(OBJECT) | uni-app官网

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

			uni.switchTab({url: '/pages/early_warning_list/early_warning_list',success: function() {console.log('跳转成功');},fail: function() {console.log('跳转失败');}});

四、关闭所有页面，打开到应用内的某个页面

uni.reLaunch(OBJECT)

uni.navigateTo(OBJECT) | uni-app官网

		uni.reLaunch({url: '/pages/login/login' // 这里的URL是登录页面的路径});