微信小程序-導航 & 路由
頁面跳轉
頁面路由
頁面棧, 框架以
棧的形式維護了當前的所有頁面。
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
使用 getCurrentPages() 函數獲取當前頁面棧。
// pages/base/index.js
const log = console.log;
const err = console.error;
log(`getCurrentPages() 獲取當前頁面棧 base`, getCurrentPages());
// pages/base/index.js
const log = console.log;
const err = console.error;
log(`getCurrentPages() 獲取當前頁面棧 base`, getCurrentPages());
Page({
/**
* 頁面的初始數據
*/
data: {
msg: "小程序-基礎頁面",
img: "/images/peppa-pig.jpeg",
arr: ["A", "B", "C",],
list: [
{
name: "xgqfrms",
age: 23,
},
{
name: "China",
age: 5000,
},
{
name: "USA",
age: 200,
},
],
isLogin: true,
count: 0,
},
clickAdd: function (e) {
console.log(`this =`, this);
console.log(`\nevent =`, e);
// this.data.count = this.data.count + 1;
this.setData({
count: this.data.count + 1,
});
},
add (e) {
console.log(`this =`, this);
console.log(`\nevent =`, e);
// ye {__wxExparserNodeId__: "fa2cbe59", __route__: "pages/base/index", route: "pages/base/index", __displayReporter: g, clickAdd: ƒ, …}
this.setData({
count: this.data.count + 1,
});
},
// add: (e) => {
// arrow function this bug ❌
// console.log(`this =`, this);
// // this = undefined
// console.log(`\nevent =`, e);
// this.setData({
// count: this.data.count + 1,
// });
// },
clickBox () {
console.log(`click box`);
},
clickItem () {
console.log(`click item`);
},
dataset (e) {
// console.log(`e.currentTarget === e.target`, e.currentTarget === e.target, e);
// object !== object
const dataset = e.currentTarget.dataset;
console.log(`dataset =`, dataset);
// dataset = {uid: "123"}
console.log(`uid =`, dataset.uid);
// uid = 123
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
log(`%c小程序 頁面的生命週期: %conLoad`, `color: #f00;`, `color: #f0f;`);
log(`options =`, options);
log(`getCurrentPages() 獲取當前頁面棧 ⚾️`, getCurrentPages());
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
log(`%c小程序 頁面的生命週期: %conReady`, `color: #f00;`, `color: #f0f;`);
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
log(`%c小程序 頁面的生命週期: %conShow`, `color: #f00;`, `color: #f0f;`);
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
log(`%c小程序 頁面的生命週期: %conHide`, `color: #f00;`, `color: #f0f;`);
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
log(`%c小程序 頁面的生命週期: %onUnload`, `color: #f00;`, `color: #f0f;`);
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
log(`%c小程序 頁面的生命週期: %oonReachBottom`, `color: #f00;`, `color: #f0f;`);
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
log(`%c小程序 頁面的生命週期: %oonShareAppMessage`, `color: #f00;`, `color: #f0f;`);
}
})
navigateTo
- 調用 API
wx.navigateTo
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
wx.navigateTo({
url: 'test?id=1',
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)
})
}
})
- 使用組件
<navigator open-type="navigateTo"/>
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<!-- sample.wxml -->
<view class="btn-area">
<navigator
url="/page/navigate/navigate?title=navigate"
hover-class="navigator-hover">
跳轉到新頁面
</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect"
open-type="redirect"
hover-class="other-navigator-hover">
在當前頁打開
</navigator>
<navigator url="/page/index/index"
open-type="switchTab"
hover-class="other-navigator-hover">
切換 Tab
</navigator>
<navigator target="miniProgram"
open-type="navigate"
app-id=""
path=""
extra-data=""
version="release">
打開綁定的小程序
</navigator>
</view>
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 點擊左上角, 返回回到, 之前頁面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 點擊左上角, 返回回到, 上級頁面 </view>
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
redirectTo
switchTab
reLaunch
Tips:
navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
調用頁面路由攜帶的參數可以在目標頁面的 onLoad 生命週期函數中獲取。
refs
©xgqfrms 2012-2020
www.cnblogs.com 發佈文章使用：只允許註冊用戶纔可以訪問！