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.

解释

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

这样，你就可以在整个 UniApp 应用中方便地访问设备信息了。