百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

微信小程序 navigator 用来实现页面跳转功能

myzbx 2025-09-24 00:37 5 浏览

在微信小程序开发中,navigator 用来实现页面路由功能,比如 A页面 中点击页面打开B页面

1 navigator 默认方式打开新的页面

<navigator url="/pages/code1/navigator/bPage">
  <text>打开B页面</text>
</navigator>

等效于

<navigator url="/pages/code1/navigator/bPage" open-type="navigate">
  <text>打开B页面</text>
</navigator>



open-type 是指定了页面跳转的方式,默认是 navigate ,页面层叠方式如下

对应的有点击事件,在JS中打开页面

<view bindtap="openNavigatorBPage" data-index='1'>
  <text>打开B页面</text>
</view>

在这里 data-index 是我页面绑定的参数,在对应的方法中通过
currentTarget.dataset.index 方式获取

如果我写的是 data-id ,那么点击事件中获取方式为 currentTarget.dataset.id

  openNavigatorBPage:function (options) {
    //获取绑定的参数
    let id = options.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/code1/navigator/bPage?id='+id,
    })
  },

然后 在目标页面中的 onLoad 方法中可以获取这个参数

  onLoad: function (options) {
    let id = options.id;
  },

2 redirect 替换当前页面

open-type 可取值为 redirect ,就是直接替换当前页面

<!--类似a标签  open-type 跳转方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
  <text>打开B页面</text>
</navigator>

对应的 js 方法为

 wx.redirectTo({
    url: '/pages/code1/navigator/bPage?id='+id,
  })

3 reLaunch 重新加载当前页面

open-type 可取值为 reLaunch ,就是相当于是重新加载了一下当前页面

<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
  <text>打开B页面</text>
</navigator>

对应的 js 方法为

 wx.reLaunch({
    url: '/pages/code1/navigator/bPage?id='+id,
  })

4 navigateBack 关闭当前页面

可以直接在页面中 使用 navigator 标签嵌套

<navigator open-type="navigateBack">
  <text>关闭页面</text>
</navigator>

等效于

<view bindtap="closeBPage" data-index='1'>
  <text>关闭B页面</text>
</view>


  closeBPage: function () {
    wx.navigateBack()
  },

5 navigateBack 关闭当前页面 并携带参数

A页面通过wx.navigateTo跳入到B页面,然后B页面执行wx.navigateBack返回到A页面时候传给A页面参数

A页面中定义接收

Page({

  /**
   * 页面的初始数据
   */
  data: {
    param: undefined,
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let param = this.data.param;
    if (param) {
      //有回传参数 处理页面业务逻辑
    }
  },
);

  //打开B页面
  openNavigatorBPage: function (options) {
    //获取绑定的参数
    let id = options.currentTarget.dataset.index;
    wx.re({
      url: '/pages/code1/navigator/bPage?id=' + id,
    })
  },

在B页面中,关闭B页面的时候,设置回传参数

closeBPage: function () {
    //getCurrentPages()函数是用来获取当前页面栈的实例,
    //返回的是一个按栈的顺序排列的数组pages_arr,且数组中的第一项为首页,最后一项为当前页。
    //获取当前页面js里面的pages里的所有信息。
    let pages = getCurrentPages();
    //pages[pages.length - 2]是指的上一页,然后获取到上一个页的page对象后直接执行修改param的操作,这样就实现了在B页面修改A页面数据的功能
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      param: 111, // 设置需要传递的参数

    })
    wx.navigateBack({
      delta: 1
    })
  },

完毕

相关推荐

智能设备弹窗频发?3步教你彻底解决小v自动弹出困扰

创作声明:本文章原创,未经作者许可,禁止转载、摘编、复制及建立镜像。转载请注明出处,文章内容仅作参考,如有雷同,纯属巧合。图片和文字均不涉及真实人物和事件。在数字化浪潮席卷全球的今天,智能设备已成为我...

微软在Edge桌面搜索栏加入视觉搜索

IT之家9月16日消息,科技媒体WindowsReport今天(9月16日)发布博文,报道称在Canary频道最新MicrosoftEdge浏览器中,微软邀请Windo...

GetX框架里容易被忽略的那些小知识

在使用GetxController(以及它的子类,如GetxService)时,我们通常会接触到几个常见的生命周期方法,比如onInit、onReady、onClose等。实际上,GetX在...

充电宝弹出这种提示框,千万别点!

2025年国家网络安全宣传周现场展示了一批新型窃密工具一款可窃取手机数据的共享充电宝引起关注这些工具究竟是如何实施窃密的?又该如何防范?这款充电宝之所以能实现窃密,关键在于其内部搭载的一个特殊小零件。...

大屏可视化组态软件【数据绑定】_组态软件视频

写在前面:在最新的样式中,数据源和属性合并了成数据,以前的图纸数据会做转换处理。如果之前创建有多条数据源,默认会将之前的属性列表放到第一条数据源下面。如果没有建立一条数据源,之前的属性将不会展示到页...

如何关闭Win11触控板,轻松解决烦人的触摸问题

如何关闭Win11触控板,轻松解决烦人的触摸问题随着Windows11的发布,许多用户发现他们在使用新操作系统时遇到了触控板的问题。有时候触摸板可能会无故启动,导致一些不必要的麻烦和干扰。遇到这种情...

三星手机消息快捷窗口回复设置步骤,非常实用,可点赞收藏设置。

都说三星手机的使用功能像一本大字典,很多人用了好几年三星,其实三星很多功能都不会设置,也不知道。因此很多看三星用户都感叹,用了好几年三星手机,看到别人发的三星手机某个功能设置的时候,就感觉像白用三星手...

主板BIOS能识别2280固态硬盘,但系统里看不到怎么办?

在日常安装固态硬盘的过程中,许多用户都有一个疑虑:2280规格的M.2固态硬盘在主板BIOS中能够识别,但进入Windows系统后却无法看到。这个问题不仅令人困惑,还可能影响数据访问和系统安装。今天,...

WMS系统从入门到精通(十一)-原型图设计及逻辑实战-复核打包

复核打包是仓储管理系统中的关键环节,直接影响出库效率与准确率。本文通过原型图设计与业务逻辑实战,系统拆解WMS复核打包模块的核心流程与产品思考,为产品经理提供从0到1的落地参考。之前文章与大家分享了W...

第十八篇 如何解绑通信行程卡?为什么要解绑行程码?

今天讲的是如何解绑行程码?那么我们为什么要解绑行程码呢,因为行程码上有我们的姓名身份证甚至门牌号,解绑后可以降低我们的安全隐患。接下来我给大家演示一遍如何解绑行程码,第一步,打开支付宝,点击右下角“我...

注意!共享充电宝弹出这个提示框,千万别点!

2025年国家网络安全宣传周在云南昆明开幕,期间,网络安全博览会同步举行。博览会现场展示了一批新型窃密工具,这些工具究竟是如何实施窃密的?又该如何防范?下面展示了一款可窃取手机数据的共享充电宝。表面充...

五个不太为人知的ESC键妙用法_esc键的功能是什么意思啊

对于普通用户来说,位于键盘左上方的ESC键并非高频使用键。然而,你是否知晓,实际上借助ESC键能够实现诸多快捷操作呢?上网浏览时,倘若不慎点错某个网址,只需轻按ESC键,便能即刻停止当前网页的打开进程...

第三方登录不跳转!Safari 不支持,开发者懒省事,用户如何破局?

谁没经历过网页登录的糟心事儿?早年每个网站都要注册账号,密码记一堆,忘了还得找回;后来有了第三方登录,比如“用谷歌登”,以为解放了,结果新坑更隐蔽。靠第三方Cookie证明身份,这玩意儿同时被广...

笔记本电脑怎么快速查看 IP地址?_怎样查看笔记本的ip地址

使用笔记本电脑时,我们难免要查看电脑的IP地址,排查网络错误或设置局域网络共享,但对于不懂电脑的小白来说,根本不清楚如何快速查找网络IP地址。今天,小编就以Windows系统为例,介绍多种查询IP地址...

手把手教你用3 种实用方法 在SMART Line 触摸屏做用户登录

大家好呀~最近有朋友问我,做HMI项目时用户登录功能总搞不明白,尤其是用SMARTLine触摸屏和WinCCflexibleSMART软件的时候,总怕漏了哪个步骤。其实我刚开始接触的...