微信小程序-页面导航-导航传参

1.声明式导航传参

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

(1)参数与路径之间使用 ? 分割

(2)参数键与参数值用 = 相连

(3)不同参数用 & 分隔

XML 复制代码
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

点击"跳转到info页面"就会跳转到info页面

2.编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数

XML 复制代码
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
<button bindtap="gotoInfo2">跳转到info页面</button>
XML 复制代码
gotoInfo2() {
    wx.navigateTo({
      url: '/pages/info/info?name=ls&gender=男',
    })
  }

点击按钮"跳转到info页面"就会跳转到info页面

3.在onLoad当中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到

XML 复制代码
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData({
      query: options
    })
  }
相关推荐
racerun6 小时前
小程序导航设置更多内容的实现方法
小程序
说私域6 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6686 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳7 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1219 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero11 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩19 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉19 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code20 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react