微信小程序-页面跳转

页面两种跳转方式
navigator和wxAPI

navigator组件

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

属性:

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

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

open-type 跳转方式

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

使用方式

基本使用方式

跳到关于页面

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

open-type属性:

redurect

跳到关于页面(redirect)

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

switchTab

switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。(需要在tabBar中定义的)

跳到详情页面(switchTab)

app.json:

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

reLaunch

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

navigateBack

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

open-type:navigateBack(表示该navigator组件用于返回)

delta:返回的层级(指定返回的层级,open-type必须是navigateBack才生效)

about.wxml

跳到关于页面

数据传递-传递方式分析

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

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

数据传递过程

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

home.wxml


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


home.js

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

返回:

about.wxml


about.js

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

你可能感兴趣的:(微信小程序-页面跳转)