Uniapp开发总结

duansamve2025-01-26 19:59

一、tabBar

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

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是登录页面的路径
		  });