微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方。
1、页面切换传参,参数读取
1.1 wx.navigateTo(object)
功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到当前页面。
wx.navigateTo({ //当前页面对应的JS文件内 控制模板
url: 'test?id=1' //需要切换到的页面路劲,此处为相对路劲,id为传递的参数
})
//test.js //test页面对应的JS文件,名字必须相同
Page({
onLoad: function(option){ //通过路由传递过来的参数,只能在onLoad方法内收到,option就是路由参数的一个组合对象
console.log(option.id)
}
})
1.2 wx.navigateBack(object)
功能:关闭当前页面,与 wx.navigateTo({ })功能相对。返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
1.3 wx.redirectTo(object)
功能:关闭当前页面,跳转到应用内的某个页面【这里的跳转最好写绝对路劲,当然如果只是从当前页面往一个具体页面跳转(次数不多),相对路劲也可以。但如果是 wx.request(object) 请求返回状态进行页面跳转,那就最好写绝对路劲】,但是不允许跳转到 tabbar 页面。
1.4 wx.switchTab(object)
功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,与wx.redirectTo(object)方法功能互补。
1.5 wx.reLaunch(object)
功能:关闭所有页面,打开到应用内的某个页面【这种情况最好用绝对定位,因为是关闭所有页面,已经不需要知道当前所处页面了,直接重定向到某个具体页面。这种一般都是重定向到登录或者初始页面】
wx.reLaunch({ //token失效,界面重定向到登录页,绝对路劲
url: "/pages/login/login",
});
2、相对路径和绝对路径
2.1、绝对路径;
以 “/” 开头代表根目录,表示从根目录下来的直接路劲,不以当前页面所处位置改变而改变。适用于重定向到具体页面,因此比较适用于 wx.redirectTo(object) 和 wx.reLaunch(object)
/pages/login/login
2.2、相对路径
以 “../” 开头,从当前页面一级一级往上级目录倒退,然后再从共同目录一级级向下找到具体页面。这种一般 wx.navigateTo(object) 用的多,因为它要保存当前页面,便于返回
../../module/customer/main/main
或者:
以 “./” 开头,直接在当前目录
./registered 或者 registered
app.json文件内配置的路径都是以pages目录为根目录的相对路劲。

因此在进行页面跳转的时候,都需要写成相对路劲的格式,不然就会报错:路劲页面不存在。如果不想这么一级级往上倒退,尤其是 wx.redirectTo(object) 和 wx.reLaunch(object),那就直接写成绝对路劲格式。在 "pages" 前面加上 "/",如上面 wx.reLaunch(object) 示例。
微信小程序开发--路由切换,页面重定向的更多相关文章
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- 转载【小程序】: 微信小程序开发---应用与页面的生命周期
App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...
- 微信小程序开发 -- 获取当前页面路径
Page.prototype就是this: 你在任何一个Page里面都可以使用route字段和setData()函数: 示例代码: /** * 生命周期函数--监听页面加载 */ onLoad: fu ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
随机推荐
- 使用config 来管理ssh的会话
通常利用 ssh 连接远程服务器,一般都要输入以下类型命令: ssh user@hostname -p port 如果拥有多个ssh账号,特别是像我这种喜欢在终端里直接ssh登录, 要记住每个ssh账 ...
- 机器学习基石笔记:05 Training versus Testing
train:A根据给定训练集D在H中选出g,使得Ein(g)约等于0: test:g在整个输入空间X上的表现要约等于在训练集D上的表现,使得Eout(g)约等于Ein(g). 如果|H|小,更易保证t ...
- Windows 10安装Python 3 7成功打印Hello World!
Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:https://www.python.org/ 你可以在以下链接中下载 Python ...
- Python:标准库(包含下载地址及书本目录)
下载地址 英文版(文字版) 官方文档 The Python Standard Library <Python标准库>一书的目录 <python标准库> 译者序 序 前言 第1章 ...
- 【适合公司业务】全网最详细的IDEA里如何正确新建【普通或者Maven】的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(类似eclipse里同一个workspace下【多个子项目】并存)(图文详解)
不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...
- 梯度下降法原理与python实现
梯度下降法(Gradient descent)是一个一阶最优化算法,通常也称为最速下降法. 要使用梯度下降法找到一个函数的局部极小值,必须向函数上当前点对应梯度(或者是近似梯度)的反方向的规定步长距离 ...
- k8s全栈监控之metrics-server和prometheus
一.概述 使用metric-server收集数据给k8s集群内使用,如kubectl,hpa,scheduler等 使用prometheus-operator部署prometheus,存储监控数据 使 ...
- linux下xdebug的安装和配置方法
xdebug简介 Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. xdebug安装 首先让php错误显示,只需要修改php.in ...
- Redis缓存使用技巧
缓存能够有效加速应用的访问速度,同时可以降低后端负载,在应用架构中起着至关重要的作用,本文主要介绍缓存使用的一些技巧. 缓存更新策略 LRU/LFU/FIFO算法剔除 场景:数据一致性要求较低 原理: ...
- netty源码解解析(4.0)-11 Channel NIO实现-概览
结构设计 Channel的NIO实现位于io.netty.channel.nio包和io.netty.channel.socket.nio包中,其中io.netty.channel.nio是抽象实 ...