uniapp在app.vue页面使用全局变量

要在`app.vue`中使用全局变量，可以在`main.js`中定义一个Vue实例，并将其作为全局变量挂载到Vue原型上。例如：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$globalVar = {
  foo: 'bar',
  baz: 'qux'
}

new Vue({
  render: h => h(App),
}).$mount('#app')

然后在`app.vue`中可以通过`this.$globalVar`来访问全局变量。

<template>
  <div>
    <p>foo: {{ $globalVar.foo }}</p>
    <p>baz: {{ $globalVar.baz }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$globalVar.foo)
  }
}
</script>

相关问题

uniapp的app.vue的onLaunch中 app.vue中无法更改document.documentElement.style.fontSize 的样式嘛

在uni-app中，`app.vue` 是应用的根组件，而 `onLaunch` 是生命周期函数，在应用初始化完成后触发。通常在这个生命周期函数中，开发者会执行一些全局的初始化操作，比如设置全局样式。

`document.documentElement.style.fontSize` 是 Web 开发中用来设置页面根元素字体大小的属性。在uni-app中，由于它是一个基于 Vue.js 的框架，页面的渲染与传统的 Web 环境略有不同，特别是在不同平台上的表现（如 H5、App、小程序等）。

在H5平台，你可以在 `onLaunch` 中通过修改 `document.documentElement.style.fontSize` 来改变页面的字体大小。但在其他平台（如 App 或小程序），`document` 对象可能并不存在或者有所不同，因此直接修改 `document.documentElement.style.fontSize` 可能不会生效或者引发错误。

为了在uni-app中跨平台地设置全局字体大小，你可以使用 `setStyle` 方法或全局样式变量的方式，来动态地改变页面的样式。比如：

// 在 app.vue 的 onLaunch 中
onLaunch: function() {
  // 动态设置全局样式
  const fontSize = '16px'; // 假设你想设置的字体大小为 16px
  const styleStr = `document.documentElement.style.fontSize = '${fontSize}';`;
  if (process.env.TARGet === 'h5') {
    eval(styleStr); // 注意：eval 用于执行字符串代码，但是谨慎使用，因为它可能会带来安全风险。
  } else {
    // 在非H5平台上，通过其他方式设置字体大小，比如使用原生插件或者API
  }
}

在上面的代码中，我们检查了当前的运行环境，如果是H5平台，则使用 `eval` 执行字符串形式的代码来修改 `document.documentElement.style.fontSize`。但在实际开发中，我们建议使用uni-app提供的跨平台API来操作样式，以避免潜在的问题和兼容性问题。

uniappvue3如何在app.vue中设置全局变量

在UniApp（Vue3版本）中，要在`app.vue`文件中设置全局变量，你可以使用Vue的`provide/inject`机制或者Vue 3.x中的`ref`和`reactive`配合。这里我将分别介绍这两种方法：

1. **提供者-消费者模式（provide/inject）：**
在`app.vue`中，作为“提供者”，你需要在`setup()`钩子里创建并管理全局变量，并使用`provide()`方法提供它们：

<template>
  <!-- ... -->
</template>

<script setup>
import { ref } from 'vue';
const globalVariable = ref('Hello, UniApp!'); // 创建全局变量

// 提供全局变量
provide('globalVariable', globalVariable); // 在setup中提供

export default {
  // ...
};
</script>

然后，在其他组件中，作为“消费者”，通过`inject()`方法接收这个变量：

<script setup>
import { inject } from 'vue';

// 在其他组件中注入全局变量
const globalValue = inject('globalVariable');
console.log(globalValue); // 输出 "Hello, UniApp!"
</script>

2. **使用`ref`和`reactive`：**
如果你想基于数据变化自动更新全局状态，可以使用`reactive`创建响应式对象，再使用`ref`包裹：

<template>
  <!-- ... -->
</template>

<script setup>
import { ref, reactive } from 'vue';

// 创建一个响应式的全局对象
const globalState = reactive({ name: 'UniApp' });

// 使用ref包装以暴露给全局
const globalNameRef = ref(globalState.name);

globalState.name = 'Updated Name'; // 当状态改变时，全局名也会同步更新

export default {
  // ...
};
</script>

使用时，同样通过`ref.value`获取实际值：

<script setup>
const globalAppName = globalNameRef.value;
console.log(globalAppName); // 输出 "Updated Name"
</script>