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

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
    })
  }
相关推荐
尚学教辅学习资料几秒前
基于微信小程序的电商平台+LW示例参考
java·微信小程序·小程序·毕业设计·springboot·电商平台
尘浮生2 分钟前
Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
小泽呀x2 小时前
微信小程序中使用离线版阿里云矢量图标
微信小程序·小程序
fakaifa3 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
托马斯-酷涛4 小时前
小程序源码-模版 100多套小程序(附源码)
小程序
小蒜学长5 小时前
springboot基于SpringBoot的企业客户管理系统的设计与实现
java·spring boot·后端·spring·小程序·旅游
工业互联网专业6 小时前
Python毕业设计选题:基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
多客软件佳佳8 小时前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友
zhouang7703778 小时前
uniapp+vue2 设置全局变量和全局方法 (兼容h5/微信小程序)
微信小程序·小程序·uni-app
说私域11 小时前
基于社交关系的电商平台发展与创新:以微店买家版为例兼论开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序
人工智能·小程序