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

Utility Functions

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

Navigation bar control, mobile detection, route alias management, and other utility functions for enhanced routing functionality.

Capabilities

Navigation Bar Control

Functions to control navigation bar appearance and behavior through the event system.

/**
 * Set navigation bar title via event system
 * @param title - Title text to display in navigation bar
 */
function setTitle(title: string): void;

/**
 * Set navigation bar style colors
 * @param option - Background and front color configuration
 */
function setNavigationBarStyle(option: { 
  backgroundColor: string; 
  frontColor: string; 
}): void;

/**
 * Show or hide navigation bar loading indicator
 * @param loading - Whether to show loading indicator
 */
function setNavigationBarLoading(loading: boolean): void;

Usage Examples:

import { 
  setTitle, 
  setNavigationBarStyle, 
  setNavigationBarLoading 
} from "@tarojs/router";

// Update navigation bar title
setTitle("Profile Settings");

// Change navigation bar colors
setNavigationBarStyle({
  backgroundColor: "#007AFF",
  frontColor: "#ffffff"
});

// Show loading indicator
setNavigationBarLoading(true);

// Hide loading indicator after operation completes
setTimeout(() => {
  setNavigationBarLoading(false);
}, 2000);

Mobile Platform Detection

Utility functions to detect specific mobile browser environments.

/**
 * Detect if running in WeChat browser
 * @returns True if in WeChat/MicroMessenger browser
 */
function isWeixin(): boolean;

/**
 * Detect if running in DingTalk browser
 * @returns True if in DingTalk browser
 */
function isDingTalk(): boolean;

Usage Examples:

import { isWeixin, isDingTalk } from "@tarojs/router";

if (isWeixin()) {
  console.log("Running in WeChat browser");
  // Enable WeChat-specific features
}

if (isDingTalk()) {
  console.log("Running in DingTalk browser");
  // Enable DingTalk-specific features
}

Multi-Page Title Management

Specialized title management for multi-page applications with DingTalk integration.

/**
 * Set page title for multi-page applications (with DingTalk support)
 * @param title - Page title to set
 */
function setMpaTitle(title: string): void;

Usage Example:

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

// Set title for multi-page app
setMpaTitle("Dashboard - My App");

// DingTalk integration is automatic when:
// - Running in DingTalk browser
// - SUPPORT_DINGTALK_NAVIGATE is not 'disabled'
// - Will load DingTalk JSAPI and use native title setting

Route Alias Management

Global route alias management system for custom routing patterns.

/**
 * Global route alias instance for managing custom route mappings
 */
const routesAlias: RoutesAlias;

interface RoutesAlias {
  /** Set custom route mappings */
  set(customRoutes: Record<string, string | string[]>): void;
  /** Get route configuration for URL */
  getConfig(url?: string): string[] | undefined;
  /** Get original route for alias */
  getOrigin(url?: string): string;
  /** Get alias for route */
  getAlias(url?: string): string;
  /** Get all routes for URL */
  getAll(url?: string): string[];
}

Usage Examples:

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

// Set up custom route aliases
routesAlias.set({
  "/home": "/pages/index",
  "/user": ["/pages/profile", "/pages/user-detail"],
  "/shop": "/pages/store"
});

// Get original route from alias
const originalRoute = routesAlias.getOrigin("/home"); // Returns "/pages/index"

// Get alias from original route  
const aliasRoute = routesAlias.getAlias("/pages/index"); // Returns "/home"

// Get all possible routes for a URL
const allRoutes = routesAlias.getAll("/user"); // Returns ["/pages/profile", "/pages/user-detail"]

// Get route configuration
const config = routesAlias.getConfig("/home"); // Returns ["/home", "/pages/index"]

Event System Integration

Navigation bar control functions work through Taro's event system:

// Event names triggered by utility functions
"__taroH5SetNavigationBarTitle"    // Triggered by setTitle()
"__taroH5setNavigationBarColor"    // Triggered by setNavigationBarStyle()  
"__taroH5setNavigationBarLoading"  // Triggered by setNavigationBarLoading()

These events are handled internally by the navigation bar component to update the UI in real-time.

DingTalk Integration

The setMpaTitle function includes automatic DingTalk integration:

Detection: Automatically detects DingTalk browser environment
API Loading: Dynamically loads DingTalk JSAPI platform and navigation APIs
Native Title: Uses DingTalk's native title setting API for better integration
Fallback: Falls back to standard document.title for other browsers
Performance: Only loads DingTalk APIs once per session

Route Processing Features

The route alias system supports:

One-to-One Mapping: Single route aliases ("/home": "/pages/index")
One-to-Many Mapping: Multiple target routes for one alias ("/user": ["/profile", "/detail"])
Bidirectional Lookup: Get original from alias or alias from original
Leading Slash Normalization: Ensures all routes start with /
Configuration Retrieval: Get full mapping configuration for any URL

Type Definitions

interface Taro.Page {
  /** Page route without query parameters */
  route: string;
  /** Full page path with query parameters */
  path?: string;
  /** Page initialization options/parameters */
  options?: any;
  /** Page lifecycle methods */
  onShow?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
}

Install with Tessl CLI