})


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. 微信小程序 --- 页面跳转

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

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

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

随机推荐

  1. php文字、图片水印功能函数封装

    一直在做有关php文字图片上传方面的工作,所以把此功能函数整理了一次,现在分享给大家. <?php class image { var $g_img; var $g_w; var $g_h; v ...

  2. 关于header跳转之后的乱码

    http://www.360doc.com/content/11/0603/19/7052474_121495648.shtml 问题:不同网站的跳转出现乱码,不同编码的页面传递参数也出现乱码 搞清楚 ...

  3. VC单文档对话框添加托盘图标

    一 单文档添加托盘 1. 在CMainFrame中定义NOTIFYICONDATA结构m_notify 2.在OnCreate中添加托盘初始化代码 int CMainFrame::OnCreate(L ...

  4. codeforces Unusual Product

    题意:给你n*n的矩阵,里面是1或0,然后q次询问,如果操作数为1,那么就把x行的数0变成1,1变成0:如果操作数为2,那么在x列上的数0变成1,1变成0:如果是3,输出: 思路:在求的时候,对角线上 ...

  5. 10gocm-&amp;gt;session5-&amp;gt;数据库管理实验-&amp;gt;GC资源管理器的资源消耗组介绍

    <GC资源管理器>  官方文件:administrator's Guide->24 Using the Database Resource Manager 用法:在实际生产环境中使用 ...

  6. curl模拟ip和来源进行网站采集的实现方法

    对于限制了ip和来源的网站,使用正常的采集方式是不行的.这里说我的一种方法吧,使用php的curl类实现模拟ip和来源,可以实现采集限制ip和来源的网站. 1.设置页面限制ip和来源访问比如服务端的s ...

  7. Java基础-一文搞懂位运算

    在日常的Java开发中,位运算使用的不多,使用的更多的是算数运算(+.-.*./.%).关系运算(<.>.<=.>=.==.!=)和逻辑运算(&&.||.!), ...

  8. 【CF600E】Lomsat gelral

    题目大意:给定一棵 N 个节点的有根树,1 号节点是树的根节点,每个节点有一个颜色.求对于每个节点来说,能够支配整棵子树的颜色之和是多少.支配的定义为对于以 i 为根的子树,该颜色出现的次数不小于任何 ...

  9. Visual Studio 2015 key 许可证,下载地址

    Visual Studio 2015正式版离线iso及在线下载,附专业版和企业版可用key! Visual Studio Community 2015简体中文版(社区版,针对个人免费): 在线安装ex ...

  10. 解决Delphi7的自带的UTF-8编码转换函数BUG

    Delphi7及其以下版本的 VCL 只支持 Ansi, 所以... WideString 与 UTF8String (定义与 AnsiString 相同) 并没有办法正确的在 VCL 中显示 Del ...