百度智能小程序 頁面導航

navigator 頁面導航

解釋：頁面鏈接，控制小程序的跳轉，既可在當前小程序內(nèi)部進行跳轉，也可跳轉至其他小程序。navigator 的子節(jié)點背景色應為透明色。

屬性說明

target 有效值

version 有效值

open-type 有效值

示例 

在開發(fā)者工具中打開

代碼示例 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 頁傳過來的參數(shù)

在開發(fā)者工具中打開

• 在 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頁傳過來的參數(shù)
      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>