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

在開發(fā)微信小程序過程中，頁面之間的通信是一個常見需求。在使用 uniapp 開發(fā)微信小程序時，我們可以采用多種方式實(shí)現(xiàn)頁面之間的數(shù)據(jù)傳遞和狀態(tài)共享。本文將詳細(xì)介紹幾種常見的實(shí)現(xiàn)方式，以供開發(fā)者參考。

1. 頁面跳轉(zhuǎn)攜帶參數(shù)

最常見的方法是在進(jìn)行頁面跳轉(zhuǎn)時，通過調(diào)用 navigateTo, redirectTo 和 switchTab 等 API 攜帶參數(shù)到新頁面。

。例如：

// 當(dāng)前頁面的跳轉(zhuǎn)
uni.navigateTo({url: 'detail?id=10003&name=wm',success: (res) => {// 跳轉(zhuǎn)成功}
});

在目標(biāo)頁面的 onLoad 函數(shù)中接收這些參數(shù)：

// 目標(biāo)頁面的onLoad函數(shù)
onLoad: function(options) {console.log(options.id); // 輸出 10003console.log(options.name); // 輸出 wm
};

2. 全局事件通信

我們可以通過 uni.$emit 和 uni.$on 實(shí)現(xiàn)全局的消息訂閱與發(fā)布，從而達(dá)到頁面間通信的目的。

// 發(fā)送消息的頁面
uni.$emit('update-status', { status: 'success' });

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

3. 全局存儲

利用微信小程序的全局存儲功能，通過 uni.setStorage 和 uni.getStorage 可以在不同頁面之間共享數(shù)據(jù)。

// 存儲數(shù)據(jù)
uni.setStorage({key: 'key',data: 'value',success: (res) => {// 數(shù)據(jù)存儲成功}
});

// 獲取數(shù)據(jù)
uni.getStorage({key: 'key',success: (res) => {console.log(res.data); // 輸出 value}
});

4. 返回到上一頁面并攜帶數(shù)據(jù)

在某些情況下，我們需要在用戶操作之后返回上一頁面并帶回數(shù)據(jù)。這時可以通過 navigateBack 傳遞參數(shù)。

// 在當(dāng)前頁面，設(shè)置并返回上一頁
var pages = getCurrentPages(); // 獲取頁面棧
var prevPage = pages[pages.length - 2]; // 上一個頁面
prevPage.setData({myData: 'some data'
});
uni.navigateBack({delta: 1
});

在返回頁面中，通過 onShow 或其他生命周期函數(shù)獲取并使用這個數(shù)據(jù)。

// 在上一個頁面
onShow: function() {console.log(this.data.myData); // 輸出 some data
};

5. 使用 Vuex 狀態(tài)管理

如果項(xiàng)目較大且狀態(tài)管理復(fù)雜，可以使用 Vuex 來管理應(yīng)用的全局狀態(tài)，這樣不僅能管理頁面間的數(shù)據(jù)傳遞，還能更好地維護(hù)和更新數(shù)據(jù)。

// store.js
const store = new Vuex.Store({state: {myData: ''},mutations: {setMyData(state, payload) {state.myData = payload;}}
});// 頁面A - 設(shè)置數(shù)據(jù)
this.$store.commit('setMyData', 'some data');// 頁面B - 獲取數(shù)據(jù)
console.log(this.$store.state.myData); // 輸出 some data

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

在 Vue 3 組合式 API 下，可以通過 provide 和 inject 實(shí)現(xiàn)祖先組件與后代組件之間的數(shù)據(jù)共享。

// 父組件
import { provide } from 'vue';
provide('sharedData', 'some data');// 子組件
import { inject } from 'vue';
const sharedData = inject('sharedData');
console.log(sharedData); // 輸出 some data

7. 自定義事件總線

在 uniapp 應(yīng)用中創(chuàng)建一個專門用于管理頁面之間事件通信的事件總線。這種方式在邏輯復(fù)雜、需要頻繁通信的情況下非常實(shí)用。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();// 頁面A 發(fā)送事件
import { EventBus } from './eventBus';
EventBus.$emit('my-event', 'some data');// 頁面B 監(jiān)聽事件
import { EventBus } from './eventBus';
EventBus.$on('my-event', (data) => {console.log(data); // 輸出 some data
});