在 UniApp 编译成 App 后,传递参数可以通过多种方式实现,常见的方式有以下几种:
1. 通过 URL 参数传递(适用于 WebView)
- 如果你的 App 页面通过 WebView 渲染,可以像在 Web 端一样通过 URL 传递参数。例如:
uni.navigateTo({url: '/pages/targetPage/targetPage?param=value' });
- 目标页面可以通过
onLoad
获取参数:onLoad(options) {console.log(options.param); // 获取 URL 中的 param 参数 }
2. 通过 Vuex 全局状态管理
- 在 Vue 3 中,可以利用 Vuex 进行全局状态管理,传递全局参数。例如:
在 Vuex 中定义 mutation:// 在组件中设置 Vuex 状态 this.$store.commit('setUser', userInfo);
其他页面可以通过const store = createStore({state: {user: null,},mutations: {setUser(state, userInfo) {state.user = userInfo;},}, });
this.$store.state.user
获取到全局状态。
3. 通过全局变量(例如 globalData
)传递参数
- UniApp 提供了
getApp()
来访问全局的数据。可以在全局App
实例中设置数据,然后在页面中获取。
在页面中获取全局数据:// 在 App.vue 中设置全局数据 App({globalData: {userInfo: null} });
const app = getApp(); console.log(app.globalData.userInfo);
4. 通过 Storage 本地存储传递参数
- 使用
uni.setStorageSync
和uni.getStorageSync
存储参数,能够在不同页面间传递数据。
在目标页面获取数据:// 设置存储 uni.setStorageSync('userInfo', userInfo);
const userInfo = uni.getStorageSync('userInfo'); console.log(userInfo);
5. 通过事件总线传递参数
- 如果你希望在不同页面或组件之间传递数据,而不依赖于存储或 Vuex,可以使用事件总线进行通信。
- 创建一个全局的事件总线:
// eventBus.js export const eventBus = new Vue();
- 在一个组件中发出事件:
eventBus.$emit('userUpdated', userInfo);
- 在目标页面或组件中监听事件:
eventBus.$on('userUpdated', (data) => {console.log(data); // 获取传递的数据 });
6. 通过参数直接传递(适用于组件)
- 如果你是在不同的组件之间传递数据,可以直接通过 props 传递参数:
// 父组件 <child-component :userInfo="userInfo"></child-component>
// 子组件 props: {userInfo: Object }
7. 通过原生 API 传递参数
- 对于原生功能,可以通过 UniApp 提供的原生 API 进行通信。例如,通过
uni.setNativeStorage
和uni.getNativeStorage
进行原生数据存储和获取。
总结:在 UniApp 中,传参方式的选择依赖于你使用的场景和需求。如果是简单的页面跳转,可以通过 URL 参数或 Vuex 全局状态管理;如果需要在页面间长期存储数据,推荐使用 uni.setStorage
或 globalData
进行传递。