微信小程序 页面跳转传递值几种方法详解

微信小程序页面跳转传递值详解

微信小程序提供了多种页面跳转的方式，其中涉及到值的传递，这对于开发者来说是非常实用的功能。下面是关于微信小程序页面跳转传递值的详细。

一、js导航

微信小程序中的js导航主要有三种跳转方式：

1. wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面。使用wx.navigateBack可以返回到原页面。跳转时可以通过url传递参数，例如：

wx.navigateTo({

url: 'test?id=1'

})

在目标页面（如test.js）中，可以通过onLoad函数的参数获取传递的值：

Page({

onLoad: function(option){

console.log(option.id)

}

})

2. wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。与wx.navigateTo类似，也可以通过url传递参数。

3. wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可以通过getCurrentPages()获取当前的页面栈，决定需要返回几层。

二、wxml导航

在wxml中，可以使用navigator组件进行页面跳转。navigator组件支持链接到不同的页面，并可以自定义点击态的样式。例如：

/wxss/

/ 修改默认的navigator点击态 /

.navigator-hover {

color:blue;

}

/ 自定义其他点击态样式类 /

.other-navigator-hover {

color:red;

}

跳转到新页面

在当前页打开

在目标页面中，可以通过onLoad函数的options参数获取传递的值：

// redirect.js or navigator.js

Page({

onLoad: function(options) {

this.setData({

title: options.title

})

}

})

以上就是微信小程序页面跳转传递值的详细。希望能对大家有所帮助。在实际开发中，可以根据需求选择适合的跳转方式，并灵活使用参数传递功能。感谢阅读，谢谢对本站的支持！如有更多疑问，欢迎交流学习。