Shell コンテナ

Shell はミニプログラムランタイムのページコンテナで、完全な UI フレームワーク構造を組み立てる役割を担います。

構造

┌──────────────────────────────────┐
│           StatusBar              │  系统状态栏
├──────────────────────────────────┤
│           NavBar                 │  导航栏（标题、返回）
├──────────────────────────────────┤
│                                  │
│                                  │
│          Content Area            │  页面内容区域
│        （开发者页面）             │  （webview 渲染）
│                                  │
│                                  │
├──────────────────────────────────┤
│           TabBar                 │  底部标签栏（可选）
└──────────────────────────────────┘

Shell HTML の生成

Shell は minidev-shell パッケージによってビルド時に生成されます。コア関数 generateShellHtml() が app.json の設定に基づき、完全な HTML 構造を出力します。

minidev-shell/index.js
  → generateShellHtml(appConfig)
    → NavBar HTML
    → Content Container
    → TabBar HTML（如果配置了 tabBar）
    → StatusBar HTML
    → 注入 runtime-src.js（运行时逻辑）
    → 注入 minidev-components（Web Components）

runtime-src.js

Shell のランタイムの中核は、次の処理を担います。

1. イベント待受 — setupBridge() により Bridge イベントを待受します
2. UI 描画 — イベント受信後、DOM の作成・更新を行います
3. コールバックの返送 — ユーザー操作の結果を sendCallback() で返します
4. Tab のグループ分け — activeGroup 状態の管理と Tab グループ切り替えの処理

サポートするイベント

イベント	描画の挙動
UI.showLoading	Loading オーバーレイを作成します
UI.hideLoading	Loading オーバーレイを除去します
UI.showToast	Toast を表示します
UI.hideToast	Toast を除去します
UI.showDialog	Dialog を作成し、コールバックを待ちます
UI.alert	Alert を作成し、コールバックを待ちます
UI.showActionSheet	ActionSheet を作成し、コールバックを待ちます
UI.setNavigationBarTitle	NavBar のタイトル文言を更新します
UI.setNavigationBarColor	NavBar の色を更新します
UI.showNavigationBarLoading	NavBar にローディングアニメーションを表示します
UI.hideNavigationBarLoading	NavBar のローディングアニメーションを隠します
UI.showTabBar / hideTabBar	TabBar の表示／非表示
UI.setTabBarBadge	Tab のバッジを設定します
UI.setTabBarItem	Tab 項目を更新します
UI.setTabBarStyle	TabBar のスタイルを更新します
Router.setActiveGroup	Tab グループを切り替えます

Shell スタイルの設定

app.json の window フィールドでグローバルスタイルを指定します。

{
  "window": {
    "navigationBarTitleText": "我的应用",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f5f5f5"
  }
}

フィールド	説明	デフォルト値
navigationBarTitleText	NavBar のタイトル	—
navigationBarBackgroundColor	NavBar の背景色	#ffffff
navigationBarTextStyle	NavBar の文字色	black
backgroundColor	ページの背景色	#ffffff