编程语言
首页 > 编程语言> > 微信小程序页面跳转API总结及注意事项

微信小程序页面跳转API总结及注意事项

作者:互联网

一、路由

1、wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

示例代码
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})

2、wx.reLaunch(Object object)

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

示例代码
wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onl oad (option) {
    console.log(option.query)
  }
})

3、wx.redirectTo(Object object)

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

示例代码
wx.redirectTo({
  url: 'test?id=1'
})

4、wx.navigateTo(Object object)

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

示例代码
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' })
  }
})
//test.js
Page({
  onl oad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

5、wx.navigateBack(Object object)

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

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

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

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

6、EventChannel

页面间事件通信通道

方法
EventChannel.emit(string eventName, any args)
触发一个事件

EventChannel.on(string eventName, EventCallback fn)
持续监听一个事件

EventChannel.once(string eventName, EventCallback fn)
监听一个事件一次,触发后失效

EventChannel.off(string eventName, EventCallback fn)
取消监听一个事件。给出第二个参数时,只取消给出的监听函数,否则取消所有监听函数

注意事项:

1、navigateTo, redirectTo 只能打开非 tabBar 页面。
navigateTo(用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。)
wx.redirectTo(当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间)
2、switchTab 只能打开 tabBar 页面。
(对于跳转到 tab bar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tab bar 的页面)
3、reLaunch 可以打开任意页面。
(wx.reLaunch wx.reLaunch()与 wx.redirectTo()的用途基本相同, 只是 wx.reLaunch()先关闭了内存中所有保留的页面,再跳转到目标页面。)
4、页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
5、调用页面路由带的参数可以在目标页面的onLoad中获取。
weixin_46181363 发布了1 篇原创文章 · 获赞 0 · 访问量 7 私信 关注

标签:navigateTo,微信,API,tabBar,跳转,页面,data,wx
来源: https://blog.csdn.net/weixin_46181363/article/details/104458527