zoukankan      html  css  js  c++  java
  • 微信小程序开发--路由切换,页面重定向

    这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方。

    1、页面切换传参,参数读取 

      1.1  wx.navigateTo(object)

      功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到当前页面。

    wx.navigateTo({     //当前页面对应的JS文件内 控制模板
      url: 'test?id=1'     //需要切换到的页面路劲,此处为相对路劲,id为传递的参数
    })
    
    
    //test.js         //test页面对应的JS文件,名字必须相同
    Page({    
      onLoad: function(option){     //通过路由传递过来的参数,只能在onLoad方法内收到,option就是路由参数的一个组合对象
        console.log(option.id)
      }
    })    

      1.2   wx.navigateBack(object)

      功能:关闭当前页面,与 wx.navigateTo({ })功能相对。返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

      1.3  wx.redirectTo(object)    

      功能:关闭当前页面,跳转到应用内的某个页面【这里的跳转最好写绝对路劲,当然如果只是从当前页面往一个具体页面跳转(次数不多),相对路劲也可以。但如果是 wx.request(object) 请求返回状态进行页面跳转,那就最好写绝对路劲,但是不允许跳转到 tabbar 页面。

      

      1.4  wx.switchTab(object)

      功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,与wx.redirectTo(object)方法功能互补。

      1.5  wx.reLaunch(object)

      功能:关闭所有页面,打开到应用内的某个页面【这种情况最好用绝对定位,因为是关闭所有页面,已经不需要知道当前所处页面了,直接重定向到某个具体页面。这种一般都是重定向到登录或者初始页面

    wx.reLaunch({      //token失效,界面重定向到登录页,绝对路劲
        url: "/pages/login/login",
    });

    2、相对路径和绝对路径

      2.1、绝对路径

      以 “/” 开头代表根目录,表示从根目录下来的直接路劲,不以当前页面所处位置改变而改变。适用于重定向到具体页面,因此比较适用于 wx.redirectTo(object) 和 wx.reLaunch(object)

        /pages/login/login

      2.2、相对路径

       “../” 开头,从当前页面一级一级往上级目录倒退,然后再从共同目录一级级向下找到具体页面。这种一般 wx.navigateTo(object) 用的多,因为它要保存当前页面,便于返回

        ../../module/customer/main/main

      或者:

      以 “./” 开头,直接在当前目录

      ./registered 或者 registered 

      app.json文件内配置的路径都是以pages目录为根目录的相对路劲。

      因此在进行页面跳转的时候,都需要写成相对路劲的格式,不然就会报错:路劲页面不存在。如果不想这么一级级往上倒退,尤其是 wx.redirectTo(object) 和 wx.reLaunch(object),那就直接写成绝对路劲格式。在 "pages" 前面加上 "/",如上面 wx.reLaunch(object) 示例。

  • 相关阅读:
    494 Target Sum 目标和
    493 Reverse Pairs 翻转对
    492 Construct the Rectangle 构建矩形
    491 Increasing Subsequences 递增子序列
    488 Zuma Game 祖玛游戏
    486 Predict the Winner 预测赢家
    485 Max Consecutive Ones 最大连续1的个数
    483 Smallest Good Base
    Django Form组件
    Django Auth组件
  • 原文地址:https://www.cnblogs.com/donghuang/p/9663656.html
Copyright © 2011-2022 走看看