uni-app学习【pages】

zheshiyangyang2025-08-24 9:28

目录

前言

pages.json页面路由

配置项列表

globalStyle

【pages】

style（pageStyle）

自定义导航

API跳转

uni.navigateTo()

uni.redirectTo()

uni.reLaunch()

uni.navigateBack()

组件跳转

navigator

其它

前言

在前面通过学习uni-app 的基础知识，相信对uni-app 的框架有了大概的认识，现在我们将学习uni-app 的pages配置

更多pages配置可以参考官方文档：

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

pages.json页面路由

pages.json 文件用来对uni-app 进行全局配置，决定页面文件的路径 、窗口样式 、原生的导航栏 、底部的原生tabbar

导航栏 高度为："44px"，tabBar的高度为："50px"

配置项列表

属性 类型 必填 描述 平台兼容性
pages Object Array 是 设置页面路径及窗口表现
globalStyle Object 否 设置页面的窗口表现
easycom Object 否 组件自动引入规则0 2.5.5+
tabBar Object 否 设置底部tab
condition Object 否 启动模式配置
subPackages Object Array 否 分包加载配置 H5不支持
preloadRule Object 否 分包预下载规则 微信小程序、支付宝小程序
leftWindow Object 否 大屏左侧窗口 H5
rightWindow Object 否 大屏右侧窗口 H5
unildRouter Object 否 自动跳转相关配置

下面是一个包含所有配置项的pages.json(来自uni-app官方文档)

javascript 复制代码 
{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

globalStyle

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

  • navigationBarBackgroundColor：导航栏背景颜色
  • navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色(black / white)
  • navigationBarTitleText：导航栏标题文字内容
  • navigationStyle：导航栏样式
  • backgroundColor：下拉显示出来的窗口背景色
  • backgroundTextStyle：下拉loading的样式，仅支持dark / light
  • enablePullDownRefresh：是否开启下拉刷新
  • animation Type：窗口显示的动画效果
  • animationDuration：窗口显示动画的持续时间，单位是ms
  • maxWidth：单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于maxWidth时，页面铺满；（适用于H5）

【pages】

uni-app 通过pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

  • path：String，配置页面路径
  • style：Object，配置页面窗口表现(参考下方pageStyle)
  • needLogin：Boolean，默认值：false，是否需要登录才访问

Tips：

  • pages节点的第一项 为应用入口页（首页）
  • 应用中新增 / 减少页面，都需要对pages数组进行修改
  • 文件名不需要写后缀，框架会自动寻找路径下的页面资源

假设开发目录为：

javascript 复制代码 
┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

则需要在pages.json中填写：

javascript 复制代码 
{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

style（pageStyle）

用于设置每个页面的状态栏 、导航条 、标题 、窗口背景色等等

页面中配置项会覆盖globalStyle中相同的配置项

详细配置项与上方的"globalStyle"一样

自定义导航

在pages.json中，原生导航栏默认存在，哪怕您将pages.json清空：

javascript 复制代码 
// 一个仅保留pages的pages.json，仍然会有原生导航栏
{
	"pages": [ 
		{
			"path": "pages/index/index"
		}
	]
}

效果：

上图红框区域就是导航栏，而想要关闭导航栏，需要手动配置"navigationStyle:custom"

javascript 复制代码 
{
	"pages": [ 
		{
			"path": "pages/index/index"
		}
	],
	"globalStyle": {
		"navigationStyle": "custom"
	}
}

API跳转

uni.navigateTo()

保留当前页面，跳转到应用内的某个页面，使用"uni.navigateBack"可以返回当前页面

语法：

javascript 复制代码 
uni.navigateTo(object)

参数：

  • object （必填）：跳转参数
    • url （必填）：需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间用？分隔，参数建与参数值用=相连，不同参数用&分隔，如'path?key=value&key2=value2'
    • animationType：窗口显示的动画效果
    • animationDuration：窗口动画持续时间
    • events：页面间通信接口，用于监听被打开页面发送到当前页面的数据
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：接口调用结束的回调函数

uni.redirectTo()

关闭当前页面，跳转到应用内的某个页面

语法：

javascript 复制代码 
uni.redirectTo(object)

参数：

  • object （必填）：跳转参数
    • url （必填）：需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间用？分隔，参数建与参数值用=相连，不同参数用&分隔，如'path?key=value&key2=value2'
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：接口调用结束的回调函数

uni.reLaunch()

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

语法：

javascript 复制代码 
uni.reLaunch(object)

参数：

  • object （必填）：跳转参数
    • url （必填）：需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间用？分隔，参数建与参数值用=相连，不同参数用&分隔，如'path?key=value&key2=value2'
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：接口调用结束的回调函数

uni.navigateBack()

关闭当前页面，返回上一页面 或多级页面 。可通过"getCurrentPages()"获取当前的页面栈，决定需要返回基层

语法：

javascript 复制代码 
uni.navigateBack(object)

参数：

  • object （必填）：
    • delta：Number，默认值1，返回的页面数，如果delta大于现有页面数，则返回到首页
    • animationType：窗口关闭的动画效果
    • animationDuration：关闭动画持续时间
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：接口调用结束的回调函数

注意：

  • 调用navigateTo跳转时，调用该方法的页面会加入堆栈，而redirectTo则不会

组件跳转

navigator 是uni-app 中一个内置组件，该组件类似于HTML 中的**<a>** 标签，目标页面必须在pages.json 中注册，但该组件只能跳转到本地页面。

属性：

  • url：应用内的跳转链接，值为绝对路径或相对路径，如"../first/first "、"、/pages/first/first"，不能加vue后缀
  • open-type：跳转方式
  • delta：当open-type为'navigateBack'时有效，表示回退的层数
  • animation-type：动画效果
  • animation-duration：动画持续时间
  • render-link：是否给navigator组件加一层a标签控制ssr吸纳然
  • hover-class：指定点击时的样式类

open-type值域：

  • navigate：对应uni.navigateTo
  • redirect：对应uni.redirectTo
  • switchTab：对应uni.switchTab
  • reLaunch：对应uni.reLaunch
  • navigateBack：对应uni.navigateBack
html 复制代码 
<template>
	<view>
		<view class="page-body">
			<view class="btn-area">
				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
					<button type="default">跳转到新页面</button>
				</navigator>
				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
					<button type="default">在当前页打开</button>
				</navigator>
				<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
					<button type="default">跳转tab页面</button>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
// navigate.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}
</script>

其它

更多uni-app学习可以参考我的专栏：

uni-app_是洋洋a的博客-CSDN博客

相关推荐
FinClip1 天前
工行APP深夜惊魂！账户一夜清零，金融机构如何筑牢数字防火墙？
前端·javascript·github
inx1771 天前
用纯 CSS 实现甜蜜亲吻动画：关键帧与伪元素的实战练习
前端·css
JarvanMo1 天前
Flutter UI中的无声杀手
前端
inx1771 天前
从拼接到优雅：用 ES6 模板字符串和 map 打造更简洁的前端代码
前端·javascript·dom
AirDroid_cn1 天前
Windows11 Edge 浏览器访问麦克风被阻止如何解除？
前端·edge
pythonpioneer1 天前
【2025】Solid Edge下载安装教程（附安装包）保姆级安装步骤
前端·数据库·其他·edge
小鱼小鱼.oO1 天前
java后端学习经验分享（大三进大厂版）
java·经验分享·学习
岁月宁静1 天前
图像生成接口的工程化设计与落地实践：封装豆包图像生成模型 Seedream 4.0 API
前端·人工智能·node.js
谢尔登1 天前
【GitLab/CD】前端 CD
前端·gitlab
ruanCat1 天前
在使用 changeset 时，如何在更新底部依赖时，触发上层依赖更新
前端·github
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04《大数据技术原理与应用》实验报告三 熟悉HBase常用操作05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08jdk21下载、安装（Windows、Linux、macOS）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）