首页 >> 新闻资讯 >>公司新闻 >> 微信小程序navigator的那些事
详细内容

微信小程序navigator的那些事

微信小程序中的navigator组件是一个页面链接组件,用于在当前小程序内进行页面跳转。通过navigator组件,开发者可以很容易地实现小程序内不同页面之间的导航。navigator组件支持多种跳转方式,如保留当前页面、跳转到新页面等,同时也支持一些自定义属性,如打开页面的路径、动画效果等(微信小程序navigator)。
基本用法

html

<!-- 跳转到新页面 -->  
<navigator url="/pages/index/index">跳转</navigator>  
 
<!-- 保留当前页面,跳转到应用内的某个 tabBar 页面,并关闭其他非 tabBar 页面 -->  
<navigator url="/pages/logs/logs" open-type="switchTab">跳转到日志页面</navigator>  
 
<!-- 重定向到小程序内的某个页面,并关闭当前页面 -->  
<navigator url="/pages/redirect/redirect" open-type="redirect">在当前页打开</navigator>  
 
<!-- 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabBar 页面 -->  
<navigator url="/pages/navigate/navigate" open-type="navigate">在当前页打开</navigator>  
 
<!-- 退出小程序,open-type 的值必须为 exit,且该页面不能有 tabBar -->  
<navigator open-type="exit">退出小程序</navigator>  
 
<!-- 打开客服会话,如果当前页面包含 button 组件且 open-type 为 contact,则优先使用 button 组件的客服会话功能 -->  
<navigator open-type="contact">联系客服</navigator>  
 
<!-- 导航到小程序内某个页面,并携带参数。目标页面的 onLoad 函数的参数中可获取到 page 和 query -->  

<navigator url="/pages/navigate/navigate?id=123">携带参数跳转</navigator>

主要属性

    url:需要跳转的应用内非 tabBar 的页面的路径(相对路径),路径后可以带查询参数 string,路径为空/留空字符串不跳转。
    open-type:跳转方式,如navigate(保留当前页面,跳转到应用内的某个页面)、redirect(关闭当前页面,跳转到应用内的某个页面)、switchTab(跳转到 tabBar 页面,并关闭其他非 tabBar 页面)、reLaunch(关闭所有页面,打开到应用内的某个页面)、exit(退出小程序,target="miniProgram"时生效)、contact(打开客服会话)、navigateToMiniProgram(跳转到另一个小程序,需要目标小程序同意)、share(转发,当前页面显示转发按钮,点击执行页面的 onShareAppMessage,可以返回分享信息自定义转发内容)等。
    delta:当 open-type 为 'navigateBack' 时有效,表示回退的页面数,如果 delta 大于现有页面数,则回退到首页。
    animation:定义跳转页面的动画效果,动画效果由动画属性中 duration,timingFunc,delay 三个字段决定,目前仅支持向前进入和向后退出两种动画。
    hover-class:指定点击时的样式类,当 hover-class="none" 时,没有点击态效果。
    app-id:当 open-type 为 navigateToMiniProgram 时有效,要打开的小程序 appId。
    path:当 open-type 为 navigateToMiniProgram 时有效,打开的页面路径,如果为空则打开首页。
    extra-data:当 open-type 为 navigateToMiniProgram 时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。

navigator组件是微信小程序中实现页面跳转和导航的基础组件,掌握其用法对于开发微信小程序至关重要。

友情链接:

版权所有普锐斯网络

联系我们

全国服务热线:13105291279

在线客服

用户留言

  • 电话直呼

    • 13105291279
    • 客服 :
  • 微信扫一扫

seo seo