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博客

相关推荐
秋秋小事1 分钟前
React Hooks UseRef的用法
前端·javascript·react.js
yinuo9 分钟前
uniapp换肤最佳实践
前端
MowenPan199537 分钟前
高等数学 9.1多元函数的基本概念
笔记·学习·高等数学
XboxYan2 小时前
CSS 小技巧：如何将 img 转换成 background-image
前端·css
辉长六加12 小时前
nodejs和vue安装步骤记录
前端·javascript·vue.js·npm·node.js
coding随想2 小时前
掌控网页的灵魂！揭秘DOM事件中鼠标与滚轮的终极操控术
前端
Jerry3 小时前
Compose 基础知识测试
前端
changuncle3 小时前
Angular初学者入门第三课——工厂函数（精品）
前端·javascript·angular.js
ScottePerk3 小时前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder3 小时前
Canvas 复杂交互步骤：从事件监听 to 重新绘制全流程
前端
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03【踩坑笔记】50系显卡适配的 PyTorch 安装04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接05Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code06Claude Code VSCode集成开发指南：AI编程助手完整配置072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）0820个国内外主流AI绘画工具大汇总（最新免费可用~）09【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）10Linux下V2Ray安装配置指南