uniapp 系统学习,从入门到实战(四)—— 页面与路由管理

全篇大概 2700 字(含代码),建议阅读时间 20min


在跨平台开发中,高效的路由管理直接影响用户体验和开发效率。本文将深入探讨uniapp的页面创建、路由跳转、参数传递和生命周期管理,助您构建流畅的多端应用。

📚 目录

  1. 页面创建与配置
  2. 路由跳转方法大全
  3. 参数传递与接收技巧
  4. 页面生命周期深度解析
  5. 最佳实践与常见问题

1. 页面创建与配置

1.1 创建页面文件

pages目录下新建.vue文件,建议使用小写字母命名:

detail.vue >> 详情页

index.vue >> 首页

复制代码
### 1.2 配置pages.json

```json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/index/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

1.3 页面初始化模板

html 复制代码
<template>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始化数据
    }
  }
}
</script>

<style>
.content {
  padding: 20rpx;
}
</style>

2. 路由跳转方法大全

2.1 核心跳转API对比

方法 说明 特点

uni.navigateTo 保留当前页,跳转到新页面 产生页面栈,可返回

uni.redirectTo 关闭当前页,跳转到新页面 不产生新页面栈

uni.reLaunch 关闭所有页面,打开新页面 清空页面栈

uni.switchTab 切换Tab页面 专用于Tab栏页面切换

uni.navigateBack 返回上一页 可指定返回层数

2.2 使用示例

javascript 复制代码
// 保留跳转(可返回)
uni.navigateTo({
  url: '/pages/index/detail'
});

// 替换跳转(不可返回)
uni.redirectTo({
  url: '/pages/index/detail'
});

// 关闭所有页面跳转
uni.reLaunch({
  url: '/pages/login/index'
});

// Tab栏切换
uni.switchTab({
  url: '/pages/tabbar/home'
});

3. 参数传递与接收技巧

3.1 参数传递方式

javascript 复制代码
// 方式1:URL拼接
uni.navigateTo({
  url: '/pages/detail?id=123&name=uniap'
});

// 方式2:对象参数(自动编码)
uni.navigateTo({
  url: '/pages/detail',
  success(res) {
    res.eventChannel.emit('sendData', {
      id: 456,
      title: '动态参数'
    });
  }
});

3.2 参数接收处理

javascript 复制代码
export default {
  onLoad(options) {
    // URL参数获取
    console.log('接收参数:', options.id); 
    
    // EventChannel方式
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendData', data => {
      console.log('事件参数:', data);
    });
  }
}

3.3 注意事项

URL参数长度限制:不同平台不同(建议<1KB)

复杂对象需JSON序列化:

javascript 复制代码
const params = encodeURIComponent(
	JSON.stringify({a:1, b:2})
);
uni.navigateTo({
	url: `/pages/detail?params=${params}`
});

4. 页面生命周期深度解析

4.1 生命周期流程图

4.2 核心生命周期方法

阶段 触发时机 开发者操作建议
onLoad 页面首次加载时(接收参数) 解析路由参数,初始化页面数据
onShow 页面进入前台时(包括返回) 刷新动态数据(如用户信息更新)
onReady 页面初次渲染完成 操作DOM/调用原生组件API
onHide 页面进入后台时(跳转/切后台) 保存草稿、暂停动画/音视频
onUnload 页面销毁时(无法返回) 清除定时器、取消未完成的网络请求

4.3 示例代码

javascript 复制代码
export default {
  onLoad(options) {
    console.log('页面加载', options);
    this.loadData();
  },
  onShow() {
    console.log('页面显示');
    this.updateBadge();
  },
  onReady() {
    console.log('DOM就绪');
    this.initMap();
  },
  onHide() {
    console.log('页面隐藏');
    this.saveDraft();
  },
  onUnload() {
    console.log('页面卸载');
    clearInterval(this.timer);
  }
}

5. 最佳实践与常见问题

5.1 路由管理Tips

页面栈限制:小程序平台最多10层

Tab页需在pages.json中预先声明

使用uni.preloadPage预加载提升体验

5.2 常见问题排查

​白屏问题:检查页面路径是否正确

​参数丢失:确保正确使用encodeURIComponent

​生命周期不触发:避免在子组件中使用页面生命周期

5.3 性能优化建议

减少onShow中的复杂逻辑

使用页面预加载技术

合理使用页面卸载时的资源释放
​💡 小贴士:使用uni-simple-router插件可轻松实现更复杂的路由管理需求,支持路由守卫、嵌套路由等高级功能。

相关推荐
游戏开发爱好者81 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析5 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖9 小时前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero1 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
FliPPeDround1 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
PedroQue991 天前
@meng-xi/uni-router
uni-app
Stone_zzl1 天前
uniapp写app做测试手机通知栏展示内容
uni-app
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp(15) 集成minio存储 支持本地和minio切换
java·vue.js·spring boot·uni-app
2501_916007471 天前
iOS 抓包工具有哪些?2025实用指南与场景推荐
android·ios·小程序·https·uni-app·iphone·webview