uniapp中判断设备类型

全局变量：

在 UniApp 中，你可以通过 uni.getDeviceInfo 获取设备信息，并将设备类型全局存放。通常，这些信息可以存放在 app.vue 的全局变量中，以便在整个应用中访问。

以下是如何在 app.vue 中实现这一功能的完整代码，以及如何在其他页面中引用这些信息的示例。

app.vue

<template><App />
</template><script>
export default {data() {return {globalDeviceInfo: {}};},onLaunch: function() {console.log('App Launch');this.getDeviceInfo();},onShow: function() {console.log('App Show');},onHide: function() {console.log('App Hide');},methods: {getDeviceInfo() {uni.getDeviceInfo({success: (res) => {this.globalDeviceInfo = res;console.log('Device Info:', this.globalDeviceInfo);},fail: (err) => {console.error('Failed to get device info:', err);}});}},provide() {return {globalDeviceInfo: this.globalDeviceInfo};}
};
</script><style lang="scss">
@import "@/static/iconfont.css";
@import '@/uni_modules/uni-scss/index.scss';
/* #ifndef APP-NVUE */
@import '@/static/customicons.css';
@import './common/uni.css';
/* 设置整个项目的背景色 */
page {background-color: #f5f5f5;
}
/* #endif */
.example-info {font-size: 14px;color: #333;padding: 10px;
}
</style>

在其他页面中引用全局设备信息

你可以使用 inject 来获取 app.vue 中提供的 globalDeviceInfo。inject 翻译过就是“注入”

<script>
import { ref, reactive, onMounted, onUnmounted, inject} from 'vue';
import WebSocketClient from '../../utils/websocket-client';export default {name: 'chatRoom',setup() {const globalDeviceInfo = inject('globalDeviceInfo');
.....

别忘了从vue中导入 inject.

解释

app.vue:
- 在 data 中定义一个 globalDeviceInfo 对象来存储设备信息。
- 在 onLaunch 生命周期钩子中调用 getDeviceInfo 方法获取设备信息。
- 使用 provide 方法将 globalDeviceInfo 提供给所有子组件。
其他页面:
- 使用 inject 获取 app.vue 中提供的 globalDeviceInfo。
- 在 mounted 生命周期钩子中初始化设备信息，并将其赋值给本地数据。