微信小程序学习笔记三 路由的基本使用

时间：2024-03-01 21:05:24

微信小程序学习笔记三 路由的基本使用

小程序中路由的使用

1.1 页面路由

  • 在小程序中, 所有页面的路由全部由框架进行管理

1.2 页面栈

  • 框架以栈的形式维护了当前的所有页面, 当发生路由切换的时候, 页面栈的表现如下:
    在这里插入图片描述

1.3 获取当前页面栈

  • 开发者可以使用 getCurrentPages() 函数获取当前页面栈。
<!--page/index/index.wxml-->
 <view bindtap="getThieRoute">
    <text> 点击获取当前路由路径 </text>
 </view>

// page/index/index.js
Page({
  getThieRoute(){
	let thisRoute = getCurrentPages();
    console.log(thisRoute[0].route);
  }
})

在这里插入图片描述

1.4 路由方式

  • 对于路由的触发方式以及页面生命周期函数如下：
路由方式 触发时机 路由前路由 路由后路由
初始化 小程序打开的第一个页面 -- onLoad,onShow
打开新页面 调用APIwx.navigateTo onHide onLoad,onShow
页面重定向 调用APIwx.redirectTo onUnload onLoad,onShow
Tab切换 调用APIwx.switchTab
用户切换 Tab
重启动 调用APIwx.reLaunch onUnload onLoad,onShow

1.5 简单实现

  • 点击跳转按钮, 从当前index.wxml页面进入到login.wxml页面

  • 定义如下代码:

 <!-- 路由跳转测试 -->
  <view class="goStudy" bindtap="toLogs">
    <text>{{message}}</text>
  </view>

Page({
// 跳转至logs页面的方法
  toLogs() {
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },
})

在这里插入图片描述

注意事项

  • navigateTo,redirectTo只能打开非tabBar页面
  • switchTab只能打开tabBar页面
  • reLaunch可以打开任意页面
  • 页面底部的tabBar由页面决定, 即只要是定义为tabBar的页面, 底部都有tabBar
  • 调用页面路由带的参数可以在目标页面的onLoad中获取

相关文章