微信小程序里面如果有多个页面肯定有页面跳转,例如,当用户扫一扫微信小程序二维码后,就进入到了小程序的首页里面,然后,点击某个分类就进入到了这个分类的列表页,点击列表页的某一链接的标题后就进行到了这个链接的内容页,当然,也可以从小程序的首页直接进入到内容页里面。

从小程序的首页到列表而再到内容页,是一步一步的跳转的,也就是说一般的小程序都会从一个页面跳转到另一个页面(当然,有的小程序只有一个页面,例如,计算器、房税计算等,这样的小程序比较少),如果想回到前一个页面可以点击小程序左上角的符号“<”即可返回到前一页。

类似小程序这样的跳转是由小程序框架提供的接口实现的,这几个接口是:wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)、wx.navigateBack(OBJECT)和wx.switchTab。

  下面分别介绍这几个功能的使用区别与联系:

wx.navigateTo(OBJECT)

这个接口是跳转到一个应用内的某个页面,但是,保留着当前页面,这句话不好理解什么是保留着当前页面?

如下图所示:

  
 

如果使用接口wx.navigateTo的话,当点击“A页面”进入到“B页面”后,“A页面”仍然存在,如果从“B页面”进入到“C页面”,“A页面”和“B页面”都会保留着。

这样有一个好处是,如果想从“C页面”回到“B页面”,只需要点击“C页面”的返回即可回到“B页面”,再点“B页面”的返回上一页面则回到“A页面”。

使用wx.navigateBack可以返回到原页面。


wx.navigateBack(OBJECT)

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

OBJECT 参数说明:

参数 类型 默认值 说明
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 }) 

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小程序框架删除的并不是我们自己编写代码删除的,是腾讯把删除原页面的功能封装在了这个接口里面。

当点击“A页面”进入到“B页面”时,原“A页面”将被删除掉,只留下当前页面“B页面”,如果从“B页面”又进入到了“C页面”后,那么,“B页面”也被删除掉了,当前页面就是“C页面”。

如果我想回到“A页面”或“B页面”可以回去吗? 不能,因为,已经被小程序框架给销毁了,只能直接回到小程序的首页。

这就是这个接口wx.redirectto与wx.navigateTo的最主要区别。


接口wx.redirectto与wx.navigateTo的OBJECT 参数相同,如下表所示:

OBJECT 参数说明:

参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

  这两个接口里面的路径url后可以带参数,例如:

wx.redirectTo({   url: 'test?id=1' })

当用户点击这个跳转后,就会一同把id值为1的参数带到test页面里面。

跳转带参数非常重要,所以,下面做一个完整的实例来讲解带参数是如何实现的。


实例:

  要求:当点击页面navigate,把id=9的参数带到新页面login页面,在login页面接收这个参数值,根据业务需要来处理这个id值。

  navigate页面和login页面在同一个目录里面,如下图所示:

navigate.wxml代码:

      <view catchtap="ontouch" id="9">     <button >跳转带参数测试</button>     </view>

当用户点击这个按扭后,就会触发事件ontouch,并把一个事件对象带到navigate.js文件里面ontouch函数里面。

这个事件对象是:

也就是在视图层navigate.wxml里面的id的值9会通过事件对象传递到逻辑层navigate.js里面,即在对象的e.currentTarget.id里面。

这样我们在做微信小程序开发时,就可以通过e.currentTarget.id来获取视图层里的id值,然后,把这个id值以参数的形式带到login页面。

navigate.js代码:
 

  ontouch:function(e){     console.log(e)     wx.navigateTo({       url: '../login/login?id='+e.currentTarget.id,       success: function (e) {         console.log(e)       }     })

login.js代码:

  onLoad: function (options) {   console.log(options)   }

这样当点击“跳转带参数测试”按扭后就会在login.js文件里面的onLoad函数里面获取到一个对象options,options如下所示:

  Object {id: "9"}

显示options是一个对象,对象里面的id值正是从页面navigate.wxml获取到的id的值。

至于,获取到上一个面页做什么,微信小程序开发者可以根据自己的业务需要来处理。


wx.switchTab(OBJECT)

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

OBJECT 参数说明:

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

{   "tabBar": {     "list": [{       "pagePath": "index",       "text": "首页"     },{       "pagePath": "other",       "text": "其他"     }]   } } 
wx.switchTab({   url: '/index' }) 

微信小程序页面跳转导航wx.navigateTo和wx.redirectTo的更多相关文章

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

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

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

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

  3. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

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

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

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

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

  6. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  7. 微信小程序~页面跳转和路由

    一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面,如图3-6所示,在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈.

  8. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

  9. 微信小程序 --- 页面跳转

    第一种:wx.navigateTo({}); 跳转: 注意:这种跳转回触发当前页面的 onHide 方法,将当前页面隐藏,然后显示跳转页面.所以可以返回,返回的时候触发 onShow方法进行显示: ( ...

随机推荐

  1. 【python】python定时器

    #coding:utf-8 import os import time def print_ts(message): print "[%s] %s"%(time.strftime( ...

  2. ArrayList和Vector的扩容机制

    ArrayList和Vector都是继承了相同的父类和实现了相同的接口.如下 public class Vector<E> extends AbstractList<E> im ...

  3. JS_Ajax基础

    一:Ajax ajax 的全称是Asynchronous(异步) JavaScript and XML 在不刷新页面的情况下从服务器获取,提交数据的一种数据交互方式; 二:Ajax使用步骤概括 //1 ...

  4. Stacked injection--堆叠注入--堆查询注入

    Stacked injection--堆叠注入--堆查询注入 原文地址;http://www.sqlinjection.net/stacked-queries/   本篇属于集合原作者的思路和个人想法 ...

  5. js精要之继承

    // 继承object.prototype的方法 // hasOwnProperty() //检查是否存在一个给定名字的自有属性 // propertyIsEnumerable() // 检查一个自有 ...

  6. Echarts数据可视化series-map地图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. 【JAVA零基础入门系列】Day1 开发环境搭建

    [JAVA零基础入门系列](已完结)导航目录 Day1 开发环境搭建 Day2 Java集成开发环境IDEA Day3 Java基本数据类型 Day4 变量与常量 Day5 Java中的运算符 Day ...

  8. 手工在Docker for mac上安装Kubernetes

    此文发布时间比较早,当前已经有更好的办法,请参考网页: https://github.com/AliyunContainerService/k8s-for-docker-desktop 以下为原文 通 ...

  9. eclipse中出现An internal error occurred during: &quot;Initializing Java Tooling&quot;

    关于这个问题我查了一下,就是删除.projct文件夹下的文件. 自己试了一下,这个可以及解决问题可是会出现新的问题. 1.SVN关联没了,这样做你的svn信息都没了,项目还要重新导一遍 2.出现了新的 ...

  10. 潭州课堂25班:Ph201805201 爬虫高级 第十一课 Scrapy-redis分布 项目实战 (课堂笔