分类： 导航

基础库 1.0.0 开始支持，低版本需做兼容处理。

微信小程序插件：支持，需要微信小程序基础库版本不低于 2.1.0

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

渲染框架支持情况：Skyline （使用最新 Nightly 工具调试）、WebView

功能描述

页面链接。

1. navigator 在 Skyline 下视为文本节点，只能嵌套文本节点（如 text），不能嵌套 view、button 等普通节点，如 <button> <navigator>foo</navigator> </button>
   
2. 新增 span 组件用于内联文本和图片，如 <span> <image> </image> <navigator>bar</navigator> </span>

通用属性

使用限制

1. 需要用户确认跳转 从 2.3.0 版本开始，在跳转至其他微信小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他微信小程序。如果用户点击取消，则回调 fail cancel。
2. 从2020年4月24日起，跳转其他微信小程序将不再受数量限制，使用此功能时请注意遵守运营规范。

关于调试

• 在开发者工具上调用此 API 并不会真实的跳转到另外的微信小程序，但是开发者工具会校验本次调用跳转是否成功。详情
• 开发者工具上支持被跳转的微信小程序处理接收参数的调试。详情

Bug & Tip

1. tip：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色

示例代码

在开发者工具中预览效果

.navigator-hover {
  color:blue;
}
.other-navigator-hover {
  color:red;
}

<!-- sample.wxml -->
<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>

<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})