uniapp跳转带回数据-猿码集

1. 什么是uniapp

Uniapp是DCloud公司推出的一款基于Vue.js的开发工具，可以让开发者在写一套代码的情况下生成多个平台的应用，包括iOS、Android、H5等等。同时，uniapp还拥有类似于flutter的框架Weex，可以直接开发小程序。

uniapp的优势在于对于多端开发的支持，既能够在不同端之间快速切换，在调试时也能够方便地进行跨平台测试。而uniapp的开发也类似于Vue.js，提供了许多基础组件和高阶API支持，是一款十分实用的开发工具。

2. uniapp中的页面跳转

2.1 通过uni.navigateTo实现页面跳转

在uniapp中，页面跳转的方法与小程序十分相似，可以通过uni.navigateTo实现。相比于小程序，uniapp的页面跳转有更多的参数可以配置，使得页面之间的传参更加方便。


// 在A页面跳转到B页面
uni.navigateTo({
  url: '/pages/B/B?id=123&name=test'
})

在上述代码中，我们在调用uni.navigateTo时，除了指定跳转目标地址之外，还可以通过url参数传入一些变量。在B页面中，可以通过uni.getStorageSync方法获取跳转参数。


// 在B页面获取跳转参数
onLoad: function(options) {
  let id = options.id
  let name = options.name
}

在B页面的onLoad函数中，可以通过options参数获取跳转参数，并进行相应处理。

2.2 通过uni.navigateBack实现页面返回

在uniapp中，我们也可以通过uni.navigateBack实现返回上一页。


// 返回到上一页
uni.navigateBack()

在进行uni.navigateBack操作时，如果需要传递数据到上一页，可以使用uni.navigateBack({data: {xxx}})进行设置。


// 在B页面返回到A页面，并传递数据
uni.navigateBack({
  delta: 1,
  data: {
    result: 'success'
  }
})

在上述代码中，delta参数表示返回的页面数。在A页面中，我们可以利用onBackPress时的res.param获取返回的数据。


// 在A页面处理返回结果
onBackPress: function(res) {
  let result = res.param.result
}

2.3 通过uni.redirectTo实现页面重定向

在uniapp中，我们也可以通过uni.redirectTo实现页面重定向。重定向的过程与跳转类似，但是在实际运行过程中，会将之前所有的页面栈清空，只保留当前的一级页面。


// 重定向到B页面
uni.redirectTo({
  url: '/pages/B/B?id=123&name=test'
})

在进行重定向时，我们需要注意一点，由于页面已经栈内内容已经清空，再次通过uni.navigateBack是无法返回到之前的页面。

3. uniapp中页面跳转的传参方法

在uniapp中，我们实现页面跳转时，还可以使用Uni Navigation Params Plugin这个插件实现更为灵活的传参。使用此插件需要在HBuilderX上安装插件并解锁，解锁方法可以参考uniapp官网上的教程。

3.1 使用setQueryParams方法进行传参

使用setQueryParams方法进行传参是最为常规的一种方法。通过在源页面中调用uni.setQueryParams(params)方法设置参数，在目标页面中调用uni.getPageParams()方法获取传递参数。例如：


// 在A页面设置传递参数
uni.setQueryParams({
  id: 123,
  name: 'test'
})
// 在B页面获取传递参数
let params = uni.getPageParams()

需要注意的是，setQueryParams方法必须在页面加载时调用，如果调用时机不当会导致传递参数失败。

3.2 使用setExtraData方法进行传参

setExtraData方法可以让我们在跳转到目标页面时进行参数的设置，从而避免了在源页面需要判断参数情况的麻烦。通过调用uni.setExtraData(params)方法设置参数，在目标页面中可以通过uni.getExtraData()方法获取传递参数。例如：


// 在A页面设置传递参数
uni.setExtraData({
  id: 123,
  name: 'test'
})
// 在B页面获取传递参数
let params = uni.getExtraData()

与setQueryParams方法相比，setExtraData方法不需要判断参数情况，更加方便。需要注意的是，由于setExtraData设置参数会在跳转到目标页面时被执行，因此可能会影响跳转时的性能。

4. uniapp中参数回传方法

4.1 使用uni.navigateBack实现数据传递

在uniapp中，我们可以通过uni.navigateBack实现数据传递，例如我们在B页面中需要将数据传递给A页面：


// 在B页面返回到A页面，并传递数据
uni.navigateBack({
  delta: 1,
  success: function(res) {
    // 将数据传递回A页面
    res.eventChannel.emit('acceptDataFromB', {data: 'HelloA'})
  }
})

在B页面中调用navigateBack方法时，我们可以在success回调函数中利用eventChannel.emit方法将需要传递的数据传递回A页面中。


// 在A页面中接收B页面传递数据
onLoad: function(options) {
  // 获取eventChannel对象
  let eventChannel = this.getOpenerEventChannel()
  // 监听acceptDataFromB事件，并将数据存储到data中
  eventChannel.on('acceptDataFromB', function(data) {
    this.setData({
      data: data
    })
  })
},

在A页面中，我们可以通过getOpenerEventChannel方法获取由B页面传递回来的eventChannel对象，并在callback中处理传递的数据。

4.2 使用uni.$emit实现数据传递

与vue.js的事件传递方法相同，我们也可以在uniapp中使用uni.$emit实现数据传递。通过在源页面中调用uni.$emit(eventName, params)方法设置参数，在目标页面中通过on监听eventName事件获取传递参数。例如：


// 在A页面设置传递参数
uni.$emit('customEvent', {
  id: 123,
  name: 'test'
})
// 在B页面监听customEvent事件，并获取传递参数
uni.$on('customEvent', function(params) {
  console.log(params)
})

通过uni.$emit方法设置参数，我们在B页面中可以通过uni.$on方法监听到指定的事件并获取参数。这种传递方式相比与uni.navigateBack方法更为灵活，但是需要注意传递事件名称和监听函数必须保持一致。

5. 总结

在实际开发过程中，页面跳转和参数传递是开发中十分重要的部分。通过本文的介绍，我们可以掌握uniapp中页面跳转的方法以及传参方式，更加灵活地处理页面间的跳转和传参的情况。在日常开发中，我们需要根据项目的实际需求，选择合适的方法来处理数据传递的情况。

uniapp跳转带回数据