微信小程式之頁面跳轉、傳參

年前最後一天上班了，公司幾個人在上班，沒事做，還是來學習一下小程式吧。

本部落格說一下頁面跳轉，頁面跳轉又分為三種：跳轉新頁面，目前頁面跳轉及tab跳轉。

先來看看navigator相關屬性：

直接代碼說話：

首頁面：

<!--index.wxml-->
<view class="btn-area">
  <navigator url="../navigator/navigator?title=這是跳轉新的頁面&&what=laiba" hover-class="navigator-hover">跳轉到新頁面</navigator>
  <navigator url="../navigator/redirect?title=這是目前頁面跳轉&&what=重定向" open-type="redirect" hover-class="other-navigator-hover">在目前頁打開</navigator>
  <navigator url="../logs/logs" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
</view>
           

這裡是帶參跳轉的，一個參數就用?=title,如果多個參數就是用?=title=”“&ohterParmas=”“。

那如何在新頁面接收傳過去的參數呢？很簡單，在onLoad函數裡面來接收，如下：

navigator.js

Page({
  data:{

  },
  onLoad:function(options){
    // 生命周期函數--監聽頁面加載
     this.setData({
      title: options.title,
      what : options.what
    })
  }
})
           

目前頁面跳轉也是一樣的

redirect.js

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

布局如下：

圖示：

以上是直接在布局裡面跳轉，還可以通過代碼來做到。

具體細說一下：

wx.navigateTo(OBJECT)

保留目前頁面，跳轉到應用内的某個頁面，使用wx.navigateBack可以傳回到原頁面。

OBJECT 參數說明：

wx.navigateTo({
      url: '../navigator/redirect'
    })
  }
           

同樣的道理可以帶參數。

注意：為了不讓使用者在使用小程式時造成困擾，我們規定頁面路徑隻能是五層，請盡量避免多層級的互動方式。

wx.redirectTo(OBJECT)

關閉目前頁面，跳轉到應用内的某個頁面。

OBJECT 參數說明：

wx.redirectTo({
      url: '../navigator/redirect'
    })
           

wx.switchTab(OBJECT)

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面

OBJECT 參數說明：

wx.switchTab({
      url: '../logs/logs'
    })
           

wx.navigateBack(OBJECT)

關閉目前頁面，傳回上一頁面或多級頁面。可通過 getCurrentPages()) 擷取目前的頁面棧，決定需要傳回幾層。

OBJECT 參數說明：

//傳回上一個頁面
wx.navigateBack({
  delta: 
})
           

關于跳轉就基礎的這麼多了。