小程序的声明式导航与编程式导航

小程序的声明式导航与编程式导航

1. 声明式导航

1.1 例：

<view>
	<navigator url="/pages/detail/detail" open-type="navigate">要跳转的页面</navigator>
</view>

1.2 navigator 的属性：

< <

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式
delta	number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数
app-id	string		否	当target="miniProgram"时有效，要打开的小程序 appId
path	string		否	当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
extra-data	object		否	当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情
version	string	release	否	当target="miniProgram"时有效，要打开的小程序版本
hover-class	string	navigator-hover	否	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	600	否	手指松开后点击态保留时间，单位毫秒
bindsuccess	string		否	当target="miniProgram"时有效，跳转小程序成功
bindfail	string		否	当target="miniProgram"时有效，跳转小程序失败
bindcomplete	string		否	当target="miniProgram"时有效，跳转小程序完成

target的属性：

值	说明	最低版本
self	当前小程序
miniProgram	其它小程序

open-type的属性：

值	说明
navigate	就是保留当前页面，新添加一个页面，不能添加 tab 页面
redirect	替换当前页面，不能替换tab页面
switchTab	切换当前的 tab 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	返回 - 类似 back goBock
exit	退出小程序，target="miniProgram"时生效

2. 编程式导航

2.1 例：

//1. 在组件的结构文件中，包裹要跳转的列表外层添加事件 data-proid 传递参数
<view class="proitem" data-proid="{{ item.proid }}" bindtap="toDetail" wx:for="{{ prolist }}" wx:key="proid"></view>
//2. 在组件的 逻辑 文件中编写出点击事件，可以在event中获取data-proid 传递过来的参数
  methods: {
    toDetail (event) {
      console.log('取详情', event)
      const { currentTarget: { dataset: { proid } } } = event
      // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
      wx.navigateTo({
        url: `/pages/detail/detail?proid=${ proid }`, //要跳转的地址
      })
    }
  }

2.2 几种导航方式

方式	说明
wx.switchTab(Object object)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object)	关闭所有页面，打开到应用内的某个页面，没有返回按钮
wx.redirectTo(Object object)	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo(Object object)	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBack(Object object)	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

2.3 参数

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

疫情期间，大家的学习和生活都遭受了很大的影响，希望大家能逆战而行，迎难而上。