プロジェクト構造

標準的なミニプログラムのプロジェクトは、次のディレクトリ構造に従います。

ディレクトリの規則

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	いいえ	タブのグループ。既定は "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
}