码迷,mamicode.com
首页 > 微信 > 详细

小程序路由页面跳转

时间:2020-02-23 14:40:31      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:有一个   eve   pointer   div   storage   默认   htm   color   报错   

小程序页面跳转

navigator组件跳转:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

wxAPI跳转:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

 

 技术图片

 

 先说组件跳转:

 

<!-- 基本跳转 -->
url中可以是绝对路径也可以是相对路径
<navigator url="/pages/detail/detail">跳到详情页</navigator>

另外navigator组件有一个比较重要的属性:open-type:跳转方式

技术图片

 

 技术图片

 

 navigate是open-type的默认取值:不会关闭所有页面,会直接覆盖到原有页面之上

redirect:不能跳到tabbar页面,关闭当前页面跳转到应用内的某个页面

switchTab:只能跳转到tabbar页面,并且关闭所有非tabbar页面

reLaunch:关闭所有页面,跳转到新页面,并且可以跳转到tabbar页面

<!--  navigator基本跳转 -->
<navigator url="/pages/detail/detail">跳到详情页</navigator>
<!-- redirect跳转 -->
<!-- 重定向 不会出现返回按钮 关闭当前页跳转到指定页 -->
<navigator url="/pages/detail/detail" open-type="redirect">跳到详情页</navigator>
<!-- switchTab -->
<navigator url="/pages/two/two" open-type="switchTab">
  <button>跳转到tabbar</button>
</navigator>  
<!-- reLaunch 可以跳转到任何页面 并且关闭掉所有的页面 -->
<navigator url="/pages/two/two" open-type="reLaunch">
  <button>reLaunch跳转</button>
</navigator> 
只针对没有发生过重定向的情况才可以使用navigateBack   否则报错,因为重定向之后此页面为第一个页面
<
navigator open-type="navigateBack">返回</navigator>
加上delta属性后可以返回多个层级
<navigator open-type="navigateBack" delta="2">返回</navigator>
 

 

 

 

小程序路由页面跳转

标签:有一个   eve   pointer   div   storage   默认   htm   color   报错   

原文地址:https://www.cnblogs.com/fqh123/p/12349579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!