百度智能小程序 页面导航

navigator 页面导航

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

属性说明

target 有效值

version 有效值

open-type 有效值

示例 

在开发者工具中打开

代码示例 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>