uni-app页面互动魔法指南

最新推荐文章于 2025-11-01 20:49:05 发布

原创

最新推荐文章于 2025-11-01 20:49:05 发布 · 1k 阅读

标签

#uni-app

🌈 uni-app页面互动魔法指南

🏰 全局总管与其魔法使者

想象一下，uni-app的世界是一座魔法城堡，在这座城堡里，有着不同的角色和神奇的通信方式。让我们一起探索这个奇妙世界的运作方式！

1️⃣ getApp() - 城堡总管的直通电话

┌───────────────────────────────────┐
│           应用城堡               │
└─────────────────┬─────────────────┘
                  │
                  ▼
        ┌───────────────────┐
        │    城堡总管       │
        │   (App实例)      │
        └─────────┬─────────┘
                  │
        ┌─────────▼─────────┐
        │  总管的笔记本     │
        │  (globalData)    │
        └───────────────────┘
              ▲     ▲     ▲
              │     │     │
        ┌─────┴───┐ ┌─────┴───┐ ┌─────┴───┐
        │ 厨房页面 │ │ 花园页面 │ │ 卧室页面 │
        │(Page 1) │ │(Page 2) │ │(Page 3) │
        └─────────┘ └─────────┘ └─────────┘

**getApp()**就像是城堡里的直通电话，任何页面都可以通过它直接联系到城堡总管(App实例)，获取总管手中的万能笔记本(globalData)。

生活类比：想象你在一个大公司工作，公司里有一位万事通的总管理。当你需要了解整个公司的信息时，你可以直接打电话给这位总管理，获取你需要的信息。getApp()就是这个直通电话按钮！

代码示例：

// 在任意页面获取应用实例
const app = getApp();

// 访问全局数据
const userData = app.globalData.userInfo;
console.log('当前登录用户：', userData.nickname);

// 调用应用实例中的方法
app.globalMethod();

最佳实践：

不要滥用globalData，它就像公共场所的布告栏，放太多信息会变得混乱
适合存储用户信息、配置设置、主题颜色等全局共享的数据
小程序中不能在App()前调用getApp()，就像总管还没上班，电话打不通

2️⃣ getCurrentPages() - 城堡访客记录簿

┌───────────────────────────────────────────────────┐
│                  页面访问历史栈                   │
└───────────────────────┬───────────────────────────┘
                        │
┌───────────┐   ┌───────▼───────┐   ┌───────────┐   ┌───────────┐
│ 首页      │──▶│ 列表页        │──▶│ 详情页    │──▶│ 评论页    │
│ 索引: 0   │   │ 索引: 1       │   │ 索引: 2   │   │ 索引: 3   │
└───────────┘   └───────────────┘   └───────────┘   └─────┬─────┘
       ▲                                                   │
       │                                                   │
       └───────────────────────────────────────────────────┘
                         当前页面(最后一个)

**getCurrentPages()**就像查看城堡的访客记录簿，它会告诉你访客(你自己)是如何从大门一路走到当前房间的，以及中间经过了哪些房间。

生活类比：想象你在逛一个复杂的商场，从入口开始，你经过了服装区、餐饮区，现在站在电影院。getCurrentPages()就像你手机上的行程记录，显示你的完整逛街路径。

代码示例：

// 获取页面栈
const pages = getCurrentPages();

// 获取当前页面
const currentPage = pages[pages.length - 1];
console.log('当前页面路径：', currentPage.route);

// 获取上一个页面
if (pages.length > 1) {
   
   
  const prevPage = pages[pages.length - 2];
  // 直接操作上一个页面的数据
  prevPage.setData({
   
    returnedValue: '我带回来的数据' });
}

实用场景：

返回上一页并传值：比如从商品详情页返回列表页，告诉列表页"这个商品已加入购物车"
获取页面路径信息：了解用户当前在哪个页面，从哪里来
页面层级判断：根据页面栈的深度决定是否显示"返回首页"按钮

3️⃣ uni.emit/on - 城堡的魔法信鸽传书系统

┌───────────────────────────────────────────────────┐
│                 事件通信系统                      │
└───────────────────────┬───────────────────────────┘
                        │
                        ▼
              ┌────────────────────┐
              │     事件中心       │
              │  (Event Center)    │
              └─────────┬──────────┘
                        │
         ┌──────────────┴───────────────┐
         │                              │
         ▼                              ▼
┌─────────────────┐              ┌──────────────────┐
│  发送者页面     │              │   接收者页面     │
│  uni.emit()     │              │   uni.on()       │
└─────────────────┘              └──────────────────┘
       │                                 ▲
       │         ┌──────────────┐        │
       └────────▶│ 事件: 'hello'│────────┘
                 │ 数据: {msg}  │
                 └──────────────┘

**uni.emit和uni.on**就像城堡里的魔法信鸽传书系统。任何房间(页面)都可以放飞一只信鸽(emit事件)，而其他设置了接收点(on监听)的房间都能收到这只信鸽带来的消息。

生活类比：想象一个大家庭的微信群。当妈妈在群里发消息"晚餐准备好了"(emit事件)，所有群成员(监听这个事件的页面)都能看到这条消息并作出反应。

代码示例：

// 在A页面发送事件和数据
uni.emit('productSelected', {
   
   
  id: 'p001',
  name: '智能手表',
  price: 1299
});

// 在B页面监听事件
uni.on('productSelected', function(data) {
   
   
  console.log(`用户选择了商品：${
     
     data.name}，价格：${
     
     data.price}元`);
  this.setData({
   
   
    selectedProduct: data
  });
});

4️⃣ uni.once - 一次性魔法传书

┌───────────────────────────────────────────────────┐
│                一次性事件监听                     │
└───────────────────────┬───────────────────────────┘
                        │
                        ▼
              ┌────────────────────┐
              │  事件中心          │
              │  (Event Center)    │
              └─────────┬──────────┘
                        │
         ┌──────────────┴───────────────┐
         │                              │
         ▼                              ▼
┌─────────────────┐              ┌──────────────────┐
│  发送者         │              │   接收者         │
│  uni.emit()     │              │   uni.once()     │
└─────────────────┘              └──────────────────┘
       │                                 ▲
       │       ┌──────────────────┐      │
       │       │  首次事件触发     │      │
       └──────▶│  (监听器接收)    ├──────┘
               └──────────────────┘
                        │
                        ▼
               ┌─────────────────┐
               │  监听器自动移除  │
               └─────────────────┘
                        │
                        ▼
               ┌─────────────────┐
               │ 后续相同事件    │
               │ (不再响应)      │
               └─────────────────┘

**uni.once**就像一次性的魔法信鸽接收站。它只会接收第一只带着特定信息的信鸽，接收后立即关闭接收站，之后再有同样的信鸽飞来也不会理会。

生活类比：就像你告诉朋友"第一个看到老板进办公室的人给我发个消息，我好立刻回去"。收到一次通知后，这个请求就自动"过期"了，不会有人继续通知你老板的动向。

代码示例：

// 设置一次性监听，只会执行一次
uni.once('firstLogin', function(userData) {
   
   
  // 只在用户首次登录时显示引导
  console.log(`欢迎新用户：${
     
     userData.name}！`);
  showNewUserGuide();
});

// 在登录成功后触发事件
uni.emit('firstLogin', {
   
   
  name: '张三',
  registerTime: new Date().toLocaleString()
});

// 再次触发同一事件，不会有响应
setTimeout(() => {
   
   
  uni.emit('firstLogin', {
   
    name: '张三' }); // 无效，不会触发任何监听器
}, 3000);

5️⃣ uni.$off - 魔法信鸽的接收站关闭

┌───────────────────────────────────────────────────┐
│                   移除事件监听                    │
└───────────────────────┬───────────────────────────┘
                        │
                        ▼
              ┌────────────────────┐
              │  事件中心          │
              │  (Event Center)    │
              └─────────┬──────────┘
                        │
                        │    
                  ┌─────▼────┐  
                  │ uni.$off │  
                  └─────┬────┘
                        │
          ┌─────────────┴─────────────┐
          │                           │
          ▼                           ▼
┌────────────────────┐      ┌────────────────────┐
│ 移除特定事件的     │      │ 移除特定事件的     │
│ 特定监听器         │      │ 所有监听器         │
└────────────────────┘      └────────────────────┘
          │                           │
          ▼                           ▼
┌────────────────────┐      ┌────────────────────┐
│ uni.$off('event',  │      │ uni.$off('event')  │
│ callback)          │      │                    │
└────────────────────┘      └────────────────────┘

**uni.$off**就像关闭城堡里的魔法信鸽接收站。你可以选择关闭特定消息类型的接收站，也可以关闭特定接收员的职责，甚至可以关闭所有接收站。

生活类比：想象你加入了许多微信群，但现在决定：“我不想再收到’周末加班’群的消息了”，于是你退出了这个群(移除特定事件监听)；或者更极端地，你决定"暂时远离所有社交平台"，于是卸载了微信(移除所有事件监听)。

代码示例：

// 首先定义一个事件监听函数
const priceUpdateHandler = function(data) {
   
   
  console.log(`商品${
     
     data.id}价格更新为：${
     
     data.price}元`);
  updateProductPrice(data);
};

// 注册事件监听
uni.on('priceUpdated', priceUpdateHandler);

// 一段时间后，当不再需要此监听时
uni.$off('priceUpdated', priceUpdateHandler)