这段时间开发了一个微信小程序,虽然小程序的导航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 object)
功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,与wx.redirectTo(object)方法功能互补。
1.5 wx.reLaunch(Object object)
功能:关闭所有页面,打开到应用内的某个页面【这种情况最好用绝对定位,因为是关闭所有页面,已经不需要知道当前所处页面了,直接重定向到某个具体页面。这种一般都是重定向到登录或者初始页面】
wx.reLaunch({ //token失效,界面重定向到登录页,绝对路劲 url: "/pages/login/login", });
2、相对路径和绝对路径
2.1、绝对路径;
以 “/” 开头代表根目录,
/pages/login/login
2.2、相对路径
以 “../” 开头,从当前页面一级一级往上级目录倒退
../../module/customer/main/main
或者:
以 “./” 开头,直接在当前目录
./registered
补充:下面看下微信小程序的路由跳转方法
路由跳转的方法
1.打开新页面
1.wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页面。
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 :
wx.navigateTo({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } })
目前页面路径最多只能十层。
2.页面重定向
1.wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 :
wx.redirectTo({ url: 'test?id=1' }) //test.js
3.页面返回
1. wx.navigateBack 或使用组件 <navigator open-type="navigateBack">
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
属性用法: