0
# Application Mounting 
1

2
Application mounting functions for setting up the H5 app container with proper DOM structure, styling, and optional tabbar support.
3

4
## Capabilities
5

6
### handleAppMount
7

8
Mount the application without tabbar support, setting up the basic app container with router class and navigation bar.
9

10
```typescript { .api }
11
/**
12
 * Mount the application without tabbar support
13
 * @param config - Router configuration
14
 * @param history - History instance (unused parameter)
15
 * @param appId - App element ID, defaults to 'app'
16
 */
17
function handleAppMount(
18
  config: SpaRouterConfig | MpaRouterConfig,
19
  history: History,
20
  appId?: string
21
): void;
22
```
23

24
**Usage Example:**
25

26
```typescript
27
import { handleAppMount } from "@tarojs/router";
28

29
const config = {
30
  router: { 
31
    mode: "hash", 
32
    basename: "/" 
33
  },
34
  window: { 
35
    navigationBarTitleText: "My App",
36
    navigationBarBackgroundColor: "#000000",
37
    navigationBarTextStyle: "white"
38
  }
39
};
40

41
// Mount with default app ID
42
handleAppMount(config, history);
43

44
// Mount with custom app ID
45
handleAppMount(config, history, "my-custom-app");
46
```
47

48
**Mount Process:**
49

50
1. Finds or creates the app element with specified ID (defaults to 'app')
51
2. Adds `taro_router` CSS class to the app element
52
3. Appends the app element to its parent container if not already positioned
53
4. Initializes the navigation bar component within the app wrapper
54

55
### handleAppMountWithTabbar
56

57
Mount the application with tabbar container support, creating the complete tabbar panel structure and initializing both tabbar and navigation bar components.
58

59
```typescript { .api }
60
/**
61
 * Mount the application with tabbar container support
62
 * @param config - Router configuration with tabbar settings
63
 * @param history - History instance for tabbar navigation
64
 * @param appId - App element ID, defaults to 'app'
65
 */
66
function handleAppMountWithTabbar(
67
  config: SpaRouterConfig | MpaRouterConfig,
68
  history: History,
69
  appId?: string
70
): void;
71
```
72

73
**Usage Example:**
74

75
```typescript
76
import { handleAppMountWithTabbar } from "@tarojs/router";
77

78
const config = {
79
  tabBar: {
80
    color: "#999999",
81
    selectedColor: "#333333",
82
    backgroundColor: "#ffffff",
83
    list: [
84
      { 
85
        pagePath: "/home", 
86
        text: "Home",
87
        iconPath: "/images/home.png",
88
        selectedIconPath: "/images/home-active.png"
89
      },
90
      { 
91
        pagePath: "/profile", 
92
        text: "Profile",
93
        iconPath: "/images/profile.png",
94
        selectedIconPath: "/images/profile-active.png"
95
      }
96
    ]
97
  },
98
  router: { 
99
    mode: "hash", 
100
    basename: "/" 
101
  },
102
  pages: ["/home", "/profile"]
103
};
104

105
handleAppMountWithTabbar(config, history, "app");
106
```
107

108
**Tabbar Mount Process:**
109

110
1. Finds or creates the app element with specified ID
111
2. Adds `taro_router` CSS class to the app element
112
3. Creates tabbar container structure:
113
   - `taro-tabbar__container` (main container with ID 'container')
114
   - `taro-tabbar__panel` (panel containing the app content)
115
4. Moves the app element into the tabbar panel structure
116
5. Replaces the original app element with the tabbar container
117
6. Initializes both tabbar and navigation bar components
118

119
## DOM Structure
120

121
### Basic App Mount Structure
122

123
```html
124
<div id="app" class="taro_router">
125
  <!-- Navigation bar (auto-generated) -->
126
  <div id="taro-navigation-bar" class="taro-navigation-bar-no-icon">
127
    <!-- Navigation bar content -->
128
  </div>
129
  <!-- App content -->
130
</div>
131
```
132

133
### Tabbar App Mount Structure
134

135
```html
136
<div class="taro-tabbar__container" id="container">
137
  <!-- Navigation bar (auto-generated) -->
138
  <div id="taro-navigation-bar" class="taro-navigation-bar-no-icon">
139
    <!-- Navigation bar content -->
140
  </div>
141
  <div class="taro-tabbar__panel">
142
    <div id="app" class="taro_router">
143
      <!-- App content -->
144
    </div>
145
  </div>
146
  <!-- Tabbar component (auto-generated) -->
147
  <taro-tabbar>
148
    <!-- Tabbar content -->
149
  </taro-tabbar>
150
</div>
151
```
152

153
## CSS Classes
154

155
```typescript { .api }
156
// App Container Classes
157
".taro_router"                     // Router container class added to app element
158

159
// Tabbar Classes  
160
".taro-tabbar__container"          // Main tabbar container (ID: 'container')
161
".taro-tabbar__panel"              // Panel containing app content
162

163
// Navigation Bar Classes (auto-generated)
164
".taro-navigation-bar-no-icon"     // Main navigation bar container
165
".taro-navigation-bar-back"        // Back button container
166
".taro-navigation-bar-home"        // Home button container  
167
".taro-navigation-bar-title-wrap"  // Title wrapper container
168
".taro-navigation-bar-title"       // Title text element
169
".taro-navigation-bar-loading"     // Loading indicator
170
```
171

172
## Element IDs
173

174
```typescript { .api }
175
// Default element IDs used by mount functions
176
"app"                              // Default app container ID (configurable)
177
"container"                        // Tabbar container ID (fixed)
178
"taro-navigation-bar"              // Navigation bar ID (fixed)
179
```
180

181
## Internal Components
182

183
The mount functions automatically initialize internal UI components:
184

185
- **Navigation Bar**: Creates back/home buttons, title display, and loading indicator
186
- **Tabbar**: Creates custom `<taro-tabbar>` element with tab configuration
187
- **Event Handlers**: Sets up navigation and tabbar interaction events
188

189
These components are initialized automatically and are not directly accessible through the public API.
190

191
## Configuration Requirements
192

193
### Basic Mount Configuration
194

195
```typescript { .api }
196
interface MountConfig {
197
  router: {
198
    mode: 'hash' | 'browser' | 'multi';
199
    basename: string;
200
  };
201
  window?: {
202
    navigationBarTitleText?: string;
203
    navigationBarBackgroundColor?: string;
204
    navigationBarTextStyle?: 'black' | 'white';
205
  };
206
}
207
```
208

209
### Tabbar Mount Configuration
210

211
```typescript { .api }
212
interface TabbarMountConfig extends MountConfig {
213
  tabBar: {
214
    color?: string;
215
    selectedColor?: string;
216
    backgroundColor?: string;
217
    borderStyle?: string;
218
    list: TabBarItem[];
219
  };
220
  pages: string[];
221
}
222

223
interface TabBarItem {
224
  pagePath: string;
225
  text: string;
226
  iconPath?: string;
227
  selectedIconPath?: string;
228
}
229
```
230

231
## Compatibility Notes
232

233
- **Android 6+ Support**: Uses `insertBefore` instead of `prepend` for navigation bar insertion
234
- **Custom App IDs**: Both functions support custom app element IDs
235
- **Multi-page Mode**: Navigation bar is skipped in multi-page mode
236
- **DOM Positioning**: Handles both existing and dynamically created app elements