【uniapp微信小程序】uniapp微信小程序——页面通信

uniapp微信小程序——页面通信

在开发微信小程序过程中，页面之间的通信是一个常见需求。在使用 uniapp 开发微信小程序时，我们可以采用多种方式实现页面之间的数据传递和状态共享。本文将详细介绍几种常见的实现方式，以供开发者参考。

1. 页面跳转携带参数

最常见的方法是在进行页面跳转时，通过调用 navigateTo, redirectTo 和 switchTab 等 API 携带参数到新页面。

。例如：

// 当前页面的跳转
uni.navigateTo({
    url: 'detail?id=10003&name=wm',
    success: (res) => {
        // 跳转成功
    }
});

在目标页面的 onLoad 函数中接收这些参数：

// 目标页面的onLoad函数
onLoad: function(options) {
    console.log(options.id); // 输出 10003
    console.log(options.name); // 输出 wm
};

2. 全局事件通信

我们可以通过 uni.$emit 和 uni.$on 实现全局的消息订阅与发布，从而达到页面间通信的目的。

// 发送消息的页面
uni.$emit('update-status', { status: 'success' });

// 接收消息的页面
this.$on('update-status', (data) => {
    console.log(data.status); // 输出 success
});

3. 全局存储

利用微信小程序的全局存储功能，通过 uni.setStorage 和 uni.getStorage 可以在不同页面之间共享数据。

// 存储数据
uni.setStorage({
    key: 'key',
    data: 'value',
    success: (res) => {
        // 数据存储成功
    }
});

// 获取数据
uni.getStorage({
    key: 'key',
    success: (res) => {
        console.log(res.data); // 输出 value
    }
});

4. 返回到上一页面并携带数据

在某些情况下，我们需要在用户操作之后返回上一页面并带回数据。这时可以通过 navigateBack 传递参数。

// 在当前页面，设置并返回上一页
var pages = getCurrentPages(); // 获取页面栈
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.setData({
    myData: 'some data'
});
uni.navigateBack({
    delta: 1
});

在返回页面中，通过 onShow 或其他生命周期函数获取并使用这个数据。

// 在上一个页面
onShow: function() {
    console.log(this.data.myData); // 输出 some data
};

5. 使用 Vuex 状态管理

如果项目较大且状态管理复杂，可以使用 Vuex 来管理应用的全局状态，这样不仅能管理页面间的数据传递，还能更好地维护和更新数据。

// store.js
const store = new Vuex.Store({
    state: {
        myData: ''
    },
    mutations: {
        setMyData(state, payload) {
            state.myData = payload;
        }
    }
});

// 页面A - 设置数据
this.$store.commit('setMyData', 'some data');

// 页面B - 获取数据
console.log(this.$store.state.myData); // 输出 some data

6. 使用 Provide / Inject (仅在 vue3 中可用)

在 Vue 3 组合式 API 下，可以通过 provide 和 inject 实现祖先组件与后代组件之间的数据共享。

// 父组件
import { provide } from 'vue';
provide('sharedData', 'some data');

// 子组件
import { inject } from 'vue';
const sharedData = inject('sharedData');
console.log(sharedData); // 输出 some data

7. 自定义事件总线

在 uniapp 应用中创建一个专门用于管理页面之间事件通信的事件总线。这种方式在逻辑复杂、需要频繁通信的情况下非常实用。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 页面A 发送事件
import { EventBus } from './eventBus';
EventBus.$emit('my-event', 'some data');

// 页面B 监听事件
import { EventBus } from './eventBus';
EventBus.$on('my-event', (data) => {
    console.log(data); // 输出 some data
});