微信小程序-页面跳转wxAPI

简介: 官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html


wx.navigateTo(Object object)


更改首页代码,添加一个按钮,绑定一个事件的点击:

<!--index.wxml-->
<text>首页</text>
<button bindtap="toLog">跳转到日志页面</button>


在监听的方法当中使用 wx.navigateTo(Object object) 进行页面的跳转与传参:

// index.js
Page({
  toLog() {
    wx.navigateTo({
      url: '/pages/logs/logs?name=BNTang&age=18',
    })
  }
});


wx.navigateBack(Object object)


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


更改日志页面代码,添加一个按钮,绑定一个事件的点击:

<!--logs.wxml-->
<text>日志页面</text>
<button bindtap="myNavigatorBack">返回上一个页面</button>


在监听的方法当中使用 wx.navigateBack(Object object) 进行页面的返回(页面栈出栈):

// logs.js
Page({
  myNavigatorBack() {
    wx.navigateBack({})
  }
})


在 navigateBack 当中有一个属性我们需要进行了解一下就是 delta:


返回的页面数,如果 delta 大于现有页面数,则返回到首页。如果我们现在的跳转关系如下:


首页 -> 日志 -> 测试页面, 这个时候我们想要在测试页面直接返回到首页就需要利用 dalta 来指定返回的页面数即可,也就是需要出栈的页面,如下图,如果我们设置为 2,Test 与 日志都进行出栈,那么我们看到的就是首页了。

2105804-20230521152522237-895620743.png

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
7月前
|
小程序 JavaScript
微信小程序 页面跳转 传递参数
微信小程序 页面跳转 传递参数
34 0
|
21天前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
1天前
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
27 3
|
18天前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
7月前
|
小程序
微信小程序从零开始开发步骤(六)4种页面跳转的方法
微信小程序从零开始开发步骤(六)4种页面跳转的方法
168 0
|
21天前
|
小程序
微信小程序页面跳转三种方式
微信小程序页面跳转三种方式
|
21天前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
|
6月前
|
存储 小程序 JavaScript
微信小程序(十二)小程序页面跳转及传参
Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。 小程序这部分到是提供了不少的方法,大概整理了一下。
158 0
|
8月前
|
人工智能 JSON 自然语言处理
微信小程序页面跳转如何传递对象参数
微信小程序页面跳转如何传递对象参数
230 0
|
9天前
|
小程序 UED
人力资源小程序的设计与开发步骤
人力资源小程序的设计与开发步骤