返回

避免重蹈小程序wx.navigateTo带参数路由跳转的雷区

前端

避开wx.navigateTo参数传递的常见陷阱

在小程序开发中，使用wx.navigateTo函数进行页面跳转是再常见不过的操作了。为了在跳转后能够获取必要的信息，我们通常会将参数添加到路由跳转链接上。然而，在这个过程中，却存在一些容易让人掉坑的陷阱。

问题一：未正确设置参数名

这是最常见的问题之一。在使用wx.navigateTo函数时，必须确保参数名正确无误。否则，在跳转后的页面中将无法获取到相应的数据。

示例代码：

//跳转到picture.js页面，传递参数
wx.navigateTo({
  url: '../picture/picture',
  success: function(res) {
    //TODO: 操作成功后的处理逻辑
  },
  fail: function(res) {
    //TODO: 操作失败后的处理逻辑
  },
  complete: function(res) {
    //TODO: 不管操作成功还是失败，都会执行的逻辑
  }
});

在上面的示例代码中，我们将参数名设置为"id", 并将参数值设置为"123"。这样，在picture.js页面中，就可以通过以下代码获取到该参数：

var id = this.options.id;

问题二：未正确设置参数值类型

另一个常见的问题是未正确设置参数值类型。wx.navigateTo函数只支持字符串、数字、布尔值和JSON对象这四种参数值类型。如果传递其他类型的值，则会报错。

示例代码：

//跳转到picture.js页面，传递参数
wx.navigateTo({
  url: '../picture/picture',
  success: function(res) {
    //TODO: 操作成功后的处理逻辑
  },
  fail: function(res) {
    //TODO: 操作失败后的处理逻辑
  },
  complete: function(res) {
    //TODO: 不管操作成功还是失败，都会执行的逻辑
  }
});

在上面的示例代码中，我们将参数名设置为"id", 并将参数值设置为函数。这显然是错误的，因为函数不是wx.navigateTo函数支持的参数值类型。

问题三：未正确设置跳转成功后的处理逻辑

在使用wx.navigateTo函数进行页面跳转时，我们可以设置success回调函数，以便在跳转成功后执行某些操作。如果未正确设置success回调函数，则在跳转成功后将无法获取到相应的数据。

示例代码：

//跳转到picture.js页面，传递参数
wx.navigateTo({
  url: '../picture/picture'
});

在上面的示例代码中，我们没有设置success回调函数。这样，在跳转成功后，将无法获取到picture.js页面中的数据。

问题四：未正确设置跳转失败后的处理逻辑

在使用wx.navigateTo函数进行页面跳转时，还可以设置fail回调函数，以便在跳转失败后执行某些操作。如果未正确设置fail回调函数，则在跳转失败后将无法获取到相应的错误信息。

示例代码：

//跳转到picture.js页面，传递参数
wx.navigateTo({
  url: '../picture/picture'
});

在上面的示例代码中，我们没有设置fail回调函数。这样，在跳转失败后，将无法获取到相应的错误信息。

问题五：未正确设置跳转完成后的处理逻辑

在使用wx.navigateTo函数进行页面跳转时，还可以设置complete回调函数，以便在跳转完成（无论成功与失败）后执行某些操作。如果未正确设置complete回调函数，则在跳转完成后将无法获取到相应的数据。

示例代码：

//跳转到picture.js页面，传递参数
wx.navigateTo({
  url: '../picture/picture'
});

在上面的示例代码中，我们没有设置complete回调函数。这样，在跳转完成后，将无法获取到相应的数据。

结语

通过本文的学习，相信您已经掌握了在使用wx.navigateTo函数进行页面跳转时需要注意的常见陷阱。希望这些知识能够帮助您避免在小程序开发中遇到这些问题，让您的开发之路更加顺畅。