})


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

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

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

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

  8. 微信小程序 页面跳转navigator与传递参数

    页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,tit ...

  9. 微信小程序页面跳转的问题(app.json中设置tarBar后wx.redirectTo和wx.navigateTo均不能实现跳转到指定的页面)

    1.设置的tabBar代码片段: "tabBar": { "list": [ { "pagePath": "pages/homep ...

随机推荐

  1. Linux运维之基础拾遗

    第一部分 Linux常用文件管理命令 1.1 cp 文件复制 常用选项 -i # 覆盖之前提醒用户确认 -f # 强制覆盖目标文件 -r # 递归复制目录 -d # 复制符号链接本身而非其指向的源文件 ...

  2. Find Out What Your Entity Framework Query Is Really Doing

    Assuming that you're using Entity Framework 6, you already have a logging tool that can give you som ...

  3. tp框架之数据添加

    1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...

  4. CSS font 复合属性的顺序

    CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...

  5. [CS231n-CNN] Training Neural Networks Part 1 : parameter updates, ensembles, dropout

    课程主页:http://cs231n.stanford.edu/ ___________________________________________________________________ ...

  6. flash 动画数据导出 到 coco2d-js ,cocos2d-x 问题的记录

    1:必须搞清flash坐标系 和 cocos2d 的坐标系的差异2:对于cocos2d系列坐标系的深入理解: 以前我们常认为 coco2d-x的X,Y是相对坐标系,相对于父节点的X,Y的坐标,这种说法 ...

  7. 深入理解Binder(一),从AIDL谈起

    打算写一篇Binder介绍的文章,仔细想想一篇文章貌似很难厘清,于是我打算从AIDL入手,本篇先来简单介绍下AIDL的使用,然后在此基础上我们继续来研究Binder的工作原理.小伙伴们都知道,AIDL ...

  8. Dijango学习_02_极简本地博客创建

    二. Python 自带SQLite3数据库,Django默认使用SQLite3数据库,如果使用其它数据库可以在settings.py文件中设置. DATABASES = { 'default': { ...

  9. Solr4.7.0连接Oracle

    1.把Oracle的Jar包  例如:ojdbc14.jar  或其他版本 放到D:\apache-tomcat-7.0.57\webapps\solr\WEB-INF\lib下 2.然后在tomca ...

  10. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...