微信小程序navigateto传参

2024-09-28 15:20:31 41 Admin
营销型网站

 

微信小程序中可以使用navigateTo方法进行页面之间的跳转,并且可以在跳转时传递参数。传递参数可以通过在url中添加参数的形式进行,也可以通过options对象的形式进行传递。

 

一、通过在url中添加参数的形式进行传递

在使用navigateTo方法进行跳转时,可以通过在url中添加参数的形式进行传递。具体的示例代码如下:

 

```

wx.navigateTo({

url: '/pages/detail/detail?id=123&name=小明'

 

})

```

 

在传递参数时,需要在url中添加参数名和参数值,多个参数之间使用&符号进行分隔。例如上面的示例中,传递了一个名为id的参数,值为123,还传递了一个名为name的参数,值为小明。

 

在目标页面中,可以通过getCurrentPages方法获取到当前页面栈的实例数组,然后通过数组的*一个元素获取到当前页面实例。然后可以通过options对象获取传递过来的参数。示例代码如下:

 

```

// 在目标页面获取参数

const pages = getCurrentPages()

const currentPage = pages[pages.length - 1]

const options = currentPage.options

const id = options.id

const name = options.name

console.log(id) // 输出:123

console.log(name) // 输出:小明

```

 

这种传递参数的方式简单明了,适用于参数较少、参数值较短的情况。

 

二、通过options对象的形式进行传递

在使用navigateTo方法进行跳转时,还可以通过options对象的形式进行传递参数。具体的示例代码如下:

 

```

wx.navigateTo({

url: '/pages/detail/detail'

 

success: function(res) {

// 通过success回调函数传递参数

res.eventChannel.emit('acceptDataFromOpenerPage'

{ data: '这是传递的参数' })

}

})

```

 

在目标页面中,可以通过getOpenerEventChannel方法获取到传递过来的参数。然后可以通过on方法监听事件,获取传递过来的参数。示例代码如下:

 

```

// 在目标页面获取参数

const eventChannel = this.getOpenerEventChannel()

eventChannel.on('acceptDataFromOpenerPage'

function(data) {

console.log(data) // 输出:{ data: '这是传递的参数' }

})

```

 

通过options对象的形式进行传递参数可以实现复杂的参数传递。可以传递对象、数组等复杂数据类型。

 

总结:

以上就是通过navigateTo方法传参的方法,可以根据实际的需求选择合适的方式进行传递参数。通过在url中添加参数可以实现简单的参数传递,而通过options对象的形式可以实现复杂的参数传递。根据需求选择合适的方式,可以更好地实现页面之间的传参跳转。

Copyright © 悉地网 2018-2024.All right reserved.Powered by XIDICMS 备案号:苏ICP备18070416号-1