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); // 輸出 10003console.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
});
