uniapp程序入口

Uniapp 程序入口文件

Uniapp 的程序入口文件根据不同的运行平台有所不同，主要分为以下几种情况：

H5 和 小程序平台

• 入口文件是 main.js，位于项目根目录下。该文件负责初始化 Vue 实例、引入全局配置和插件。

App 平台

• 入口文件同样是 main.js，但 App 平台有额外的生命周期管理，需在 App.vue 中处理应用级生命周期函数。

各平台入口文件配置

• pages.json 负责配置页面路由和窗口表现，虽然不是传统意义上的入口文件，但决定了应用的页面结构和导航行为。

入口文件的作用

main.js

• 初始化 Vue 实例，挂载全局组件、插件和混入。
• 引入全局样式或第三方库，例如：

  import Vue from 'vue'
  import App from './App'
  Vue.config.productionTip = false
  App.mpType = 'app'
  const app = new Vue({...App})
  app.$mount()

App.vue

• 作为应用级组件，处理应用生命周期事件如 onLaunch、onShow、onHide。
• 提供全局样式或模板，例如：

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

入口文件配置示例

pages.json 示例

{
  "pages": [
    {"path": "pages/index/index", "style": {...}},
    {"path": "pages/logs/logs", "style": {...}}
  ],
  "globalStyle": {
    "navigationBarTitleText": "Uniapp Demo"
  }
}

注意事项

• 确保入口文件的路径和名称正确，避免因配置错误导致应用无法启动。
• 在 main.js 中避免直接操作 DOM，因为部分平台（如小程序）不支持 DOM API。
• 使用条件编译处理平台差异，例如：

  #ifdef H5
  console.log('H5平台特定代码')
  #endif