这个作业属于哪个课程 | 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路由的我来说,经常出现无法正确有效跳转的情况。但是掌握了它之后对于自身的阅历和能力也是一种提升。