微信小程序跳转的方式总共有5种,可以对应各种的应用场景。
1.wx.navigateTo()保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar页面。
可封装函数为:
//跳转新页面页面,保留当前页面。functionnavigateTo(url){wx.navigateTo({url:url})}2.wx.redirectTo()关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到tabbar页面。
可封装函数为:
//跳转新页面页面,关闭当前页面。functionredirectTo(url){wx.redirectTo({url:url})}3.wx.switchTab()跳转到tabBar页面,并关闭其他所有非tabBar页面
可封装函数为:
//关闭其他所有非tabBar页面,跳转到tabBar页面functionreLaunch(url){//url必须为tabbar页面的路径,否则没有效果wx.switchTab({url:url})}4.wx.navigateBack()关闭当前页面,返回上一页面或多级页面。可通过获取当前的页面栈,决定需要返回几层。
可封装函数为:
//返回页面functionnavigateBack(delta){//注意:此处的delta为number(数字)wx.navigateBack({delta:delta})}另接getCurrentPages的函数封装方法
//获取当前页urlfunctiongetCurrentPageUrl(){varpages=getCurrentPages()//获取加载的页面varcurrentPage=pages[pages.length-1]//获取当前页面的对象varurl=currentPage.route//当前页面urlreturnurl}5.wx.reLaunch()关闭所有页面,打开到应用内的某个页面
可封装函数为:
//关闭所有页面,打开到应用某个页面functionreLaunch(url){wx.reLaunch({url:url})}另加两个不常用的跳转到其他小程序和返回到之前的小程序的方法6-1.wx.navigateToMiniProgram()打开另一个小程序
可封装函数为:
//appId要打开的小程序appId,path打开的页面路径,如果为空则打开首页(path中?后面的数据可以再小程序的App.onLaunch、App.onShow和Page.onLoad的回调函数当中获取到),extraData(object)需要传递给目标小程序的数据(目标小程序可在App.onLaunch,App.onShow中获取到传过来的数据),envVersion要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。functionnavigateToMiniProgram(appId,path,extraData,envVersion){wx.navigateToMiniProgram({appId:appId,path:path,extraData:extraData,envVersion:envVersion})}6-2.wx.navigateBackMiniProgram(Objectobject)返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功
注意:微信客户端iOS6.5.9,Android6.5.10及以上版本支持
可封装函数为:
//extraData(object)需要返回给上一个小程序的数据,上一个小程序可在App.onShow中获取到这份数据。functionnavigateBackMiniProgram(extraData){wx.navigateBackMiniProgram({extraData:extraData,})}以上可整合为一下redirect.js里,具体如下://跳转新页面页面,保留当前页面。functionnavigateTo(url){wx.navigateTo({url:url})}//返回页面functionnavigateBack(delta){wx.navigateBack({delta:delta})}//跳转新页面页面,关闭当前页面。functionredirectTo(url){wx.redirectTo({url:url})}//关闭所有页面,打开到应用某个页面functionreLaunch(url){wx.reLaunch({url:url})}//获取当前页urlfunctiongetCurrentPageUrl(){varpages=getCurrentPages()//获取加载的页面varcurrentPage=pages[pages.length-1]//获取当前页面的对象varurl=currentPage.route//当前页面urlreturnurl}//appId要打开的小程序appId,path打开的页面路径,如果为空则打开首页(path中?后面的数据可以再小程序的App.onLaunch、App.onShow和Page.onLoad的回调函数当中获取到),extraData(object)需要传递给目标小程序的数据(目标小程序可在App.onLaunch,App.onShow中获取到传过来的数据),envVersion要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。functionnavigateToMiniProgram(appId,path,extraData,envVersion){wx.navigateToMiniProgram({appId:appId,path:path,extraData:extraData,envVersion:envVersion})}//extraData(object)需要返回给上一个小程序的数据,上一个小程序可在App.onShow中获取到这份数据。functionnavigateBackMiniProgram(extraData){wx.navigateBackMiniProgram({extraData:extraData,})}module.exports={//抛出封装好的函数方法,以便在其他需要的页面进行引入调用。navigateTo:navigateTo,navigateBack:navigateBack,redirectTo:redirectTo,reLaunch:reLaunch,getCurrentPageUrl:getCurrentPageUrl,}具体用法如下:
index.jsvarredirect=require('路径找到redirect.js即可')//引入封装好的JS;然后再需要跳转的地方调用方法,例如保留当前页面并进行跳转传递参数(以下仅供参考,以自己的实际情况为准):varurl=options.id+'&type='+options.type+'&article_type='+options.article_type+'&pic='+options.fenPic;redirect.navigateTo('../detail/detail?id='+url)谨记(这个地方拼接的时候不要写错哦!):

以上就是微信小程序的几种跳转方式及封装方法,希望能够对你有帮助!如果没有找到你想要的封装方法可以去我置顶的那一篇博客看一下,希望有你需要的,点击效果棒棒哒,哦!--------临时补足一下,之前给忘了还有一个可以跳转的方式就是navigator组件7.navigator页面链接。
参数可传为:
target在哪个目标上发生跳转,默认当前小程序url当前小程序内的跳转链接open-type跳转方式delta当open-type为'navigateBack'时有效,表示回退的层数app-id当target="miniProgram"时有效,要打开的小程序appIdpath当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页extra-data当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在App.onLaunch(),App.onShow()中获取到这份数据。version当target="miniProgram"时有效,要打开的小程序版本hover-class指定点击时的样式类,当hover-时,没有点击态效果hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态hover-start-time按住后多久出现点击态,单位毫秒hover-stay-time手指松开后点击态保留时间,单位毫秒bindsuccess当target="miniProgram"时有效,跳转小程序成功bindfail当target="miniProgram"时有效,跳转小程序失败bindcomplete当target="miniProgram"时有效,跳转小程序完成targetself当前小程序miniProgram其它小程序open-typenavigate对应或的功能redirect对应的功能switchTab对应的功能reLaunch对应的功能navigateBack对应的功能exit退出小程序,target="miniProgram"时生效例如:
navigatorurl="/page/navigate/navigate?title=navigate"hover-跳转到新页面/navigator













