轻松get！uniapp、小程序携数据返前页不刷新秘籍

2023-01-23 12:37:36

数据返回上一页而不刷新页面的巧妙原理

在Uniapp和微信小程序中，我们经常需要实现数据返回上一页而不用重新加载整个页面的功能。这种做法的核心就在于复用上一页的WebView，而不是重新加载它。

要做到这一点，我们需要利用WebView的URL。通过修改URL的查询字符串（query string），我们可以将数据传递到上一页。查询字符串的格式通常为：key1=value1&key2=value2。

Uniapp实现数据返回

在Uniapp中，我们可以使用uni.navigateTo()方法来实现这一功能。它的第二个参数可以用来传递数据。例如，我们要传递一个名为“name”的数据，可以这样写：

uni.navigateTo({
  url: '../pages/index/index?name=张三',
})

在上一页，我们可以使用uni.getCurrentPages()获取当前页面的WebView对象，然后调用evaluateJavaScript()方法来获取查询字符串中的数据。例如，要获取“name”的值：

const pages = uni.getCurrentPages()
const currentPage = pages[pages.length - 1]
const webView = currentPage.$getAppWebview()
webView.evaluateJavaScript('uni.getLaunchOptionsSync().query', (res) => {
  console.log(res)
})

微信小程序实现数据返回

在微信小程序中，可以使用wx.navigateTo()方法来实现数据返回。同样，它的第二个参数用于传递数据。例如，传递“name”：

wx.navigateTo({
  url: '../pages/index/index?name=张三',
})

在上一页，我们可以使用wx.getCurrentPages()获取当前页面的WebView对象，然后调用evaluateJavaScript()方法来获取查询字符串中的数据。例如，要获取“name”的值：

const pages = wx.getCurrentPages()
const currentPage = pages[pages.length - 1]
const webView = currentPage.$getAppWebview()
webView.evaluateJavaScript('wx.getLaunchOptionsSync().query', (res) => {
  console.log(res)
})