uniapp程序入口

uniapp程序入口文件

uniapp的程序入口文件根据运行平台不同有所区别，主要分为小程序、H5和App三种情况。以下分别说明各平台的入口文件配置方式。

小程序平台（微信/支付宝/百度等） 入口文件默认为main.js，在项目根目录下。该文件负责初始化Vue实例、注册全局组件和插件。

H5平台 入口文件同样是main.js，但会通过index.html作为页面容器。可以在public/index.html中修改HTML模板。

App平台 入口文件为main.js，但需要额外配置App.vue作为根组件。App生命周期函数需要在App.vue中定义。

主要入口文件说明

main.js是核心入口文件，典型内容如下：

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

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

App.vue作为应用根组件，包含模板、脚本和样式：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
  }
}
</script>

配置文件说明

pages.json负责配置页面路由和窗口表现：

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

manifest.json配置应用基本信息：

{
  "name": "my-app",
  "appid": "__UNI__XXXXXX",
  "description": ""
}

生命周期执行顺序

应用启动时生命周期执行顺序：

1. App.vue中的onLaunch
2. 首页的onLoad
3. 首页的onShow
4. App.vue中的onShow

页面切换时触发目标页面的onLoad和onShow，原页面的onHide。

注意事项

开发时应注意：

• 避免在main.js中进行耗时操作
• 全局样式应放在App.vue或单独样式文件中
• 路由拦截可在main.js中通过路由守卫实现
• 多端差异可通过条件编译处理