微信小程序-导航 & 路由
页面跳转
页面路由
页面栈, 框架以
栈的形式维护了当前的所有页面。
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(`
event =`, e);
// this.data.count = this.data.count + 1;
this.setData({
count: this.data.count + 1,
});
},
add (e) {
console.log(`this =`, this);
console.log(`
event =`, 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(`
event =`, 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 发布文章使用：只允许注册用户才可以访问！