uniapp组织结构图

uniapp项目目录结构

uniapp项目采用标准的Vue.js项目结构，同时融合了小程序和H5的目录规范。典型结构如下：

├── .hbuilderx               // HBuilderX配置文件
├── components               // 组件目录
├── pages                    // 页面目录
├── static                   // 静态资源
├── unpackage                // 打包输出目录
├── App.vue                  // 应用配置
├── main.js                  // 入口文件
├── manifest.json            // 应用配置
├── pages.json               // 页面路由和样式配置
└── uni.scss                 // 全局样式变量

核心文件说明

manifest.json
包含应用名称、appid、版本等打包配置，支持各平台差异化配置。

pages.json
定义页面路由、窗口样式、导航栏样式等，示例：

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

App.vue
应用入口组件，可设置全局样式和生命周期。

页面组织规范

每个页面需在pages.json中注册，对应目录结构：

pages/
  ├── index/
  │   ├── index.vue        // 页面组件
  │   └── index.scss       // 页面样式（可选）
  └── detail/
      ├── detail.vue
      └── detail.scss

组件管理方式

公共组件存放于components目录，支持自动导入：

<template>
  <custom-component />
</template>

<script>
export default {
  components: {
    'custom-component': () => import('@/components/custom-component.vue')
  }
}
</script>

跨平台适配策略

通过条件编译实现多平台适配：

// #ifdef H5
console.log('仅在H5平台生效');
// #endif

静态资源需使用绝对路径/static/前缀，打包时会自动处理平台差异。