uni-app建议有个开放app.uvue文件

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app建议有个开放app.uvue文件

像是官方的toast，modal，都是全屏组件，建议可以让我们能自己去写一套
是在每个页面之上的，现在都是每个页面去引用，好麻烦，后期不好维护

Harmonyos Next教程
8 回复

这2个api，都是开源的，大家可以自取。 后续会提供dialogPage的API，可以关注相关issues


不是针对这两个api，我的意思是有一个区域，可以让我们自己写全屏组件，位置是在所有页面之上，这样可定制程度就很高了，而且是全局的，不用每个页面去引用组件

h5还行，可以动态插入节点，其他的就不行了，如果其他的端也能动态插入节点就简单了

回复 靐齉齾麤龖龗: 对啊，强烈建议有这个区域让我们可以自己写

回复 靐齉齾麤龖龗: 其实弄一个页面给我们就行，飘在最顶端，可以选择穿透或不穿透就行了，类似于nvue打开一个透明的页面

回复 choin: 对的，之前app上面就是用的一个nvue来模拟的弹窗

开源地址有吗

在uni-app中，虽然默认情况下没有直接开放一个名为app.uvue的文件用于全局配置或逻辑处理，但我们可以通过其他方式实现类似的功能。在uni-app中，有几个关键的文件和配置方法可以帮助我们达到全局管理的目的。

1. main.js 或 main.ts

这是uni-app的入口文件，通常用于初始化Vue实例、配置全局插件、过滤器、混入等。

// main.js
import Vue from 'vue'
import App from './App'
import store from './store' // 假设你使用了Vuex

Vue.config.productionTip = false

// 注册全局插件、混入、过滤器等
Vue.prototype.$myGlobalFunction = function () {
  console.log('这是一个全局函数')
}

// 创建Vue实例
const app = new Vue({
    store,
    ...App
})
app.$mount()

2. App.vue

这是uni-app的根组件，通常用于定义全局样式、页面跳转逻辑等。

<template>
  <App />
</template>

<script>
export default {
  name: 'App',
  onLaunch() {
    console.log('App Launch')
    // 可以在这里进行全局的初始化操作，比如检查用户登录状态、请求全局配置等
  },
  onShow() {
    console.log('App Show')
  },
  onHide() {
    console.log('App Hide')
  }
}
</script>

<style>
/* 全局样式 */
</style>

3. 全局混入（Mixins）

创建一个全局混入文件，然后在main.js中全局注册。

// globalMixin.js
export const globalMixin = {
  data() {
    return {
      globalData: {} // 可以存储一些全局数据
    }
  },
  methods: {
    globalMethod() {
      console.log('这是全局混入中的方法')
    }
  }
}

在main.js中引入并使用这个混入：

import Vue from 'vue'
import { globalMixin } from './globalMixin'

Vue.mixin(globalMixin)

4. Vuex（状态管理）

对于复杂的应用，使用Vuex来管理全局状态是一个更好的选择。你可以在store文件夹中定义你的状态、mutations、actions等。

通过上述方法，我们可以在uni-app中实现类似app.uvue文件的功能，而无需直接开放这样的文件。这些方法提供了灵活且强大的方式来管理和配置我们的应用。

回到顶部