微信小程序-页面跳转

页面两种跳转方式
navigator和wxAPI

navigator组件

navigator组件主要是用于界面的跳转

属性:

target: 在哪个目标上发生跳转, 默认当前小程序

url 当前小程序内的跳转链接

open-type 跳转方式

delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数

使用方式

基本使用方式

<navigator url="/pages/about/about">跳到关于页面</navigator>

跳转到关于页面, 左上角有返回按钮

open-type属性:

redurect

<navigator url="/pages/about/about" open-type="redirect">跳到关于页面(redirect)</navigator>

关闭当前页面, 跳到关于页面, 不允许跳转到tabbar页面, 不能反回, 安卓手机反回直接退出小程序

switchTab

switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。（需要在tabBar中定义的）

<navigator url="/pages/detail/detail" open-type="switchTab">跳到详情页面(switchTab)</navigator>

app.json:

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }

reLaunch

关闭所有的页面，打开应用中某个页面。（直接展示某个页面，并且可以跳转到tabBar页面）
效果与redirect类似

navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
当使用redirect和reLaunch关闭页面时, getCurrentPages无效

open-type：navigateBack（表示该navigator组件用于返回）

delta：返回的层级（指定返回的层级，open-type必须是navigateBack才生效）

about.wxml

<navigator open-type="navigateBack" delta="2">跳到关于页面</navigator>

数据传递-传递方式分析

如果在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？

• 首页 -> 详情页：使用URL中的query字段
• 详情页 -> 首页：在详情页内部拿到首页的页面对象，直接修改数据

image

数据传递过程

home页面传递数据给其他待跳转页面

home.wxml

<navigator url="/pages/about/about?key=hello"><button>跳到关于页面</button></navigator>

url参数后面的查询字符串会被子页面直接接收

about.js

onLoad:function(options){
    console.log(options)
  }

控制台会打印出: {key: "hello"}

子页面传递数据给home页面

如果是监听按钮或者navigator的点击来返回时, 可以通过bindtap调用函数完成.

但是这种方式不能监听左上角返回按钮的点击.所以我们选择在onUnload中修改数据

小程序并没有提供直接修改数据的方法.

可以通过getCurrentPages来获取所有的页面, 然后使用页面对象的setData({})函数来修改

about页面退出时, home页面message数据会被改变
home.js

data:{
    message: '哈哈哈'
}

about.js

  // 页面退出时调用
  onUnload: function(){
    let pages = getCurrentPages()   // 获取当前所有的页面
    let home = pages[pages.length - 2]  
    home.setData({
      message: '嘿嘿嘿'
    })
  }

微信API跳转

使用微信提供的API也可以实现页面的跳转

• wx.navigateTo
• wx.switchTab
• wx.reLaunch
• wx.redirectTo
• wx.navigateBack

跳转:

home.wxml

<button bind:tap="handlePushAbout">wxAPI跳转</button>

home.js

handlePushAbout(){
    wx.navigateTo({
      url: '/pages/about/about?key=value',
    })
  }

返回:

about.wxml

<button bind:tap="backHome">返回主页</button>

about.js

backHome(){
    wx.navigateBack({
      delta: '1'  // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
    })
  }