ToB企服应用市场:ToB评测及商务社交产业平台

标题: 微信小程序-页面导航-导航传参 [打印本页]
作者: 惊雷无声    时间: 2024-6-28 15:22
标题: 微信小程序-页面导航-导航传参
1.声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径，同时，路径的后面还可以携带参数：
（1）参数与路径之间使用 ? 分割
（2）参数键与参数值用 = 相连
（3）差别参数用 & 分隔
  1. <!--pages/home/home.wxml-->
  2. <text>pages/home/home.wxml</text>
  4. <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
复制代码

点击“跳转到info页面”就会跳转到info页面


2.编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数
  1. <!--pages/home/home.wxml-->
  2. <text>pages/home/home.wxml</text>
  4. <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator><button bindtap="gotoInfo2">跳转到info页面</button>
复制代码
  1. gotoInfo2() {
  2.     wx.navigateTo({
  3.       url: '/pages/info/info?name=ls&gender=男',
  4.     })
  5.   }
复制代码

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



3.在onLoad当中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到
  1.   /**
  2.    * 生命周期函数--监听页面加载
  3.    */
  4.   onLoad: function (options) {
  5.     console.log(options)
  6.     this.setData({
  7.       query: options
  8.     })
  9.   }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4