uni-app实现页面间通信和交互的终极攻略

2023-08-13 11:36:11

页面栈与页面通信机制：探索 uni-app 的通信之道

1. 页面栈

uni-app 中的页面栈是一个页面实例的数组，表示当前打开的页面层级关系。当前页面在数组中的索引为 0，上一页在数组中的索引为 1，以此类推。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。

2. 获取当前页面栈实例数组

在 uni-app 中，我们可以使用 getCurrentPages() 方法获取当前页面栈实例数组。该方法返回一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。

const pages = getCurrentPages();

3. 返回上一页

在 uni-app 中，我们可以使用 navigateBack() 方法返回上一页。该方法会关闭当前页面，并返回到上一页。

uni.navigateBack();

4. 调用上一页的方法

在 uni-app 中，我们可以使用 $emit() 方法来调用上一页的方法。该方法会向上一页发出一个事件，上一页可以监听该事件并执行相应的操作。

5. 导航栏返回按钮

在 uni-app 中，我们可以使用导航栏的返回按钮来返回上一页。导航栏的返回按钮由系统提供，不需要我们自己实现。

6. 实战案例：购物车与订单页面的通信

假设我们有一个购物车页面和一个订单页面，购物车页面上有一个“立即购买”按钮，当用户点击该按钮时，需要跳转到订单页面并把购物车中的商品信息传递给订单页面。

// 购物车页面
export default {
  methods: {
    buyNow() {
      // 获取购物车中的商品信息
      const cartItems = this.$store.state.cart.items;

      // 跳转到订单页面，并把购物车中的商品信息传递给订单页面
      uni.navigateTo({
        url: '/pages/order/index',
        query: {
          cartItems: JSON.stringify(cartItems),
        },
      });
    },
  },
};

// 订单页面
export default {
  data() {
    return {
      cartItems: [],
    };
  },
  onLoad(options) {
    // 获取购物车中的商品信息
    const cartItems = JSON.parse(options.cartItems);

    // 把购物车中的商品信息设置到订单页面
    this.cartItems = cartItems;
  },
};