小程序中navigator和wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateBack的用法

一句话说明就是:
navigator是在 wxml 中用标签添加open-type属性来达到和wx.xxx系列一样的效果.
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(官网是这么说的,具体是先关闭再跳转还是先跳转后关闭,本人不知道。)
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

在这里插入图片描述

在这里插入图片描述
遇到的bug

写小程序,遇到页面跳转时,发现有几次失败。查询资料已解决,总结一下知识点:

一、如下,第5层到到6层时失败(评论页⑤–>返回商品详情页⑥)

登陆①–>主页②–>商品列表页③–>商品详情页④–>评论页⑤–>返回商品详情页⑥

  1. wx.navigate :可以基本满足页面之间跳转需求,但是层级关系不要超过5层,最多5层。
  2. wx.redirectTo :当层级关系超过5层时,页面跳转采用这个。

二、第2层到到3层时失败(反馈建议②–>返回"我的"页③)

我的①–>反馈建议②–>返回"我的"页③
  此时,没有超过5层,但wx.navigateTo和wx.redirectTo都无效,
  后来查了小程序的API,找到了原因,因为"我的"页是tabbar页面。
  wx.switchTab: 需要跳转到tabbar页面,需要用 wx.switchTab 
  
三个跳转的使用方法一致,(只是是否能带参数问题)均为:
wx.switchTab(Object object)
需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。
在这里插入图片描述

wx.switchTab({
  url: '/index'
})

wx.reLaunch(Object object)
需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’
在这里插入图片描述

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

需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
在这里插入图片描述

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

wx.navigateTo(Object object)
需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
在这里插入图片描述

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({
  onLoad: 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)
    })
  }
})

wx.navigateBack(Object object)

返回的页面数,如果 delta 大于现有页面数,则返回到首页。
在这里插入图片描述

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

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

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

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

所以,当下次需要跳转页面时

①、首先检查页面是否在app.json中注册,不注册找不到页面。

②、注意文件夹的层级关系,注意相对路径是否正确。

③、查看一次性跳转页面的层级数量是否超过5层(是,选择wx.redirectTo)。

④、查看要跳转的页面是不是tabBar页面(是,选择 wx.switchTab)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值