美文网首页
微信小程序页面跳转方法总结

微信小程序页面跳转方法总结

作者: 爱貌貌Manners | 来源:发表于2019-01-27 03:28 被阅读4次

    一、JS文件中跳转

    • 1、wx.navigateTo

      • 「保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。」
      wx.navigateTo({
      url: 'page/home/home?user_id=111'
      })
      
    • 2、wx.redirectTo

      • 「关闭当前页面,跳转到应用内的某个页面。」
      wx. redirectTo({
      url: 'page/home/home?user_id=111'
      })
      
    • 3、wx.switchTab

      • 「跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面」
      wx. switchTab({
      url: 'page/index/index'
      })
      
    • 4、wx.navigateBack

      • 「关闭当前页面,返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈,决定需要返回几层。」
      wx.navigateBack({
      delta: 2
      })
      
    • 5、wx.reLaunch

      • 「关闭所有页面,打开到应用内的某个页面」
      wx. reLanch({
      url: 'page/index/index'
      })
      

    二、wxml 页面组件跳转「navigator组件」

    • 1.open-type 有效值:navigate --->>对应wx.navigateTo

    • 1.open-type 有效值:redirect --->>对应wx.redirectTo

    • 1.open-type 有效值:switchTab --->>对应wx.switchTab

    • 1.open-type 有效值:reLaunch --->>对应wx.reLaunch

    • 1.open-type 有效值:navigateBack --->>对应wx.navigateBack

    • 1.open-type 有效值:exit----->>退出小程序,target="miniProgram"时生效

    实例

    //1.直接使用
    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
    
    //2.包裹控件使用
    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
    <button>在当前页打开</button>
    </navigator>
    
    

    相关文章

      网友评论

          本文标题:微信小程序页面跳转方法总结

          本文链接:https://www.haomeiwen.com/subject/xutgjqtx.html