微信小程序页面导航

微信小程序页面导航

1.声明式导航（简单）
1.1跳转到tabBar页面和非tabBar页面

<!-- 声明式导航 -->
<!-- tabBar之间的导航，必须有open-type="switchTab"。
非tabBar之间的导航，可以有open-type="navigator" 但可以省略都不写（注意链接格式） -->
<navigator url="/pages/info/info">导航到info页面</navigator>

1.2后退导航（home的下一个页面是info页面）

<!--后退导航 必须有open-type="navigateBack" delta的值必须是数字，表示要后退的层级（省略 默认为1）-->
<navigator open-type="navigateBack"  delta="1">声明式后退</navigator>

2.编程式导航（常用）（按钮形式）
2.1跳转到tabBar页面和非tabBar页面

<!-- 编程式导航(事件导航.js) -->
<!-- 跳转到tabBar页面 -->
<button bindtap="gotomessage">跳转到message页面</button>
----------------------------------------------------
// 编程式导航跳转到tabBar 
  gotomessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  },
  ---------------------------------------------------------
  ---------------------------------------------------------
<!-- 跳转到非tabBar页面 -->
<button bindtap="gotoinfo">跳转到info页面</button>
----------------------------------------------------------
  // 编程式导航跳转到非tabBar 
  gotoinfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

2.2后退导航

<!-- 后退导航 -->
<button bindtap="bianhoutui">编程式后退导航</button>
-----------------------------------------------------------------
  bianhoutui(){
    wx.navigateBack({
      delta: 1,
      // delta 默认为1，一般可以省略
    })
  },

3.导航传参
3.1声明式导航传参

<!-- 声明式导航 带传参    传入的为 ?name=zs&age=20  -->
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

查看方式

3.2编程式导航

4.获取导航参数
4.1在onLoad中接收导航参数
在目标页面的.js文件中的监听页面加载函数中加入监听函数
console.log(options)
从而在下方的Console中可以得到输出。

4.2 在获取的参数转化为数据，可以方便其他地方的使用

 data: {
    // 导航传递过来的参数对象
    query:{}
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData({
      query:options
    })
  },

可得到结果