• 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo


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

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

      类似小程序这样的跳转是由小程序框架提供的接口实现的,这几个接口是: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 参数说明:

    参数类型默认值说明
    deltaNumber1返回的页面数,如果 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 参数说明:

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


      这两个接口里面的路径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 参数说明:

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

    示例代码:

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

     

  • 相关阅读:
    Notes about "Exploring Expect"
    Reuse Sonar Checkstyle Violation Report for Custom Data Analysis
    Eclipse带参数调试的方法
    MIT Scheme Development on Ubuntu
    Manage Historical Snapshots in Sonarqube
    U盘自动弹出脚本
    hg的常用配置
    Java程序员的推荐阅读书籍
    使用shared memory 计算矩阵乘法 (其实并没有加速多少)
    CUDA 笔记
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/9719969.html
Copyright © 2020-2023  润新知