【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 });
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。