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

一、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. OC中.pch文件的解释

      在IOS开发的项目中有一个Prefix.pch,.pch文件是什么?  Prefix.pch:扩展名.pch表示"precompiled header",这是一个你工程要用到的 ...

  2. 在Java代码中使用pdfBox将PDF转换为图片

    生成图片 // 生成图片 PDDocument pd = PDDocument.load(new File(filePath)); PDFRenderer pdfRenderer = new PDFR ...

  3. mysql的一个特殊问题 you can&#39;t specify target table &#39;cpn_regist&#39; for update in FROM clause

    今天在操作数据库的时候遇到了一个问题,sql语句如下: UPDATE cpn_yogurt_registration SET dep1Name = '1' WHERE `key` in  (SELEC ...

  4. java中遍历MAP,嵌套map的几种方法

    java中遍历MAP的几种方法 Map<String,String> map=new HashMap<String,String>();    map.put("us ...

  5. web.py 学习(二)Worker

    Rocket Server 启动一个线程监听客户端的连接,收到连接将连接放置到队列中.线程池中的Worker会以这个连接进行初始化.Rocket中Worker的基类是: class Worker(Th ...

  6. MySql技术内幕之MySQL入门(1)

    目录 MySql技术内幕之MySQL入门(1) 安装 关于注释 执行SQL语句 关于命令大小写 创建数据库 查看表的信息 查看更加详细的信息 查看与给定模式相匹配的列 插入数据 利用insert添加行 ...

  7. Appium典型问题处理

    1. http://ask.testfan.cn/article/902 Appium 服务端安装-windows2. http://ask.testfan.cn/article/1078 最新版本a ...

  8. 关于C的int

    在c运行库头文件<stdint.h>中typedef各种类型的int typedef signed char int8_t; typedef unsigned char uint8_t; ...

  9. How to change windows applicatioin&#39;s position via Win32 API

    可以使用的Win32 API是: [DllImport("user32.dll")] private extern static bool SetWindowPos(IntPtr ...

  10. C# Httpclient客户端操作

    原文地址:https://www.cnblogs.com/Xujg/p/4113387.html HttpClient 当前主流用法,异步请求,自.NET4.5开始可从Nuget包管理中获取. usi ...