本课是 uni-app 跨平台开发的核心进阶内容聚焦页面管理与路由跳转是开发完整多端应用的必备技能。课程围绕 pages.json 配置、路由 API、路由传参、页面生命周期四大核心拆解多页面开发全流程贴合实战场景。掌握本课内容能规范搭建 uni-app 多页面项目实现页面之间的流畅跳转与数据传递搭配 TabBar 打造完整应用框架。uni-app 路由兼顾多端兼容性学习门槛低和 Vue 路由逻辑相近上手极快。本课内容是后续接口对接、数据渲染、项目上线的基础也是开发跨平台小程序、App 的核心环节能大幅提升全端开发实战能力。一、课程学习目的熟练掌握 uni-app 页面创建、配置规范理解全局样式与页面样式的优先级。精通 uni-app 路由配置、页面跳转、参数传递与接收实现多页面流畅交互。掌握页面生命周期用法适配页面加载、显示、隐藏、卸载等场景。学会配置导航栏、TabBar打造完整的多页面应用结构。理解多端路由差异规避常见路由报错提升项目稳定性。能够搭建完整的多页面 uni-app 项目实现页面跳转、传参、返回闭环。二、核心知识点讲解1. uni-app 页面基础uni-app 页面存放在 pages 文件夹下每个页面由 vue 文件组成遵循 Vue3 组合式 API 语法专用组件代替传统 HTML 标签适配多端渲染。页面必须在 pages.json 中注册排在数组第一项的页面为项目首页是项目启动后默认加载的页面。页面结构分为模板、脚本、样式三部分模板部分只能用 uni-app 内置组件禁止使用 div、span、p 等浏览器标签。2. pages.json 核心配置pages.json 是 uni-app 全局配置文件负责路由、导航栏、TabBar 等全局设置是多页面开发的核心文件。主要配置项pages数组格式存放所有页面路由包含页面路径和页面样式。globalStyle全局默认配置统一设置导航栏、背景色等样式。tabBar配置底部 Tab 栏实现首页、列表、个人中心等常用页面快捷切换。3. uni-app 路由跳转 APIuni-app 提供专用路由 API实现页面跳转、返回、关闭等操作兼容小程序、App、H5 多端。uni.navigateTo保留当前页面跳转到新页面可返回上一页支持传参。uni.redirectTo关闭当前页面跳转到新页面不可返回被关闭的页面。uni.switchTab跳转到 TabBar 页面关闭其他所有非 TabBar 页面。uni.navigateBack返回上一级或多级页面配合层级使用。4. 路由传参与参数接收路由传参用于页面间数据传递比如列表页跳详情页传递单词名称、id 等数据。传参方式在跳转路径后拼接参数格式为 url?参数名值参数名值。参数接收在目标页面的 onLoad 生命周期中通过 options 对象获取传递的参数。5. 页面生命周期页面生命周期是页面从加载到卸载的全过程常用生命周期onLoad页面加载时触发只执行一次用于接收参数、请求数据。onShow页面显示时触发每次显示都会执行。onReady页面初次渲染完成时触发。onUnload页面卸载时触发用于清理定时器、取消订阅。6. TabBar 配置规则TabBar 最少配置2个、最多配置5个页面需设置页面路径、按钮文字、图标路径必须在 pages 数组中先注册。跳转到 TabBar 页面必须使用 uni.switchTab不能用 navigateTo否则会跳转失败。三、示例程序示例1pages.json 完整配置路由导航TabBar{pages:[// 首页TabBar页面{path:pages/index/index,style:{navigationBarTitleText:首页}},// 单词列表页TabBar页面{path:pages/list/list,style:{navigationBarTitleText:单词列表}},// 单词详情页普通页面{path:pages/detail/detail,style:{navigationBarTitleText:单词详情}}],globalStyle:{navigationBarTextStyle:white,navigationBarBackgroundColor:#42b983,backgroundColor:#f5f5f5},tabBar:{color:#666,selectedColor:#42b983,list:[{pagePath:pages/index/index,text:首页},{pagePath:pages/list/list,text:单词列表}]}}示例2列表页跳转详情页传参template view classlist view classitem v-foritem in wordList :keyitem.id clickgoDetail(item) text{{ item.en }} - {{ item.cn }}/text /view /view /template script setup import { ref } from vue // 单词列表数据 const wordList ref([ { id: 1, en: apple, cn: 苹果 }, { id: 2, en: banana, cn: 香蕉 } ]) // 跳转详情页并传递参数 const goDetail (item) { uni.navigateTo({ url: /pages/detail/detail?id${item.id}en${item.en}cn${item.cn} }) } /script示例3详情页接收参数template view classdetail text英文{{ word.en }}/text text中文{{ word.cn }}/text button clickgoBack返回列表/button /view /template script setup import { ref } from vue // 存储单词数据 const word ref({}) // onLoad生命周期接收路由参数 onLoad((options) { // options 存放所有传递的参数 word.value { id: options.id, en: options.en, cn: options.cn } }) // 返回上一页 const goBack () { uni.navigateBack() } /script示例4TabBar 页面跳转// 跳转到首页TabBar页面constgoIndex(){uni.switchTab({url:/pages/index/index})}四、掌握技巧与方法新建页面后第一时间在 pages.json 注册避免页面找不到报错。普通页面跳转用 navigateToTabBar 页面跳转必须用 switchTab。路由传参时特殊字符需编码长文本不建议通过路由传递。onLoad 生命周期只执行一次适合初始化数据和接收路由参数。页面路径必须写绝对路径以 / 开头保证多端跳转一致。导航栏标题、样式在 pages.json 配置优先级高于全局样式。调试路由报错时先检查路径拼写、参数格式、跳转 API 是否正确。样式使用 rpx 响应式单位适配手机、小程序等不同设备屏幕。五、课后作业基础作业创建3个页面首页、列表页、详情页在 pages.json 完成路由注册。配置全局导航栏样式设置底部 TabBar包含首页和列表页。使用 navigateTo 实现列表页跳详情页完成基础路由跳转。进阶作业实现路由传参列表页传递单词数据详情页接收并渲染。使用 navigateBack 实现详情页返回列表页功能。用 switchTab 实现 TabBar 页面快捷切换。实战作业开发 uni-app 多页面单词应用包含首页、单词列表页、单词详情页配置 TabBar 导航实现页面跳转、路由传参、参数接收、返回上一页适配 H5 和微信小程序代码规范、注释完整、页面美观。上一课跨平台开发概述与 uni-app 入门 实战作业代码代码功能说明本实战作业基于 HBuilderX 开发工具使用 Vue3 语法搭建 uni-app 跨平台单词管理项目包含首页和单词列表页两个页面。项目完成 pages.json 路由注册与全局导航栏配置使用 uni-app 内置组件搭建页面结构实现页面跳转、列表渲染、样式美化等功能。代码贴合跨平台开发规范适配 H5 网页端与微信小程序端一套代码可运行在多端。项目结构清晰注释详尽无浏览器专属 API完美贴合课程知识点帮助巩固 uni-app 项目创建、配置、基础开发的全流程快速入门跨平台开发。注意事项必须使用 HBuilderX 编辑器创建和运行项目不推荐其他编辑器。页面必须在 pages.json 中注册否则无法正常访问和跳转。禁止使用 div、span 等 HTML 标签改用 view、text 内置组件。样式单位优先使用 rpx实现多端屏幕自适应避免使用固定 px。运行到微信小程序时需开启小程序服务端口配置安全域名。项目文件夹路径不要包含中文和特殊字符防止编译报错。运行项目前先保存所有文件避免代码修改不生效。页面文件命名和路径保持小写统一规范便于维护。完整实战代码项目结构uni-app-word/ ├── pages/ │ ├── index/ │ │ └── index.vue │ └── list/ │ └── list.vue ├── static/ ├── App.vue ├── main.js └── pages.jsonpages.json全局配置{pages:[{path:pages/index/index,style:{navigationBarTitleText:单词库首页}},{path:pages/list/list,style:{navigationBarTitleText:单词列表}}],globalStyle:{navigationBarTextStyle:white,navigationBarBackgroundColor:#42b983,backgroundColor:#f5f5f5}}App.vue全局入口script export default { onLaunch: function() { console.log(App启动) }, onShow: function() { console.log(App显示) }, onHide: function() { console.log(App隐藏) } } /script style /* 全局样式 */ page { background-color: #f5f5f5; } /stylemain.jsVue入口import{createSSRApp}fromvueexportfunctioncreateApp(){constappcreateSSRApp({onLaunch:(){},...App})return{app}}pages/index/index.vue首页template view classcontainer text classtitleuni-app 单词管理器/text text classdesc跨平台开发入门实战/text button classbtn typeprimary clickgoToList进入单词列表/button /view /template script setup // 跳转到列表页 const goToList () { uni.navigateTo({ url: /pages/list/list }) } /script style scoped .container { padding: 60rpx; display: flex; flex-direction: column; align-items: center; margin-top: 100rpx; } .title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .desc { font-size: 28rpx; color: #666; margin-bottom: 60rpx; } .btn { width: 300rpx; height: 80rpx; line-height: 80rpx; text-align: center; } /stylepages/list/list.vue单词列表页template view classlist-box view classitem v-foritem in wordList :keyitem.id text classen{{ item.en }}/text text classcn{{ item.cn }}/text /view button classback-btn clickgoBack返回首页/button /view /template script setup import { ref } from vue // 定义单词数据 const wordList ref([ { id: 1, en: apple, cn: 苹果 }, { id: 2, en: banana, cn: 香蕉 }, { id: 3, en: orange, cn: 橙子 }, { id: 4, en: vue, cn: 前端框架 } ]) // 返回上一页 const goBack () { uni.navigateBack() } /script style scoped .list-box { padding: 30rpx; } .item { background-color: #fff; padding: 30rpx; border-radius: 12rpx; margin-bottom: 20rpx; display: flex; justify-content: space-between; } .en { font-size: 32rpx; color: #333; font-weight: 500; } .cn { font-size: 28rpx; color: #666; } .back-btn { margin-top: 40rpx; } /style运行方式打开 HBuilderX导入项目文件夹。点击菜单栏【运行】选择【运行到浏览器】或【运行到微信小程序】。等待编译完成即可预览多端效果。作业验收标准项目可正常运行无编译报错页面正常显示。首页与列表页跳转流畅返回功能正常。列表数据正常渲染样式美观适配多端屏幕。代码规范注释清晰符合 uni-app 开发标准。H5 端和微信小程序端均可正常运行无兼容性问题。
JavaScript基础课程二十八、uni-app 页面与路由
本课是 uni-app 跨平台开发的核心进阶内容聚焦页面管理与路由跳转是开发完整多端应用的必备技能。课程围绕 pages.json 配置、路由 API、路由传参、页面生命周期四大核心拆解多页面开发全流程贴合实战场景。掌握本课内容能规范搭建 uni-app 多页面项目实现页面之间的流畅跳转与数据传递搭配 TabBar 打造完整应用框架。uni-app 路由兼顾多端兼容性学习门槛低和 Vue 路由逻辑相近上手极快。本课内容是后续接口对接、数据渲染、项目上线的基础也是开发跨平台小程序、App 的核心环节能大幅提升全端开发实战能力。一、课程学习目的熟练掌握 uni-app 页面创建、配置规范理解全局样式与页面样式的优先级。精通 uni-app 路由配置、页面跳转、参数传递与接收实现多页面流畅交互。掌握页面生命周期用法适配页面加载、显示、隐藏、卸载等场景。学会配置导航栏、TabBar打造完整的多页面应用结构。理解多端路由差异规避常见路由报错提升项目稳定性。能够搭建完整的多页面 uni-app 项目实现页面跳转、传参、返回闭环。二、核心知识点讲解1. uni-app 页面基础uni-app 页面存放在 pages 文件夹下每个页面由 vue 文件组成遵循 Vue3 组合式 API 语法专用组件代替传统 HTML 标签适配多端渲染。页面必须在 pages.json 中注册排在数组第一项的页面为项目首页是项目启动后默认加载的页面。页面结构分为模板、脚本、样式三部分模板部分只能用 uni-app 内置组件禁止使用 div、span、p 等浏览器标签。2. pages.json 核心配置pages.json 是 uni-app 全局配置文件负责路由、导航栏、TabBar 等全局设置是多页面开发的核心文件。主要配置项pages数组格式存放所有页面路由包含页面路径和页面样式。globalStyle全局默认配置统一设置导航栏、背景色等样式。tabBar配置底部 Tab 栏实现首页、列表、个人中心等常用页面快捷切换。3. uni-app 路由跳转 APIuni-app 提供专用路由 API实现页面跳转、返回、关闭等操作兼容小程序、App、H5 多端。uni.navigateTo保留当前页面跳转到新页面可返回上一页支持传参。uni.redirectTo关闭当前页面跳转到新页面不可返回被关闭的页面。uni.switchTab跳转到 TabBar 页面关闭其他所有非 TabBar 页面。uni.navigateBack返回上一级或多级页面配合层级使用。4. 路由传参与参数接收路由传参用于页面间数据传递比如列表页跳详情页传递单词名称、id 等数据。传参方式在跳转路径后拼接参数格式为 url?参数名值参数名值。参数接收在目标页面的 onLoad 生命周期中通过 options 对象获取传递的参数。5. 页面生命周期页面生命周期是页面从加载到卸载的全过程常用生命周期onLoad页面加载时触发只执行一次用于接收参数、请求数据。onShow页面显示时触发每次显示都会执行。onReady页面初次渲染完成时触发。onUnload页面卸载时触发用于清理定时器、取消订阅。6. TabBar 配置规则TabBar 最少配置2个、最多配置5个页面需设置页面路径、按钮文字、图标路径必须在 pages 数组中先注册。跳转到 TabBar 页面必须使用 uni.switchTab不能用 navigateTo否则会跳转失败。三、示例程序示例1pages.json 完整配置路由导航TabBar{pages:[// 首页TabBar页面{path:pages/index/index,style:{navigationBarTitleText:首页}},// 单词列表页TabBar页面{path:pages/list/list,style:{navigationBarTitleText:单词列表}},// 单词详情页普通页面{path:pages/detail/detail,style:{navigationBarTitleText:单词详情}}],globalStyle:{navigationBarTextStyle:white,navigationBarBackgroundColor:#42b983,backgroundColor:#f5f5f5},tabBar:{color:#666,selectedColor:#42b983,list:[{pagePath:pages/index/index,text:首页},{pagePath:pages/list/list,text:单词列表}]}}示例2列表页跳转详情页传参template view classlist view classitem v-foritem in wordList :keyitem.id clickgoDetail(item) text{{ item.en }} - {{ item.cn }}/text /view /view /template script setup import { ref } from vue // 单词列表数据 const wordList ref([ { id: 1, en: apple, cn: 苹果 }, { id: 2, en: banana, cn: 香蕉 } ]) // 跳转详情页并传递参数 const goDetail (item) { uni.navigateTo({ url: /pages/detail/detail?id${item.id}en${item.en}cn${item.cn} }) } /script示例3详情页接收参数template view classdetail text英文{{ word.en }}/text text中文{{ word.cn }}/text button clickgoBack返回列表/button /view /template script setup import { ref } from vue // 存储单词数据 const word ref({}) // onLoad生命周期接收路由参数 onLoad((options) { // options 存放所有传递的参数 word.value { id: options.id, en: options.en, cn: options.cn } }) // 返回上一页 const goBack () { uni.navigateBack() } /script示例4TabBar 页面跳转// 跳转到首页TabBar页面constgoIndex(){uni.switchTab({url:/pages/index/index})}四、掌握技巧与方法新建页面后第一时间在 pages.json 注册避免页面找不到报错。普通页面跳转用 navigateToTabBar 页面跳转必须用 switchTab。路由传参时特殊字符需编码长文本不建议通过路由传递。onLoad 生命周期只执行一次适合初始化数据和接收路由参数。页面路径必须写绝对路径以 / 开头保证多端跳转一致。导航栏标题、样式在 pages.json 配置优先级高于全局样式。调试路由报错时先检查路径拼写、参数格式、跳转 API 是否正确。样式使用 rpx 响应式单位适配手机、小程序等不同设备屏幕。五、课后作业基础作业创建3个页面首页、列表页、详情页在 pages.json 完成路由注册。配置全局导航栏样式设置底部 TabBar包含首页和列表页。使用 navigateTo 实现列表页跳详情页完成基础路由跳转。进阶作业实现路由传参列表页传递单词数据详情页接收并渲染。使用 navigateBack 实现详情页返回列表页功能。用 switchTab 实现 TabBar 页面快捷切换。实战作业开发 uni-app 多页面单词应用包含首页、单词列表页、单词详情页配置 TabBar 导航实现页面跳转、路由传参、参数接收、返回上一页适配 H5 和微信小程序代码规范、注释完整、页面美观。上一课跨平台开发概述与 uni-app 入门 实战作业代码代码功能说明本实战作业基于 HBuilderX 开发工具使用 Vue3 语法搭建 uni-app 跨平台单词管理项目包含首页和单词列表页两个页面。项目完成 pages.json 路由注册与全局导航栏配置使用 uni-app 内置组件搭建页面结构实现页面跳转、列表渲染、样式美化等功能。代码贴合跨平台开发规范适配 H5 网页端与微信小程序端一套代码可运行在多端。项目结构清晰注释详尽无浏览器专属 API完美贴合课程知识点帮助巩固 uni-app 项目创建、配置、基础开发的全流程快速入门跨平台开发。注意事项必须使用 HBuilderX 编辑器创建和运行项目不推荐其他编辑器。页面必须在 pages.json 中注册否则无法正常访问和跳转。禁止使用 div、span 等 HTML 标签改用 view、text 内置组件。样式单位优先使用 rpx实现多端屏幕自适应避免使用固定 px。运行到微信小程序时需开启小程序服务端口配置安全域名。项目文件夹路径不要包含中文和特殊字符防止编译报错。运行项目前先保存所有文件避免代码修改不生效。页面文件命名和路径保持小写统一规范便于维护。完整实战代码项目结构uni-app-word/ ├── pages/ │ ├── index/ │ │ └── index.vue │ └── list/ │ └── list.vue ├── static/ ├── App.vue ├── main.js └── pages.jsonpages.json全局配置{pages:[{path:pages/index/index,style:{navigationBarTitleText:单词库首页}},{path:pages/list/list,style:{navigationBarTitleText:单词列表}}],globalStyle:{navigationBarTextStyle:white,navigationBarBackgroundColor:#42b983,backgroundColor:#f5f5f5}}App.vue全局入口script export default { onLaunch: function() { console.log(App启动) }, onShow: function() { console.log(App显示) }, onHide: function() { console.log(App隐藏) } } /script style /* 全局样式 */ page { background-color: #f5f5f5; } /stylemain.jsVue入口import{createSSRApp}fromvueexportfunctioncreateApp(){constappcreateSSRApp({onLaunch:(){},...App})return{app}}pages/index/index.vue首页template view classcontainer text classtitleuni-app 单词管理器/text text classdesc跨平台开发入门实战/text button classbtn typeprimary clickgoToList进入单词列表/button /view /template script setup // 跳转到列表页 const goToList () { uni.navigateTo({ url: /pages/list/list }) } /script style scoped .container { padding: 60rpx; display: flex; flex-direction: column; align-items: center; margin-top: 100rpx; } .title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .desc { font-size: 28rpx; color: #666; margin-bottom: 60rpx; } .btn { width: 300rpx; height: 80rpx; line-height: 80rpx; text-align: center; } /stylepages/list/list.vue单词列表页template view classlist-box view classitem v-foritem in wordList :keyitem.id text classen{{ item.en }}/text text classcn{{ item.cn }}/text /view button classback-btn clickgoBack返回首页/button /view /template script setup import { ref } from vue // 定义单词数据 const wordList ref([ { id: 1, en: apple, cn: 苹果 }, { id: 2, en: banana, cn: 香蕉 }, { id: 3, en: orange, cn: 橙子 }, { id: 4, en: vue, cn: 前端框架 } ]) // 返回上一页 const goBack () { uni.navigateBack() } /script style scoped .list-box { padding: 30rpx; } .item { background-color: #fff; padding: 30rpx; border-radius: 12rpx; margin-bottom: 20rpx; display: flex; justify-content: space-between; } .en { font-size: 32rpx; color: #333; font-weight: 500; } .cn { font-size: 28rpx; color: #666; } .back-btn { margin-top: 40rpx; } /style运行方式打开 HBuilderX导入项目文件夹。点击菜单栏【运行】选择【运行到浏览器】或【运行到微信小程序】。等待编译完成即可预览多端效果。作业验收标准项目可正常运行无编译报错页面正常显示。首页与列表页跳转流畅返回功能正常。列表数据正常渲染样式美观适配多端屏幕。代码规范注释清晰符合 uni-app 开发标准。H5 端和微信小程序端均可正常运行无兼容性问题。
