uni-app 微信小程序开发：常用函数总结（一）

一、 getCurrentPages()：获取当前页面栈的实例

1. 定义

getCurrentPages() 是微信小程序原生提供的全局函数，用于获取当前页面栈的实例。页面栈是一个数组，记录了从小程序启动到当前页面依次打开的所有页面。

在 Uniapp 中，我们可以直接在 .vue 文件中调用此方法，也可以通过 uni.$emit 等方式结合使用。

核心特点：

返回值：返回一个数组，数组中第一个元素为首页，最后一个元素为当前页面。
实时性：获取的是当前真实的页面栈状态。

2. 基础用法

如何获取数据：

假设我们的应用从首页启动，然后跳转到了详情页。此时页面栈长度为 2。

javascript 复制代码

// 在详情页
const pages = getCurrentPages();

console.log(pages.length); // 输出: 2

// 获取当前页面实例
const currentPage = pages[pages.length - 1];
console.log(currentPage.route); // 输出: 'pages/detail/detail'

// 获取上一个页面实例
const prevPage = pages[pages.length - 2];
console.log(prevPage.route); // 输出: 'pages/index/index'

3. 实战场景

如何使用？

在实际开发中，getCurrentPages() 并不是单纯用来打日志的，它在以下三个场景中有着不可替代的作用。

场景 1：页面返回时的数据传递（最常用）

痛点：小程序并没有像 Vue 的 $emit 那么方便的跨页面通信机制。比如，从"编辑页面"返回"个人中心页面"，需要刷新用户数据。

传统做法：使用全局变量或 Storage，但这不够优雅，且有时序问题。

getCurrentPages() 解法：直接修改上一页的数据。

javascript 复制代码

// 页面 B (编辑页面)
export default {
  methods: {
    saveNickname() {
      const pages = getCurrentPages();
      // 获取上一个页面实例
      const prevPage = pages[pages.length - 2];
      
      // 【关键点】直接调用上一页的方法或修改数据
      if (prevPage) {
        // 假设上一页有 updateUserInfo 方法
        // 注意：在 Uniapp 中，prevPage 实例直接对应 Vue 组件的 this
        prevPage.updateUserInfo({ nickname: '新名字' });
        
        // 或者直接修改上一页的 data (Vue2 写法)
        // prevPage.$vm.userInfo = '新名字'; 
      }
      
      uni.navigateBack();
    }
  }
}

场景 2：动态设置导航栏标题

有时我们需要根据接口返回的数据动态设置当前页面的标题。

javascript 复制代码

const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];

// 通过微信原生 API 设置
uni.setNavigationBarTitle({
  title: currentPage.data.dynamicTitle || '默认标题'
});

场景 3：判断页面栈深度，防止"循环地狱"

在使用 uni.navigateTo 时，微信小程序保留了最大 10 层的页面栈限制。如果用户反复点击跳转，很容易触达上限导致报错。

我们可以封装一个安全跳转方法：

javascript 复制代码

function safeNavigateTo(url) {
  const pages = getCurrentPages();
  
  // 判断页面栈是否即将超过 10 层
  if (pages.length >= 10) {
    // 此时建议使用 reLaunch 关闭所有页面打开新页面
    // 或者使用 redirectTo 关闭当前页面
    uni.redirectTo({ url });
  } else {
    uni.navigateTo({ url });
  }
}

4. 注意事项

Vue2 与 Vue3 的差异

这是 Uniapp 开发者最容易踩坑的地方。随着 Uniapp 对 Vue3 的支持，获取到的页面栈实例结构发生了变化。

(1) Vue2 环境下

getCurrentPages() 返回的数组元素直接就是页面的实例，你可以直接访问 this 下的属性和方法。

javascript 复制代码

// Vue2
const prevPage = pages[pages.length - 2];
prevPage.myMethod(); // 直接调用
console.log(prevPage.myData); // 直接访问

2. Vue3 环境下 (重要!)

在 Vue3 的 Uniapp 项目中，为了适配 Vue3 的响应式原理，获取到的页面实例结构有所不同。

返回的对象通常包含一个 $vm 属性，这才是真正的 Vue 组件实例。

javascript 复制代码

// Vue3
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];

// 获取真正的 Vue 实例
const instance = currentPage.$vm; 

// 调用方法或修改数据
instance.myMethod();
instance.myData = 'new value';

注意：如果你在 Vue3 环境下直接操作 currentPage.setData，虽然也能生效（渲染层），但无法触发 Vue 的响应式更新，且可能导致数据不一致。务必通过 $vm 操作。