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

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
    })
  }
相关推荐
尘浮生29 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen3 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘7 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡10 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼13 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857515 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027716 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序