项目结构

一个标准的小程序项目遵循以下目录结构：

目录规范

my-miniapp/
├── app.json                  # 全局配置（必需）
├── package.json              # npm 依赖管理
├── src/
│   ├── pages/                # 页面目录
│   │   ├── index/
│   │   │   ├── index.vue     # Vue 页面组件
│   │   │   └── index.json    # 页面级配置（可选）
│   │   ├── detail/
│   │   │   └── index.vue
│   │   └── profile/
│   │       └── index.vue
│   ├── components/           # 公共组件
│   │   └── Header.vue
│   └── utils/                # 工具函数
│       └── request.ts
├── public/                   # 静态资源（图片、字体等）
│   ├── images/
│   └── icons/
└── node_modules/

app.json 配置

app.json 是小程序的全局配置文件，编译器依赖它生成路由和构建配置。

完整示例

{
  "framework": "vue",
  "pages": [
    "pages/index/index",
    "pages/detail/index",
    "pages/profile/index"
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#333333",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/profile/index",
        "text": "我的",
        "iconPath": "static/icons/profile.png",
        "selectedIconPath": "static/icons/profile-active.png",
        "groupIndex": "2"
      }
    ]
  },
  "window": {
    "navigationBarTitleText": "我的应用",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

字段说明

字段	类型	必填	说明
framework	"vue" | "react"	是	前端框架，决定编译器插件集
pages	string[]	是	页面路径列表，第一项为首页
tabBar	object	否	底部标签栏配置
window	object	否	全局窗口样式配置

tabBar.list 项配置

字段	类型	必填	说明
pagePath	string	是	对应 pages 中的路径
text	string	是	标签文字
iconPath	string	否	未选中图标路径
selectedIconPath	string	否	选中图标路径
groupIndex	string	否	Tab 分组索引，默认 "1"

groupIndex 默认值

tabBar.list 项的 groupIndex 未声明或为空时默认值为 "1"。同一 groupIndex 的标签会归入同一分组，切换分组时 TabBar 项自动切换。

页面文件规则

Vue 项目

页面文件为 .vue，解析优先级：

1. src/pages/{path}/index.vue
2. src/pages/{path}.vue

React 项目

页面文件优先级（递减）：

1. src/pages/{path}/index.tsx
2. src/pages/{path}/index.jsx
3. src/pages/{path}/index.ts
4. src/pages/{path}/index.js

路由限制

• Vue 项目禁止业务代码 import vue-router
• React 项目禁止业务代码 import react-router-dom
• 路由完全由 SDK 的 Router API 管理

页面级配置

每个页面可以有独立的 .json 配置文件，覆盖全局 window 配置：

{
  "navigationBarTitleText": "详情页",
  "navigationBarBackgroundColor": "#f5f5f5",
  "enablePullDownRefresh": true
}