微信小程序学习笔记-导航传参

23 阅读1分钟

一、声明式导航传参

navigator组件的url属性用来指定将要跳转到页面的路径。同时,路径后面还可以携带参数

  • 参数路径之间使用?分割
  • 参数键参数值=相连
  • 不同参数&分割 代码示例如下:
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

二、编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码示例如下:

//wxml 页面结构
<button bindtap="gotoInfo2">跳转到info页面</button>

//js 通过编程式导航,跳转到info页面,并携带参数
gotoInfo2(){
    wx.navigateTo({
        url:'/pages/info/ingo?name=ls&gender=男'
    })
}

三、在onload中接收导航参数

通过声明式导航传参或者变成式导航传参所携带的参数,可以直接在onload事件中直接获取到,示例代码如下:

/**
*生命周期函数--监听页面加载
*/
data:{
    query:{}
}

onload:function(options){
    //options就是导航传递过来的参数对象
    console.log(options)
    this.setData({
        query:options
    })
}