小程序页面跳转的几个方法和区别

目前小程序的几个页面跳转方式的主要区别就两点:

  • 1.是否可以返回上一个页面
  • 2.目标页面是否是tabBar

两个通用属性

  • 1.限制:目前页面路径最多只能十层。
  • 2.分类:wx.navigateTowx.redirectTo不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

下面是对几个跳转方式的整理说明

1. wx.navigateTo({})

保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回;

关于Url参数:

  • 不能跳转到tabBar页面
  • 带参格式:【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】
wx.navigateTo({url:'../test/test?id=1&page=4',//跳转页面的路径,可带参数?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀success:function(){}        //成功后的回调;fail:function(){}          //失败后的回调;complete:function(){}      //结束后的回调(成功,失败都会执行)
})传递的参数在接收页面onLoad()函数中得到值:option.id就可以得到了
onLoad: function (option) {console.log(option)//可以打印一下option看查看参数this.setData({id:option.id,
});

1.1.wx.navigateBack(OBJECT)

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

关于参数:

delta–>类型:Number,
默认值:1 ,
说明:返回的页面数,如果 delta 大于现有页面数,则返回到首页。

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

// 此处是A页面
wx.navigateTo({url: 'B?id=1'
})// 此处是B页面
wx.navigateTo({url: 'C?id=1'
})// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({delta: 2
})

2.wx.redirectTo(OBJECT)

关闭(之前的页面是回不去的)当前页面,跳转到非tabBar的某个页面

关于Url参数:

  • 不能跳转到tabBar页面
  • 【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

3.wx.reLaunch(OBJECT)

关闭(之前的页面是回不去的)所有页面,打开到应用内的某个页面。

关于Url参数:

  • 【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】
  • 【如果是跳转到tabBar页面,则不能带参数】

4.wx.switchTab(OBJECT)

跳转到tabBar的某个页面,并关闭其他所有非 tabBar 页面

关于参数:

  • 目标页面必须是在:app.json 的 tabBar 中定义的页面
  • 不能带参数
wx.switchTab({ url: '/pages/home/home' 
});

5.组件 <navigator>

直接写在布局里面的跳转方式

参数说明:
url:和上面几种方式的规则一样,当前小程序内的跳转链接
open-type(跳转方式):有效值如下表

参数说明
navigate对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect对应 wx.redirectTo 的功能
switchTab对应 wx.switchTab 的功能
reLaunch对应 wx.reLaunch 的功能
navigateBack对应 wx.navigateBack 的功能

eg:

<navigator url="/pages/detail/detail">点击跳转</navigator>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

再学 GDI+[98]: TGPImage(18) - 获取 GDI+ 图像格式对应的 GUID

和在 Net 中不同的是, 在具体指定图像格式时, 这里常常需要的不是格式名称, 而是格式的 GUID;知道了格式名称, 用 GetEncoderClsid 函数可以获取格式的 GUID;GetEncoderClsid 函数来自 GDIPUTIL 单元, 本例并没有用到前面一直不可或缺的 GDIPOBJ、GDIPAPI 单元.如果要获取 imag…

STL::map默认会按照.first的字母顺序排列

看个代码&#xff1a; // map默认会按照.first的字母顺序排列#include <map>#include <string>#include <iostream>using namespace std;int main(){map<string, string> map1;map<string, string>::iterator mapit;map<string, string>:…

JS之连接数组方法concat

作用&#xff1a;用于连接两个或多个数组&#xff0c;该方法不会改变现有的数组&#xff0c;而仅仅会返回被连接数组的一个副本 语法&#xff1a;arrayObject.concat(arrayX,arrayX,……,arrayX) 参数&#xff1a;arrayX&#xff0c;必需。该参数可以是具体的值&#xff0c;也…

configure: error: Curl library not foun

yum -y install curl-devel 转载于:https://www.cnblogs.com/lehao/p/3903189.html

微信小程序:生命周期

下面从三个方面来介绍小程序的生命周期&#xff1a; &#xff08;1&#xff09;应用生命周期 &#xff08;2&#xff09;页面生命周期 &#xff08;3&#xff09;应用及页面生命周期的触发顺序 1.应用生命周期 App() 必须在 app.js 中调用&#xff0c;必须调用且只能调用一次…

在.NET3.5平台上使用LinQ to SQL + NBear 创建三层WEB应用

看了《一步一步学Linq to sql》和《在.NET 3.5 平台上使用LINQ to SQL创建三层/多层Web应用系统》 这两个系列文章后,因为一直使用NBear,所以试着综合了一下主要用NBear.IOC其它的NBear.data里的就没有会了,相应的使用LINQ来做数据处理. 之前一直使用NBear做些WEB应用主要感觉N…

递归修改子目录及文件的权限

背景&#xff1a;当我们的虚拟机和windows系统共享windows上的一个目录(记为&#xff1a;A)时&#xff0c;把该目录下的目录(记为B)移动(mv)到linux下的任意目录下&#xff0c;这个目录B及下面的子目录或文件的权限都是rwx(777)&#xff0c;这是他们在windows下的权限。因此用l…

JS之字符串连接方法join

作用&#xff1a;join() 方法用于把数组中的所有元素放入一个字符串&#xff0c;元素是通过指定的分隔符进行分隔的。&#xff08;作用和split正好相反&#xff09; 语法&#xff1a;arrayObject.join(separator) 参数&#xff1a;可选。指定要使用的分隔符。如果省略该参数&…

2.[Yii]创建与设置默认控制器及载入模板

1.创建控制器与访问 class IndexController extends Controller {//访问 index.php?rindex/index//r后面 其中第一个是控制器&#xff0c;第二个是方法&#xff0c;r就是路由route的缩写public function actionIndex(){$this->render("index");//载入模板文件} }…

程序根据手机机型设置自定义底部导航距离

需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时&#xff0c;会触发 onLaunch&#xff08;全局只触发一次&#xff09;*/onLaunch: function() {var that this;//获取手机型号…

张雨生《口是心非》

[hjp3]hjptypesong&player1&sonhttp://www.justin-rao.net/songs/[1997]%20ZhangYuSheng%20-%20KouShiXinFei%20-%2002%20-%20KouShiXinFei.mp3&autoplayno&captionfalse&lrc&autoreplay1&bgcolorFFFFFF&width200&height20[/hjp3] 转载于:…

JS之颠倒数组元素的reverse方法

作用&#xff1a;reverse() 方法用于颠倒数组中元素的顺序 语法&#xff1a;arrayObject.reverse() 注意&#xff1a;该方法会改变原来的数组&#xff0c;而不会创建新的数组 实例1&#xff1a;

图文:详解数据库Oracle 11g的基本安装

From: http://blog.csdn.net/wjcreator123/article/details/3243041 下面提供的是Oracle 11g的下载地址和基本安装过程&#xff08;仅作参考&#xff09; 第一步&#xff1a; oracle服务端下载: http://down.zdnet.com.cn/detail/9/82225.shtml 客户端: http://blog.csdn.net…

acid(数据库事务正确执行的四个基本要素的缩写)

ACID&#xff0c;指数据库事务正确执行的四个基本要素的缩写。包含&#xff1a;原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;、持久性&#xff08;Durability&#xff09;。一个支持事务&am…

mysql数据库中查看当前使用的数据库是哪个数据库?

一、用select database()语句 语句 mysql > select database();结果 解释&#xff1a;表示的是当前使用的是哪个数据库或者说会话登录到了哪个数据库中。 二、用show tables语句 语句 mysql > show tables;结果 解释&#xff1a;查询出来的结果中&#xff0c;第一行…

JS之返回数组指定元素的slice

作用&#xff1a;slice() 方法可从已有的数组中返回选定的元素 语法&#xff1a;arrayObject.slice(start,end) 参数1&#xff1a;必需。规定从何处开始选取。如果是负数&#xff0c;那么它规定从数组尾部开始算起的位置。也就是说&#xff0c;-1 指最后一个元素&#xff0c;…