小程序頁面間跳轉與傳值


小程序的頁面間跳轉非常簡單,微信官方提供了navigator 標簽。

這個標簽可以實現小程序內的頁面間跳轉,也可以實現小程序之間的跳轉。

有幾個主要的參數

  • url :要跳轉的路徑。指向當前小程序內的跳轉鏈接。
  • target : 跳轉方式,默認值為 self,擁有以下幾個合法值: self - 當前小程序 miniProgram - 其他小程序 

指定url后已經可以實現頁面間跳轉。

  <navigator url='../list/list' hover-class='none'>
    <button>跳轉</button>
  </navigator>

使用此標簽后,此標簽默認會有一個點擊高亮。但是那個高亮比較丑。如果希望自己實現一個點擊高亮的話,可以使用hover-class='none' 來禁用掉原本的高亮。

在這里,url所指向的路徑為相對路徑。

如此已經能夠實現跳轉,且跳轉后小程序會自動為我們添加一個返回按鈕。

可以直接通過這個按鈕來返回上一層。在這里需要說明一下,開發文檔中提到了,這種跳轉的嵌套最多只能嵌套十層。也就是說最好不要有過多的頁面間嵌套。

我們經常會需要在跳轉頁面的同時傳遞一些參數。小程序傳參的方式也非常簡單。

<navigator url='../list/list?p1=123&p2=456' hover-class='none'>
    <button>跳轉</button>
</navigator>

直接像web開發一樣在地址欄后邊跟上參數即可。連接和參數之間使用 ? 隔開,參數之間使用 & 隔開。

需要注意的是,小程序只是借鑒了網頁開發的部分內容,其本質並不是網頁,沒有瀏覽器對象,沒有session,只是借鑒了一些開發方式而已,千萬不要混為一談了。

接收參數時可以在 onLoad 事件中寫,這個鈎子會監聽頁面的加載。

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(params) {
  this.setData({
    p1:params.p1,
    p2:params.p2
  })
}

小程序會在傳參的過程中吧你所有傳遞的參數封裝為一個對象,接收參數頁面使用 params 來接收,取值直接使用 params.參數名稱 即可

如果打算在小程序之間跳轉的話。

首先要將 target 屬性設置為 miniProgram 。不設置的話默認值為 self ,即當前小程序。

其次需要幾個小程序內跳轉不需要的參數:

  • app-id :需要跳轉的小程序的APPID,該值僅在 target 屬性為 miniProgram 時有效。
  • path :指定打開需要跳轉的小程序的那個頁面,若為空則默認打開首頁,該值僅在 target 屬性為 miniProgram 時有效。
  • extra-data :所傳遞的參數,需要寫在該屬性中。獲取數據的方式不變。所傳遞參數必須為 object 類型
  • bindsuccess :指定小程序跳轉成功時調用的方法。
  • bindfail :小程序跳轉失敗時調用的方法。
  • bindcomplete :跳轉完成時調用的方法。

參考文獻:微信小程序官方API


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM