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 overlay
UI.hideLoading	移除 Loading overlay
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