tessl/npm-tarojs--router

A routing system for H5 (web) applications in the Taro cross-platform framework, providing compatibility with mini-program routing specifications.

—

Pending

Overview

Eval results

Files

Application Mounting

Name: tessl/npm-tarojs--router
Author: tessl

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

Capabilities

handleAppMount

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

/**
 * Mount the application without tabbar support
 * @param config - Router configuration
 * @param history - History instance (unused parameter)
 * @param appId - App element ID, defaults to 'app'
 */
function handleAppMount(
  config: SpaRouterConfig | MpaRouterConfig,
  history: History,
  appId?: string
): void;

Usage Example:

import { handleAppMount } from "@tarojs/router";

const config = {
  router: { 
    mode: "hash", 
    basename: "/" 
  },
  window: { 
    navigationBarTitleText: "My App",
    navigationBarBackgroundColor: "#000000",
    navigationBarTextStyle: "white"
  }
};

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

// Mount with custom app ID
handleAppMount(config, history, "my-custom-app");

Mount Process:

Finds or creates the app element with specified ID (defaults to 'app')
Adds taro_router CSS class to the app element
Appends the app element to its parent container if not already positioned
Initializes the navigation bar component within the app wrapper

handleAppMountWithTabbar

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

/**
 * Mount the application with tabbar container support
 * @param config - Router configuration with tabbar settings
 * @param history - History instance for tabbar navigation
 * @param appId - App element ID, defaults to 'app'
 */
function handleAppMountWithTabbar(
  config: SpaRouterConfig | MpaRouterConfig,
  history: History,
  appId?: string
): void;

Usage Example:

import { handleAppMountWithTabbar } from "@tarojs/router";

const config = {
  tabBar: {
    color: "#999999",
    selectedColor: "#333333",
    backgroundColor: "#ffffff",
    list: [
      { 
        pagePath: "/home", 
        text: "Home",
        iconPath: "/images/home.png",
        selectedIconPath: "/images/home-active.png"
      },
      { 
        pagePath: "/profile", 
        text: "Profile",
        iconPath: "/images/profile.png",
        selectedIconPath: "/images/profile-active.png"
      }
    ]
  },
  router: { 
    mode: "hash", 
    basename: "/" 
  },
  pages: ["/home", "/profile"]
};

handleAppMountWithTabbar(config, history, "app");

Tabbar Mount Process:

Finds or creates the app element with specified ID
Adds taro_router CSS class to the app element
Creates tabbar container structure:
- taro-tabbar__container (main container with ID 'container')
- taro-tabbar__panel (panel containing the app content)
Moves the app element into the tabbar panel structure
Replaces the original app element with the tabbar container
Initializes both tabbar and navigation bar components

DOM Structure

Basic App Mount Structure

<div id="app" class="taro_router">
  <!-- Navigation bar (auto-generated) -->
  <div id="taro-navigation-bar" class="taro-navigation-bar-no-icon">
    <!-- Navigation bar content -->
  </div>
  <!-- App content -->
</div>

Tabbar App Mount Structure

<div class="taro-tabbar__container" id="container">
  <!-- Navigation bar (auto-generated) -->
  <div id="taro-navigation-bar" class="taro-navigation-bar-no-icon">
    <!-- Navigation bar content -->
  </div>
  <div class="taro-tabbar__panel">
    <div id="app" class="taro_router">
      <!-- App content -->
    </div>
  </div>
  <!-- Tabbar component (auto-generated) -->
  <taro-tabbar>
    <!-- Tabbar content -->
  </taro-tabbar>
</div>

CSS Classes

// App Container Classes
".taro_router"                     // Router container class added to app element

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

// Navigation Bar Classes (auto-generated)
".taro-navigation-bar-no-icon"     // Main navigation bar container
".taro-navigation-bar-back"        // Back button container
".taro-navigation-bar-home"        // Home button container  
".taro-navigation-bar-title-wrap"  // Title wrapper container
".taro-navigation-bar-title"       // Title text element
".taro-navigation-bar-loading"     // Loading indicator

Element IDs

// Default element IDs used by mount functions
"app"                              // Default app container ID (configurable)
"container"                        // Tabbar container ID (fixed)
"taro-navigation-bar"              // Navigation bar ID (fixed)

Internal Components

The mount functions automatically initialize internal UI components:

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

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

Configuration Requirements

Basic Mount Configuration

interface MountConfig {
  router: {
    mode: 'hash' | 'browser' | 'multi';
    basename: string;
  };
  window?: {
    navigationBarTitleText?: string;
    navigationBarBackgroundColor?: string;
    navigationBarTextStyle?: 'black' | 'white';
  };
}

Tabbar Mount Configuration

interface TabbarMountConfig extends MountConfig {
  tabBar: {
    color?: string;
    selectedColor?: string;
    backgroundColor?: string;
    borderStyle?: string;
    list: TabBarItem[];
  };
  pages: string[];
}

interface TabBarItem {
  pagePath: string;
  text: string;
  iconPath?: string;
  selectedIconPath?: string;
}

Compatibility Notes

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