微信小程式的路由跳轉和傳遞引數
微信小程式的路由跳轉和傳遞引數
路由跳轉:
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
相關文章
- 微信小程式開發系列 (四) :微信小程式的頁面跳轉路由設計微信小程式路由
- 微信開發之小程式頁面間如何傳遞引數
- 微信小程式_跳轉方式微信小程式
- 微信小程式跳轉方式微信小程式
- 微信小程式中的值傳遞微信小程式
- 路由元件傳遞引數路由元件
- 微信小程式攜帶引數跳轉頁面/獲取頁面棧微信小程式
- 微信小程式中頁面間跳轉傳參方式微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式之間的跳轉及如何傳參互動微信小程式
- mp-vue微信小程式多層路由跳轉問題覆盤Vue微信小程式路由
- apicloud拉起小程式並傳遞引數APICloud
- 微信小程式路由微信小程式路由
- 微信小程式資料傳遞總結微信小程式
- 微信小程式 跳坑微信小程式
- 引數的定義和引數的傳遞
- 微信小程式父子元件之間的資料傳遞微信小程式元件
- 簡訊跳轉微信小程式有哪些好處?微信小程式
- 向路由元件傳遞引數2種方法路由元件
- 記一次微信小程式轉位元組跳動小程式的經驗微信小程式
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- React 小案例 路由跳轉React路由
- 引數傳遞
- Flutter 基礎(十二)路由(頁面跳轉)與資料傳遞Flutter路由
- Flutter基礎(十二)路由(頁面跳轉)與資料傳遞Flutter路由
- 微信跳轉_跳轉微信原理 weixin://dl/business/?ticket=xxx
- 詳解vue 路由跳轉四種方式 (帶引數)Vue路由
- JS的方法引數傳遞(按值傳遞)JS
- Mybatis引數傳遞MyBatis
- 請求引數的傳遞
- 函式的引數傳遞函式
- pytest的資料驅動和引數傳遞
- 微信小程式 圖片上傳微信小程式
- 微信小遊戲跳一跳外掛輔助程式遊戲
- 微信小程式:抽獎轉盤微信小程式
- React事件傳遞引數React事件
- C++引數的傳遞方式C++
- 微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫微信小程式元件函式