小程序声明式跳转与编程式跳转

小程序的声明式跳转与编程式跳转

首先很通俗的理解声明式跳转就是使用标签实现页面的跳转，编程式跳转就是用js去实现跳转。（本文以微信小程序开发者工具为例，换汤不换药的东西就不一一列举了）

声明式跳转：

声明式跳转使用navigate标签，它的open-type属性可以根据值的不同去实现不同效果的跳转

值	功能	代码示例
navigate	保留当前页，跳转到非 tabbar 页面	<navigator url='pages/detail/detail' > 点击跳转</navigator>
redirect	关闭当前页，跳转到非 tabbar 页面	<navigator url='pages/detail/detail' open-type='redirect' > 点击跳转</navigator>
switchTab	跳转到 tabbar 页面，关闭所有非 tabbar 页面	<navigator url='pages/home/home' open-type='switchTab'> 点击跳转</navigator>
reLaunch	关闭所有页面，跳到某个页面	<navigator url='pages/detail/detail' open-type='reLaunch'> 点击跳转</navigator>
navigateBack	关闭当前页，返回到上一级或多级页面,delta属性指定返回的层数	<navigator open-type='navigateBack' delta='1'> 点击返回</navigator>
exit	当target属性值miniProgram时，实现退出小程序	<navigator open-type='exit' target='miniProgram'> 点击退出</navigator>

编程式跳转：

编程式跳转使用不同的api 实现不同效果的跳转

api	功能	api参数
wx.navigateTo(Object object)	保留当前页，跳转到非 tabbar 页面	url：需要跳转的路径（字符串） success: 成功回调 ；fail：失败回调 complete：结束回调（不管成功失败都会调用）
wx.redirectTo(Object object)	关闭当前页，跳转到非 tabbar 页面	url：需要跳转的路径（字符串） success: 成功回调 ；fail：失败回调 complete：结束回调（不管成功失败都会调用
wx.switchTab(Object object)	跳转到 tabbar 页面，关闭所有非 tabbar 页面	url：需要跳转的路径（字符串） success: 成功回调 ；fail：失败回调 complete：结束回调（不管成功失败都会调用
wx.reLaunch(Object object)	关闭所有页面，跳到某个页面	url：需要跳转的路径（字符串） success: 成功回调 ；fail：失败回调 complete：结束回调（不管成功失败都会调用
wx.navigateBack(Object object)	关闭当前页，返回到上一级或多级页面,delta属性指定返回的层数	delta：需要返回的层数（number 若大于已有页面则返回到首页） success: 成功回调 ；fail：失败回调 complete：结束回调（不管成功失败都会调用

代码示例：

<view><button bindtap="btn">去详情页</button></view>
 
btn: function () {
    wx.navigateTo({
      url: '/pages/detail/detail',
      //成功回调
      success:function(res){
      
      }，
      //失败回调
      /*fail:function(err){
      
      },*/
      //结束始终调用
      complete:function(res){
      
      }
      
    })
  }

如果是返回则把 url 换成 delta 给正确的值即可

两种跳转方式相比较，声明式更加注重于想要得到什么，编程式更注重于怎样去做，声明式让你的代码结构更加清晰，而编程式让执行步骤更加清晰。

（天天宅在家里属实难受，作为刚看到前端大门的菜鸟，逆境中也得战斗）