导航组件：小程序界面的跳转

最新推荐文章于 2024-12-10 17:55:18 发布

原创最新推荐文章于 2024-12-10 17:55:18 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了小程序中的页面导航组件navigator，包括其属性、使用限制和功能页导航。页面导航组件类似于HTML的a标签，控制页面跳转。从2.3.0版本开始，跳转其他小程序需要用户确认。此外，每个小程序最多可跳转10个其他小程序，并需在代码配置中声明。功能页导航仅在插件自定义中有效，用于跳转到插件功能页，但不支持开发者自定义页面外观和在开发者工具中调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面导航

页面导航组件（navigator）组件，它类似于HTML中的a标签，主要控制页面的跳转。链接内容可以是一个字、一个词或者一组词，也可以是一幅图，你可以点击这些内容跳转到新的页面。属性如下：

属性名	类型	默认值	说明	最低版本
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram	2.0.7
url	String		当前小程序内的跳转链接，链接地址为需要跳转页面的相对地址
open-type	String	navigate	跳转方式
delta	Number		当open-type为’navigateBack’时有效，表示退回的层数
app-id	String		当target=‘miniProgram’时有效，要打开小程序的AppId	2.0.7
path	String		当target=‘miniProgram’时有效，打开页面路径，如果为空则打开首页	2.0.7
extra-data	Object		当target=‘miniProgram’时有效，需要传递目标小程序的数据，目标小程序可在App.onLaunch（），App.onShow（）中获取到这份数据	2.0.7
version	version	release	当target=‘miniProgram’时有效，要打开小程序的版本，有效值develop（开发板），trial（体验版），release（正式版），仅在当前小程序为开发板或体验版时参数有效；如果当前版本为正式版，则打开的小程序必定是正式版。	2.0.7
hover-class	String	navigator-hover	指点击时的样式类，当hover-class=‘none’时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	Number	50	按住后多久出现点击态，单位ms
hover-stop-time	Number	600	手指松开后点击态的保持时间，单位面ms
bindsucces	String		当target=‘miniProgram’是有效，跳转小程序成功	2.0.7
bindfail	String		当target=‘miniProgram’时有效，跳转小程序失败	2.0.7
bingcomplete	String		当target=‘miniProgram’时有效，跳转小程序完成	2.0.7

其中属性open-type有效值如下：

值	说明
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

其中属性target有效值如下：

值	说明
sele	当前小程序
miniProgram	其他小程序

示例代码：

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

使用限制

1、需要用户确认跳转从 2.3.0 版本开始，在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel。
2、每个小程序可跳转的其他小程序数量限制为不超过 10 个从 2.4.0 版本以及指定日期（具体待定）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见配置。调用此接口时，所跳转的 appId 必须在配置列表中，否则回调 fail appId “${appId}” is not in navigateToMiniProgramAppIdList

功能页导航

功能页导航（functional-page-navigator）这个组件从小程序基础库版本2.1.0开始支持，但仅在插件自定义中有效，用于跳转到插件功能页。该组件的属性：

属性名	类型	默认值	说明	最低版本
version	String	release	跳转到的小程序版本，有效值develop（开发板），trial（体验版），release（正式版）；线上版本必须设置为release	2.1.0
name	String		要跳转到的功能页	2.1.0
args	Object	null	功能页参数，参数格式与具体功能页有关	2.1.0
bindsuccess	eventhandler		功能页返回，且操作成功时触发， detail 格式与具体功能页相关	2.1.0
bindfail	eventhandler		功能页返回，且操作失败时触发， detail 格式与具体功能页相关	2.1.0
bindcancel	eventhandler		因用户操作从功能页返回时触发	2.4.1

属性name 的合法值

值	说明	最低版本
loginAndGetUserInfo	用户信息功能页	2.1.0
requestPayment	支付功能页 2.1.0
chooseAddress	收货地址功能页	2.4.0

Bug & Tip
1、tip: 功能页是插件所有者小程序中的一个特殊页面，开发者不能自定义这个页面的外观。
2、tip: 在功能页展示时，一些与界面展示相关的接口将被禁用（接口调用返回 fail ）。
3、tip: 这个组件本身可以在开发者工具中使用，但功能页的跳转目前不支持在开发者工具中调试，请在真机上测试。
示例代码

<!-- sample.wxml -->
<functional-page-navigator name="loginAndGetUserInfo" bind:success="loginSuccess">
  <button>登录到插件</button>
</functional-page-navigator>


// redirect.js navigator.js
Component({
  methods: {
    loginSuccess: function(e) {
      console.log(e.detail.code) // wx.login 的 code
      console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo
    }
  }
})