Uniapp全局文件执行顺序详解

news2024/11/12 12:36:00

Uniapp全局文件执行顺序详解

在Uni-App项目中，全局文件的执行顺序对于深入理解应用的启动和初始化流程至关重要。本文将详细阐述这些文件的执行顺序，并提供相应的示例代码，以便开发者更好地理解和应用。

1. index.html

文件描述：
index.html是Uni-App项目的HTML模板文件，它定义了应用程序的基本HTML结构，并引入了必要的CSS和JS资源。这个文件是浏览器加载的第一个文件，作为整个应用的入口点。

执行时机：
最早被加载，作为应用的HTML框架。

示例代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Uni-App Demo</title>  
    <!-- 引入全局样式 -->  
    <link rel="stylesheet" href="/static/css/global.css">  
</head>  
<body>  
    <div id="app"></div>  
    <!-- 引入Vue和Uni-App框架 -->  
    <script src="/path/to/vue.min.js"></script>  
    <script src="/path/to/uni-app.js"></script>  
    <!-- 引入应用入口文件 -->  
    <script src="/path/to/main.js"></script>  
</body>  
</html>

2. pages.json

文件描述：
pages.json用于对Uni-App进行全局配置，包括页面文件的路径、窗口样式、原生导航栏以及底部原生tabbar等。它类似于微信小程序中的app.json文件。

执行时机：
在应用启动时，pages.json会被读取和解析，以配置应用的页面和导航结构。这一过程通常在main.js执行之前完成。

示例代码（简化版）：

{  
    "pages": [  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "首页"  
            }  
        }  
    ]  
}

3. main.js

文件描述：
main.js是Uni-App的入口文件，负责初始化Vue实例、定义全局组件、引入并使用插件（如Vuex）等。在这个文件中，会创建Vue实例并将其挂载到#app元素上。

执行时机：
在index.html加载后，main.js作为JavaScript代码的起点被执行。

示例代码：

import Vue from 'vue'  
import App from './App'  
  
// 引入全局组件  
import MyComponent from './components/MyComponent'  
Vue.component('MyComponent', MyComponent)  
  
// 初始化Vue实例并挂载  
new Vue({  
    render: h => h(App)  
}).$mount('#app')

4. App.vue

文件描述：
App.vue是Uni-App的主组件，所有页面都在这个组件下进行切换。它本身不是页面，而是作为一个容器来管理整个应用的生命周期、全局样式和全局数据。

执行时机：

App.vue中export外的JavaScript代码会在main.js之前执行（如果存在的话）。
export内的JavaScript代码（如生命周期函数）则会在Vue实例挂载后执行。

示例代码：

<script>  
// export外的代码，会在main.js之前执行  
console.log('App.vue external script executed')  
  
export default {  
    // export内的代码，Vue实例挂载后执行  
    onLaunch() {  
        console.log('App.vue onLaunch lifecycle function executed')  
    },  
    // ...其他生命周期函数和配置  
}  
</script>  
  
<style>  
/* 全局样式 */  
</style>