微信小程序开发--路由切换，页面重定向

时间：2022-09-20 22:51:19

这段时间开发了一个微信小程序，虽然小程序的导航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) 示例。

相关文章