微信小程序 頁面跳轉 的四種方法


第一種:wx.navigateTo

保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

聲明式:

/**
   * 不帶參數
   */
<navigator url="/pages/home/home" hover-class="none">點擊跳轉</navigator>
/**
   * 帶參數
   */
<navigator url="/pages/home/home?title=1&time=1234" hover-class="none">點擊跳轉</navigator>

編程式:

//不帶參數
wx.navigateTo({
        url: "/pages/home/home"
      })
//帶參數
wx.navigateTo({
      url: '/pages/home/home?name=' + this.data.name + '&age=' + this.data.age
    })

 

第二種:wx.redirectTo

關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html

編程式:

//不帶參數
wx.redirectTo({
  url: '/pages/home/home'
})
//帶參數
wx.redirectTo({
  url: '/pages/home/home?id=1&name='+this.data.name
})

 

第三種:wx.navigateBack

關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧,決定需要返回幾層。

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

編程式:

//返回上一頁
wx.navigateBack({
  delta: 1
})

 

第四種:wx.reLaunch

關閉所有頁面,打開到應用內的某個頁面

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html

編程式:

//不帶參數
wx.reLaunch({
   url: '/pages/home/home'
 })
//帶參數
wx.reLaunch({
  url: '/pages/home/home?id=1&name='+this.data.name
})

 

跳轉的頁面,統一在 onLoad 的 options 中獲取參數

onLoad: function (options) {
    console.log(options)
  },

 


免責聲明!

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



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