微信小程式的路由跳轉和傳遞引數

DJxyyy發表於2020-10-22

微信小程式的路由跳轉和傳遞引數

路由跳轉:
1、wx.switchTab(Object object)跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面
//例子如下

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
傳參的話可以直接拼接
var id=10
  url: '/pages/index/index?id='+id
})

2、wx.reLaunch(Object object)關閉所有頁面,開啟到應用內的某個頁面

wx.reLaunch({
  url: '/pages/index/index?id=10'
})
// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

3、wx.redirectTo(Object object)關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。

wx.redirectTo({
  url: '/pages/home/hone?id=1'
})
//接收引數
Page({
  onLoad (option) {
    console.log(option.id)
  }
})

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

wx.navigateTo({
  url: '/pages/index/index?id=100',
  events: {
    // 為指定事件新增一個監聽器,獲取被開啟頁面傳送到當前頁面的資料
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通過eventChannel向被開啟頁面傳送資料
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 監聽acceptDataFromOpenerPage事件,獲取上一頁面通過eventChannel傳送到當前頁面的資料
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

5、wx.navigateBack(Object object)關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧,決定需要返回幾層。

// 注意:呼叫 navigateTo 跳轉時,呼叫該方法的頁面會被加入堆疊,而 redirectTo 方法則不會。見下方示例程式碼

// 此處是home頁面
wx.navigateTo({
  url: 'B?id=1'
})

// 此處是carts頁面
wx.navigateTo({
  url: 'C?id=1'
})

// 在Classify頁面內 navigateBack,將返回A頁面
wx.navigateBack({
  delta: 2
})

當然了也可以到我們微信的官方文件去檢視 點選下方超連結
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

相關文章