个人技术总结——uniapp中的页面跳转及参数传递

[222100102关心悦]

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	对个人技术的总结
其他参考文献	-

目录

• 一.技术概述
• 二.技术详述
• 三.技术使用中遇到的问题和解决过程
• 四.总结

一.技术概述

• uniapp中的页面跳转及参数传递：使用uniapp进行前端开发时，会产生多个页面需要跳转和传参的问题，可以通过学习不同跳转和传参的方法达到需求，难点在于方法选择和url,参数的传递。

二.技术详述

• uni.navigateTo(OBJECT)

  保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

  

  OBJECT参数一般为url：url是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 url: ./action?autoDuration=${this.autoDuration}&selectedTask=${this.selectedTask}，./action为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

• uni.switchTab(OBJECT)

  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。只可以跳转tabbar页面，其他页面不支持，这里需要在page.json文件里配置跳转路径。

  

• uni.navigateBack(OBJECT)

  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。例如：uni.navigateTo( { delta: 1});

• uni.reLaunch(OBJECT)

  关闭所有页面，打开到应用内的某个页面。

  

• 在跳转到的新页面中用onLoad函数可得到传递的参数

  export default {
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数

   console.log(option.id); //打印出上个页面传递的参数id。
  

  }
  }

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

• 问题：有时候参数中出现空格等特殊字符导致跳转失败，或导致部分致数据丢失

• 解决方法：可以使用 encodeURIComponent() 方法，将这些特殊字符进行转义，把字符串作为 URI 组件进行编码，就可以正常读取了。然后将接收的参数转换成对象：decodeURIComponent() 用于对 encodeURIComponent() 进行反转义；JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

  

四.总结

uniapp页面跳转和传参是开发前端中非常常见的方法，对于涉及的函数我们需要领会贯通。一开始没有学习相关知识，在传参方面出了很多问题，但是都一一解决了，通过团队作业，我更加加深了这方面的学习和理解。