博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
阅读量:6967 次
发布时间:2019-06-27

本文共 3076 字,大约阅读时间需要 10 分钟。

hot3.png

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

   从小程序的首页到列表而再到内容页,是一步一步的跳转的,也就是说一般的小程序都会从一个页面跳转到另一个页面(当然,有的小程序只有一个页面,例如,计算器、房税计算等,这样的小程序比较少),如果想回到前一个页面可以点击小程序左上角的符号“<”即可返回到前一页。
  类似小程序这样的跳转是由小程序框架提供的接口实现的,这几个接口是:wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)、wx.navigateBack(OBJECT)和wx.switchTab。
  下面分别介绍这几个功能的使用区别与联系:
wx.navigateTo(OBJECT)
  这个接口是跳转到一个应用内的某个页面,但是,保留着当前页面,这句话不好理解什么是保留着当前页面?
如下图所示:

1-1F31911515X42.png 1-1F319115213R5.png 1-1F31911523K64.png

 

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

  这样有一个好处是,如果想从“C页面”回到“B页面”,只需要点击“C页面”的返回即可回到“B页面”,再点“B页面”的返回上一页面则回到“A页面”。
  使用wx.navigateBack可以返回到原页面。
wx.navigateBack(OBJECT)
 

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

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页面在同一个目录里面,如下图所示:
1-1F319115610619.png
navigate.wxml代码:
 

  当用户点击这个按扭后,就会触发事件ontouch,并把一个事件对象带到navigate.js文件里面ontouch函数里面。
这个事件对象是:
1-1F31911564X48.png
  也就是在视图层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'})

 

亲,如果您感觉本文有用,请点个赞再走吧!!(>‿◠)✌

转载于:https://my.oschina.net/ZhenyuanLiu/blog/1922275

你可能感兴趣的文章
Redis 在Centos Linux 上的启动脚本
查看>>
《Pro ASP.NET MVC 3 Framework》学习笔记目录
查看>>
《JavaScript高级程序设计》读书笔记(九):本地对象Array
查看>>
php 中文字符串截取子串
查看>>
从4.8.5版本升级到FastReport 4.10.1后,中文菜单有乱码,有的没有显示
查看>>
Jvascript 弹出层
查看>>
Sharepoint学习笔记—ECMAScript对象模型系列-- 3、如何查看SP object的所有方法(method)...
查看>>
信息安全大赛出的题目
查看>>
PHP&Javascript&CSS&jQuery常用知识大全(整理+原创)
查看>>
C#:WebBrowser控件的使用教程及相关问题整理
查看>>
【Swift学习】Swift编程之旅---属性(十四)
查看>>
HTTP详解
查看>>
HDU 4883 TIANKENG’s restaurant Bestcoder 2-1(模拟)
查看>>
自动化运维工具Ansible详细部署
查看>>
[svc]linux上vxlan实战
查看>>
java IO(二):字节流
查看>>
单变量微积分学习笔记
查看>>
Visual Studio下运行PowerShell脚本自增小版本号并发布到Nuget服务器上
查看>>
内行看门道:看似“佛系”的《QQ炫舞手游》,背后的音频技术一点都不简单...
查看>>
windows安装centos7子系统
查看>>