navigator 页面导航

解释:页面链接,控制小程序的跳转,既可在当前小程序内部进行跳转,也可跳转至其他小程序。navigator 的子节点背景色应为透明色。

# 属性说明

属性名 类型 默认值 必填 说明 最低版本
target String self 在哪个目标上发生跳转,默认当前小程序,有效值 self/miniProgram 2.5.2
低版本请做兼容性处理
url String 应用内的跳转链接 -
open-type String navigate 跳转方式 -
delta Number 当 open-type 为 'navigateBack' 时有效,表示回退的层数 -
app-id String 当 target="miniProgram"时有效,要打开的小程序 App Key (小程序后台设置-开发设置中) 2.5.2
低版本请做兼容性处理
path String 当 target="miniProgram"时有效,打开的页面路径,如果为空则打开首页。 2.5.2
低版本请做兼容性处理
extra-data Object 当 target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情 2.5.2
低版本请做兼容性处理
version String release 当 target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 2.5.2
低版本请做兼容性处理
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"时有效,跳转小程序成功。 2.5.2
低版本请做兼容性处理
bindfail String 当 target="miniProgram"时有效,跳转小程序失败。 2.5.2
低版本请做兼容性处理
bindcomplete String 当 target="miniProgram"时有效,跳转小程序完成。 2.5.2
低版本请做兼容性处理

# target 有效值

说明
self 当前小程序
miniProgram 跳转到另一个小程序

# version 有效值

说明
develop 开发版
trial 体验版
release 正式版

# open-type 有效值

说明 最低版本
navigate 对应 swan.navigateTo 的功能
redirect 对应 swan.redirectTo 的功能
switchTab 对应 swan.switchTab 的功能
navigateBack 对应 swan.navigateBack 的功能
reLaunch 对应 swan.reLaunch 的功能
exit 退出小程序,target="miniProgram"时生效 2.5.2

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 1

    <view class="wrap">
        <view class="card-area">
            <button type="primary">
                <navigator 
                    target="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">
                <navigator 
                    s-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">
                <navigator 
                    s-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">
                <navigator 
                    s-if="{{!isWeb}}" 
                    target="miniProgram" 
                    open-type="exit">
                    退出当前小程序
                </navigator>
            </button>
            
            <button type="primary">
                <navigator 
                    target="self" 
                    open-type="switchTab" 
                    url="/entry/component/component">
                    打开一个有Tab的页面
                </navigator>
            </button>
    
            <button type="primary">
                <navigator 
                    target="self" 
                    open-type="reLaunch" 
                    url="/component/detail/detail?id=新页面,点击左上角返回回到上级菜单">
                    关闭所有页面打开新页面
                </navigator>
            </button>
    
            <button type="primary">
                <navigator 
                    target="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>
    
    Page({
        data: {},
        successHandler(e) {
            console.log('success', e.detail.errMsg);
        },
        failHandler(e) {
            console.log('fail', e.detail.errMsg);
        },
        completeHandler(e) {
            console.log('complete', e.detail.errMsg);
        }
    });
    

    # 参考示例

    # 参考示例 1: 接收 H5 页传过来的参数

    • 在 index 文件中
      <view class="wrap">
          <button type="primary">
              <navigator 
                  target="self" 
                  open-type="navigate" 
                  url="/detail/detail?webViewUrl=https://smartprogram.baidu.com&Math.radom()" hover-class="navigator-hover" 
                  hover-stop-propagation="true">
                  跳转到新页面
              </navigator>
          </button>
      </view>
      
      • 在 detail 文件中
        <web-view src="{{url}}"></web-view>
        
        Page({
            data: {
                src: ''
            },
           //接收H5页传过来的参数
            onLoad(options) {
                this.setData({'src': options.webViewUrl})
            },
            onShow(){
                this.onLoad()
            }
        });
        

        # 说明

        navigator-hover 默认为:

          {
              background-color: rgba(0, 0, 0, 0.1);
              opacity: 0.7;
          }
          

          # 常见问题

          # Q:请问下如何关闭小程序

          A: 可以通过组件进行关闭当前小程序的操作。

          代码示例

          <button type="primary">
              <navigator target="miniProgram" open-type="exit">退出当前小程序</navigator>
          </button>