1. 程式人生 > >微信小程式之頁面跳轉、傳參

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

年前最後一天上班了,公司幾個人在上班,沒事做,還是來學習一下小程式吧。
本部落格說一下頁面跳轉,頁面跳轉又分為三種:跳轉新頁面,當前頁面跳轉及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
    })
  }
})

佈局如下:

<view style="text-align:center"> {{title}} </view>

圖示:
這裡寫圖片描述

以上是直接在佈局裡面跳轉,還可以通過程式碼來做到。
具體細說一下:
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: 1
})

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