简述uniApp项目页面之间传值？

八股文_UniApp面试题 0 104

在 UniApp 中，页面之间传值可以通过以下几种方式实现：

通过 URL 参数传值：
- 使用 uni.navigateTo 或 uni.redirectTo 进行页面跳转时，可以通过 URL 参数将数据传递到目标页面。在目标页面通过 onLoad 函数获取传递的参数。
示例：
- 页面 A 跳转到页面 B 并传递参数：
```
uni.navigateTo({
url: '/pages/b/b?id=123&name=JohnDoe'
});
```

通过全局变量传值：
- 可以在 App.vue 的 globalData 中定义全局变量，然后在不同页面之间共享和传递数据。
示例：
- 在 App.vue 中定义全局变量：
```
// App.vue
export default {
globalData: {
 userInfo: null
}
}
```

页面 A 设置全局变量：
“`javascript
const app = getApp();
app.globalData.userInfo = { name: 'JohnDoe', age: 30 };
“`
页面 B 获取全局变量：

“`javascript
const app = getApp();
console.log(app.globalData.userInfo); // { name: 'JohnDoe', age: 30 }
“`

通过 uni.setStorage 和 uni.getStorage 传值：
- 使用 uni.setStorage 和 uni.getStorage 可以将数据存储到本地，多个页面之间可以通过这些方法来传递数据。数据会在应用关闭时被清空，适合需要跨页面但不需要持久化的数据传递。
示例：
- 页面 A 存储数据：
```
uni.setStorage({
key: 'userInfo',
data: { name: 'JohnDoe', age: 30 }
});
```

通过事件总线传值：
- 在 UniApp 中，可以通过事件总线（EventBus）来实现页面之间的通信，适用于兄弟页面之间传值或跨页面传递事件。
示例：
- 定义事件总线：
```
// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();
```

页面 A 发送事件：
“`javascript
import { eventBus } from '@/utils/eventBus';
eventBus.$emit('sendData', { name: 'JohnDoe', age: 30 });
“`
页面 B 接收事件：

“`javascript
import { eventBus } from '@/utils/eventBus';
eventBus.$on('sendData', (data) => {
console.log(data); // { name: 'JohnDoe', age: 30 }
});
“`

通过 URL 参数传值：
- uni.navigateTo 和 uni.redirectTo 都可以通过 URL 传递参数。当跳转到目标页面时，通过 options 获取 URL 参数。适用于小型数据传递，如页面跳转时携带的 ID、名称、状态等。
通过全局变量传值：
- 全局变量是常见的跨页面数据共享方法，通过 getApp() 获取应用实例，并通过 globalData 属性来存取数据。适用于需要跨页面传递较为复杂的数据，如用户信息、登录状态等。
- 使用全局变量传值时，数据会在整个应用生命周期内保持，直到应用关闭或用户手动修改。
通过 uni.setStorage 和 uni.getStorage 传值：
- uni.setStorage 和 uni.getStorage 是用于存储和获取本地数据的 API，适用于跨页面或跨会话传递数据。数据存储在本地，因此即使用户关闭应用后，数据也能保持到下一次打开应用时。
- 需要注意，uni.setStorage 存储的数据是有限制的（通常 10MB 左右），且不能存储较大的数据结构。
通过事件总线传值：
- 事件总线（EventBus）是一个用于页面间通信的中介对象，尤其适用于兄弟页面之间的通信。当页面之间没有直接关系时，可以通过事件总线来实现消息传递。
- 事件总线适合传递一些临时事件或数据，但由于事件的持续存在，过多的事件监听可能会影响性能。

假设你正在开发一个社交应用，用户在页面 A（个人信息页）修改了自己的用户名，并希望在页面 B（主页）实时显示更新后的用户名。你可以通过全局变量或事件总线来实现这一需求。

在页面 A 修改用户名并传递：

// 页面 A
const app = getApp();
app.globalData.userInfo.name = 'NewUsername';

在页面 B 获取并展示修改后的用户名：

// 页面 B
const app = getApp();
console.log(app.globalData.userInfo.name); // 输出 'NewUsername'

总结：UniApp 提供了多种方式来传递页面之间的数据，包括通过 URL 参数、全局变量、uni.setStorage 和 uni.getStorage，以及事件总线等方式。根据数据的临时性、持久化需求和跨页面的复杂度，选择适合的传值方式，可以大大提高应用的数据管理效率。