后浪云百度小程序教程：navigator 页面导航
- navigator 页面导航
- 属性说明
- target 有效值
- version 有效值
- open-type 有效值
- 示例
- 代码示例
- 说明
- 常见问题
- Q：请问下如何关闭小程序？
- Q：请问下如何关闭小程序？
- 属性说明
navigator 页面导航
解释：页面链接，控制小程序的跳转，既可在当前小程序内部进行跳转，也可跳转至其他小程序。navigator的子节点背景色应为透明色。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
target | String | self | 否 | 在哪个目标上发生跳转，默认当前小程序，有效值 self/miniProgram | 2.5.2 |
url | String | 否 | 应用内的跳转链接 | - | |
open-type | String | navigate | 否 | 跳转方式 | - |
delta | Number | 否 | 当 open-type 为 | - | |
app-id | String | 否 | 当 | 2.5.2 | |
path | String | 否 | 当 | 2.5.2 | |
extra-data | Object | 否 | 当 | 2.5.2 | |
version | String | release | 否 | 当 | 2.5.2 |
hover-class | String | navigator-hover | 否 | 指定点击时的样式类，当 | |
hover-stop-propagation | Boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | - |
hover-start-time | Number | 50 | 否 | 按住后多久出现点击态（单位：毫秒） | - |
hover-stay-time | Number | 600 | 否 | 手指松开后点击态保留时间（单位：毫秒） | - |
bindsuccess | String | 否 | 当 | 2.5.2 | |
bindfail | String | 否 | 当 | 2.5.2 | |
bindcomplete | String | 否 | 当 | 2.5.2 |
target 有效值
| 值 | 说明 |
|---|---|
| self | 当前小程序 |
| miniProgram | 跳转到另一个小程序 |
version 有效值
| 值 | 说明 |
|---|---|
| develop | 开发版 |
| trial | 体验版 |
| release | 正式版 |
open-type 有效值
| 值 | 说明 | 最低版本 |
|---|---|---|
navigate | 保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar 页面。对应 swan.navigateTo 的功能 | |
redirect | 关闭当前页面，跳转到应用内的某个页面。对应 swan.redirectTo 的功能 | |
switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。对应 swan.switchTab 的功能 | |
navigateBack | 关闭当前页面，返回上一页面或多级页面。对应 swan.navigateBack 的功能 | |
reLaunch | 关闭所有页面，打开到应用内的某个页面。对应 swan.reLaunch 的功能 | |
exit | 退出小程序， | 2.5.2 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
<view class="wrap"><view class="card-area"><button type="primary"><navigatortarget="self"open-type="navigate"url="/component/detail/detail?id=新页面,点击左上角返回回到之前页面"hover-class="navigator-hover"hover-start-time="50"hover-stay-time="600"hover-stop-propagation="true">跳转到新页面</navigator></button><button type="primary"><navigators-if="{{!isWeb}}"target="self"open-type="redirect"url="/component/detail/detail?id=当前页,点击左上角返回回到上级菜单"hover-class="navigator-hover"hover-start-time="50"hover-stay-time="600"hover-stop-propagation="true">在当前页打开</navigator></button><button type="primary"><navigators-if="{{!isWeb}}"target="self"open-type="navigateBack"hover-class="navigator-hover"hover-start-time="50"hover-stay-time="600"hover-stop-propagation="true"delta="1">返回上一页面</navigator></button><button type="primary"><navigators-if="{{!isWeb}}"target="miniProgram"open-type="exit">退出当前小程序</navigator></button><button type="primary"><navigatortarget="self"open-type="switchTab"url="/entry/component/component">打开一个有Tab的页面</navigator></button><button type="primary"><navigatortarget="self"open-type="reLaunch"url="/component/detail/detail?id=新页面,点击左上角返回回到上级菜单">关闭所有页面打开新页面</navigator></button><button type="primary"><navigatortarget="miniProgram"s-if="{{!isWeb}}"open-type="navigate"extra-data="extra-data"app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp"version="release"bindsuccess="successHandler"bindfail="failHandler"bindcomplete="completeHandler">打开绑定的小程序</navigator></button></view></view>
说明
navigator-hover默认为：
- CSS
{background-color: rgba(0, 0, 0, 0.1);opacity: 0.7;}
常见问题
Q：请问下如何关闭小程序？
A：可以通过组件进行关闭当前小程序的操作。
代码示例
- SWAN
<button type="primary"><navigator target="miniProgram" open-type="exit">退出当前小程序</navigator></button>