Shell container

Shell is the page container of the mini program runtime. It is responsible for building the complete UI framework structure.

Structure

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

Shell HTML generation

Shell is generated at build time by the minidev-shell package. The core function generateShellHtml() produces the full HTML structure from app.json configuration:

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

The shell runtime core is responsible for:

Event listening — listens for Bridge events via setupBridge()
UI rendering — creates/updates the DOM when events are received
Callback delivery — user interaction results are sent back via sendCallback()
Tab grouping — manages activeGroup state and handles tab group switching

Supported events

Event	Render behavior
`UI.showLoading`	Creates a Loading overlay
`UI.hideLoading`	Removes the Loading overlay
`UI.showToast`	Creates a Toast
`UI.hideToast`	Removes the Toast
`UI.showDialog`	Creates a Dialog and waits for the callback
`UI.alert`	Creates an Alert and waits for the callback
`UI.showActionSheet`	Creates an ActionSheet and waits for the callback
`UI.setNavigationBarTitle`	Updates NavBar title text
`UI.setNavigationBarColor`	Updates NavBar colors
`UI.showNavigationBarLoading`	Shows loading animation on the NavBar
`UI.hideNavigationBarLoading`	Hides loading animation on the NavBar
`UI.showTabBar` / `hideTabBar`	Show/hide the TabBar
`UI.setTabBarBadge`	Sets a tab badge
`UI.setTabBarItem`	Updates a tab item
`UI.setTabBarStyle`	Updates TabBar styles
`Router.setActiveGroup`	Switches tab group

Configuring shell styles

Configure global styles via the window field in app.json:

json

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

Field	Description	Default
`navigationBarTitleText`	NavBar title	—
`navigationBarBackgroundColor`	NavBar background color	`#ffffff`
`navigationBarTextStyle`	NavBar text color	`black`
`backgroundColor`	Page background color	`#ffffff`

Shell container ​

Structure ​

Shell HTML generation ​

runtime-src.js ​