个人技术总结——UniAPP 路由配置及页面跳转

222100118赵大伟 2024-06-06 22:22:07

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	CSDN、《构建之法》

1.技术概述

路由配置

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同。

2.技术详述

路由跳转

uni-app 有两种页面路由跳转方式：使用 navigator组件跳转（标签式导航）、调用 API跳转（编程式导航)
框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

页面栈
框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

在这里插入图片描述

获取当前页面栈

getCurrentPages0函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个
元素为当前页面。

路由传参与接收

页面生命周期的 onLoad()监听页面加载，其参数为上个页面传递的数据，如

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

url为将要跳转的页面路径，路径后可以带参数。参数与路径之间使用？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。如 'path?key1=value1&key2=value2' ，path为下一个页面的路径。下一个页面的onLoad函数可得到传递的参数。

// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

3.技术使用中遇到的问题和解决过程

遇到的问题：设置页面跳转时填写不同的文件路径有的可以跳转，有的却不可以

跳转页面和当前页面不存在层级关系，经过半小时的发呆终于发现在pages.json中没有设置跳转路径。之后知道了，每次创建页面都应该先检查 app.json 中是否正确地配置了页面路由。
遇到的问题:跳转到tabBar页面时，navigateTo跳转不生效

首先检查了 pages.json中没有设置跳转路径有没有设置跳转路径，检查后发现已经配置好了，但是仍然无法跳转。之后经过搜查发现，想要跳转的页面是tabBar页面，tabBar页面是pages.json中"tabBar"中配置的页面，如果是则应该使用uni.switchTab跳转。更改为uni.switchTab跳转后，就可以正确有效地进行跳转了。

4.总结
这次团队作业，我所负责的是前端的自习室相关部分，对于前端来说，需要理解前端编程的思想理念，才能达到高效率的编写。前端的代码主要是每个控件和标签的属性需要记忆和查阅相关文档，并且完成与后端的对接。我这次实践是初学uniapp框架，对于uniapp框架的各种组件和思想并不熟悉，对于路由跳转也研究了一段时间，因为我所负责的部分经常需要在不同的页面之间进行跳转，所以对于不熟悉uniapp路由的我来说，经常出现无法正确有效跳转的情况，遇到了很多大坑。我认为任何的学习，都不在于多高深，而在于对于基础的掌握是否牢靠，因此我就对UniAPP 路由配置及页面跳转进行了技术总结，通过深入浅出的理解和钻研，对uniapp路由配置和跳转进行了一些总结。

...全文