微信小程序——页面跳转及传参
小程序页面跳转
微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转。
为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式。
1.wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.navigateTo({
url: 'test?id=1'
})
url即目标页面,保证是非tabbar的页面的路径。路径后可以带参数,参数和路径之间用?=连接,不同参数用&分开,如'path?key=value&key2=value2'。需要获取页面A的参数,代入页面B中进行操作。在生命周期函数中获取option.id并转成实体,进行操作和赋值。
Page({
onLoad: function(option){
console.log(option.id)
}
})
2.wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
wx.redirectTo({
url: 'test?id=1'
})
3.wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。页面的跳转存储逻辑实际是一个栈队列,先入后出的形式,即逐层进入,如果返回会进入的页面先返回,因此wx.navigateBack()中转递的参数默认值为1,即退后一个页面,可以修改数值,进行多层的返回。
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
4.wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径只允许写在app.json中tabbar配置的页面。
wx.switchTab({
url: '/index'
})
tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
5.wx.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
wx.reLaunch({
url: 'test?id=1'
})
微信小程序——页面跳转及传参的更多相关文章
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 微信小程序-页面跳转与参数传递
QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
- 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
}) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...
- 微信小程序页面跳转 的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...
- 微信小程序页面跳转后js定时器没有销毁的问题
现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...
- 微信小程序页面跳转方法汇总
微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...
- [转] 微信小程序 页面跳转 传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...
- 微信小程序页面跳转的三种方式总结
原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...
随机推荐
- BitmapToASCii
using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using Syste ...
- TP3.2框架中的字母函数解析
C的使用方法以及注意事项 使用方法: 1.读取配置 C('参数名称') 配置参数不区分大小写,存在则设置,否则返回NULL; 因为配置参数是全局有效的,因此C方法可以在任何地方读取任何配置,即使某个 ...
- Java生成全局唯一ID代码演示
看了GitHub上的两个生成唯一ID的算法程序(一个出自百度,一个出自美团),打算运行着试试看,至于原理什么的文档上讲得很详细了,此处不再一一粘贴了,此处只演示代码 https://github.co ...
- 关于ML.NET v0.8的发布说明
ML.NET允许您创建和使用针对场景的机器学习模型,以实现常见任务,如情绪分析,问题分类,预测,推荐,欺诈检测,图像分类等.您可以使用ML.NET示例在GitHub仓库中查看这些常见任务 .ML.NE ...
- Leetcode - 剑指offer 面试题29:数组中出现次数超过一半的数字及其变形(腾讯2015秋招 编程题4)
剑指offer 面试题29:数组中出现次数超过一半的数字 提交网址: http://www.nowcoder.com/practice/e8a1b01a2df14cb2b228b30ee6a92163 ...
- Java基础1:深入理解Java面向对象三大特性
更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...
- Python:Selenium 2:使用
创建一个浏览器对象 from selenium import webdriver browser = webdriver.Chrome() WebDriver在将控制权返回给测试脚本之前,会一直等待到 ...
- 补习系列(11)-springboot 文件上传原理
目录 一.文件上传原理 二.springboot 文件机制 临时文件 定制配置 三.示例代码 A. 单文件上传 B. 多文件上传 C. 文件上传异常 D. Bean 配置 四.文件下载 小结 一.文件 ...
- angr进阶(3) 添加约束
如果已知字符串长度或部分,可以使用如下的方式进行格式规范csaw_wyvern 1 flag_chars = [claripy.BVS('flag_%d' % i, 8) for i in range ...
- 多种Timer的场景应用
前言 今天讲讲各种Timer的使用. 三种Timer组件 .Net框架提供了三种常规Timer组件,分别是System.Windows.Forms.Timer.System.Timers.Timer和 ...