前端知识

微信小程序之页面路由

2019-08-05  本文已影响0人  HelloWorld_29a2

小程序页面路由共有5个api,使用这些页面路由首先你要到在小程序的主配置文件 app.json 里面配置你页面的路径,这些页面你可以放到pages目录下,也可以定义到pages目录下子目录的文件夹,例如pages/index/index。

{"pages": [

"pages/logs/index",

"pages/index/index",

"pages/user/index",

"pages/my/index"

]}

1.Tab 切换  wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,这个api只能跳转到底部导航设置的几个页面,它是不能跳转到其他单独页面的。

switchTab切换的页面

代码示例 (调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab)

底部导航的设置路径是到app.json里面设置是

{

"tabBar":{

"list":[{

"pagePath":"page/tabBar/index/index",//路径设置

"text":"首页"

},{

"pagePath":"page/cart/cart",

"text":"购物车"

},{

"pagePath":"page/tabBar/userCenter/userCenter",

"text":"我的"

}]

}

wx.switchTab({url:'/index'}) ;//跳转到指定URL地址


2.打开新页面 wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

代码示例 (调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>

wx.navigateTo({

  url: 'test?id=1',

  events: {// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据

    acceptDataFromOpenedPage: function(data) {

      console.log(data)

    },

    someEvent: function(data) {

      console.log(data)

    }

    ...

  },

  success: function(res) {

    // 通过eventChannel向被打开页面传送数据

    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })

  }

})

在A页面跳转到B页面,路由前页面A路由为onHide生命周期,跳转到B页面路由onLoad, onShow生命周期


3.页面重定向 wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

代码示例 (调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>)

wx.redirectTo({url:'test?id=1'})

在A页面跳转到B页面,路由前页面A路由为onUnload生命周期,跳转到B页面路由onLoad, onShow生命周期


4.重启动 wx.reLaunch(Object object)

关闭所有页面,打开到应用内的某个页面

代码示例 (调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>)

wx.reLaunch({url:'test?id=1'})

在A页面跳转到B页面,路由前页面A路由为onUnload生命周期,跳转到B页面路由onLoad, onShow生命周期


5.页面返回 wx.navigateBack(Object object)

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

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。

代码示例 (调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮)

// 此处是A页面

wx.navigateTo({url:'B?id=1'})

// 此处是B页面

wx.navigateTo({url:'C?id=1'})

// 在C页面内 navigateBack,将返回A页面wx.navigateBack({delta:2})

在A页面跳转到B页面,路由前页面A路由为onUnload生命周期,跳转到B页面路由onShow生命周期


Tips:

navigateTo,redirectTo只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

上一篇下一篇

猜你喜欢

热点阅读