最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式

一、wx.navigateTo(OBJECT)

这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面”

类似于html中的 window.location.href=" "
eg:

wx.navigateTo({
  url: 'test?id=1'
})实际效果如下:

小程序中左上角有一个返回箭头,可返回上一个页面

也可以通过方法  wx.navigateBack 返回原页面

二、wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。类似于html中的  window.open('你所要跳转的页面');

eg:
wx.redirectTo({
  url: 'test?id=1'
})
效果如下:

左上角没有返回箭头,不能返回上一个页面

三、wx.switchTab(OBJECT)

 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面eg:
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

四、wx.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

跟wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同

这里要提到小程序中的  getCurrentPages() 方法

在wx.navigateTo中,每跳转一个新的页面,其原始页面就会被加入堆栈,通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面;

wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面

wx.reLaunch 方法则会清空当前的堆栈。

eg:

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回b页面
wx.navigateBack({
  delta: 1
})
// 此处是B页面
wx.redirectTo({ url: 'C?id=1' }) // 在C页面内 navigateBack,则会返回a页面 wx.navigateBack({ delta: 1 })

// 此处是B页面
wx.reLaunch({
 url: 'C?id=1' }) // 在C页面内 navigateBack,则无效

参考链接https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html

 


 

微信小程序页面跳转 的几种方式的更多相关文章

  1. [转] 微信小程序页面间通信的5种方式

    微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...

  2. 微信小程序页面跳转的四种方法

    wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回; 示例: 1 wx.navigateTo({ 2 url:'../test/ ...

  3. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  4. 微信小程序——页面跳转及传参

    小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...

  5. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  6. 微信小程序页面跳转后js定时器没有销毁的问题

    现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...

  7. 微信小程序页面跳转方法汇总

    微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...

  8. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  9. 微信小程序页面跳转方法和携带参数详解

    1.页面跳转方式     (1)标签跳转   open-type的属性值对应api里的用法即wx.的用法   1 <navigator url="/page/navigate/navi ...

随机推荐

  1. F#之旅7 - 图片处理入门

    首先,隆重介绍今天的主角:ImageProcessor(http://imageprocessor.org/).虽然我并没有在实际工作中用到这个库,但是它干净利索的使用方式打动了我,很久以前就存了下来 ...

  2. Linux 下复制(cp)目录时排除一个或者多个目录的方法

    cp 貌似没有排除目录的功能,可以使用 rsync 命令来实现了,如: [案例] /home/52php目录里面有data目录,data目录里面有 a.b.c.d.e 五个目录,现在要把data目录里 ...

  3. 用php实现遍历目录

    用php实现的遍历目录,只遍历第一层,如果制作在线文件管理器的话很管用,不同目录只加一个超链接就行了,然后给方法传递参数就行了,遍历目录的类如下: class Ergodic{ public func ...

  4. C# 动态链接库的创建

    首先在C#工程下面安装第三方插件包 安装方法:Tools --> Library Package Manager --> Package Manager Console Install-P ...

  5. hdu 4027 Can you answer these queries? 线段树

    线段树+剪枝优化!!! 代码如下: #include<iostream> #include<stdio.h> #include<algorithm> #includ ...

  6. 1 weekend110的复习 + hadoop中的序列化机制 + 流量求和mr程序开发

    以上是,weekend110的yarn的job提交流程源码分析的复习总结 下面呢,来讲weekend110的hadoop中的序列化机制 1363157985066      13726230503  ...

  7. .NET之反射(1)

    .NET之反射 第一版 内容摘要 前言 反射 查看元数据 加载程序集 晚期绑定 方法调用 反射.晚期绑定和自定义特性的使用背景 参考资料 前言 关于反射的内容,向来是隐藏在C#高级编程类别中的大部头书 ...

  8. C++关注备注部分知识点

    //关注备注部分知识点. #include <iostream> #include <string><span style="white-space:pre&q ...

  9. MongoDB(二)——安装配置了解

    前边介绍了MongoDB的大概理论知识,这篇来对MongoDB进行一下安装使用,支持安装在windows和linux上,当然了很多其它情况下我们是安装在linux上,由于毕竟server用linux的 ...

  10. ReactiveNative学习之Diff算法

    React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...