Project structure

A standard mini program project follows this directory layout:

Directory layout

my-miniapp/
├── app.json                  # Global config (required)
├── package.json              # npm dependency management
├── src/
│   ├── pages/                # Page directory
│   │   ├── index/
│   │   │   ├── index.vue     # Vue page component
│   │   │   └── index.json    # Page-level config (optional)
│   │   ├── detail/
│   │   │   └── index.vue
│   │   └── profile/
│   │       └── index.vue
│   ├── components/           # Shared components
│   │   └── Header.vue
│   └── utils/                # Utilities
│       └── request.ts
├── public/                   # Static assets (images, fonts, etc.)
│   ├── images/
│   └── icons/
└── node_modules/

app.json configuration

app.json is the global configuration for the mini program. The compiler uses it to generate routes and build config.

Full example

{
  "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"
  }
}

Field reference

Field	Type	Required	Description
framework	"vue" | "react"	Yes	Front-end framework; determines the compiler plugin set
pages	string[]	Yes	Page path list; the first entry is the home page
tabBar	object	No	Bottom tab bar configuration
window	object	No	Global window style configuration

tabBar.list entry fields

Field	Type	Required	Description
pagePath	string	Yes	Path matching an entry in pages
text	string	Yes	Tab label text
iconPath	string	No	Icon path when not selected
selectedIconPath	string	No	Icon path when selected
groupIndex	string	No	Tab group index; default "1"

Default value of groupIndex

If groupIndex is missing or empty on a tabBar.list item, it defaults to "1". Tabs with the same groupIndex belong to the same group; when the group changes, the TabBar items update accordingly.

Page file rules

Vue projects

Page files use .vue. Resolution order:

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

React projects

Page file order (highest first):

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

Routing restrictions

• In Vue projects, do not import vue-router from business code
• In React projects, do not import react-router-dom from business code
• Routing is fully managed by the SDK Router API

Page-level configuration

Each page can have its own .json file, overriding the global window settings:

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