Back to Qiankun

API Reference

docs/api/index.md

2.10.163.3 KB
Original Source

API Reference

qiankun provides a simple yet powerful API set for building micro-frontend applications. All APIs are fully typed with TypeScript definitions to ensure both developer experience and type safety.

📚 Core APIs

Application Registration & Startup

APIDescriptionType
registerMicroAppsRegister micro applications(apps: RegistrableApp[], lifeCycles?: LifeCycles) => void
startStart qiankun framework(opts?: StartOpts) => void
loadMicroAppManually load micro application(app: LoadableApp, configuration?: AppConfiguration, lifeCycles?: LifeCycles) => MicroApp

Utility APIs

APIDescriptionType
isRuntimeCompatibleCheck runtime compatibility() => boolean

🎯 Quick Navigation

By Use Case

Route-based Mode

typescript
import { registerMicroApps, start } from 'qiankun';

// 1. Register micro apps
registerMicroApps([...]);

// 2. Start framework
start();

Manual Loading Mode

typescript
import { loadMicroApp } from 'qiankun';

// Manually load micro app
const microApp = loadMicroApp({...});

Compatibility Check

typescript
import { isRuntimeCompatible } from 'qiankun';

if (isRuntimeCompatible()) {
  // Start micro-frontend application
}

By Functionality

CategoryRelated APIsDescription
App ManagementregisterMicroApps, loadMicroAppRegister and load micro applications
Framework ControlstartFramework startup and configuration
UtilitiesisRuntimeCompatibleHelper utility methods

🔧 Type Definitions

qiankun provides complete TypeScript type definitions:

typescript
import type {
  RegistrableApp,
  LoadableApp,
  MicroApp,
  LifeCycles,
  AppConfiguration,
} from 'qiankun';

See Type Definitions for detailed information.

📖 Detailed Documentation

Core APIs

Reference Documentation

💡 Usage Recommendations

  1. Standard Route-based Mode (Recommended)

    typescript
    registerMicroApps([...]) → start()
    
  2. Dynamic Loading Mode

    typescript
    loadMicroApp({...}) 
    
  3. Hybrid Mode

    typescript
    registerMicroApps([...]) → start() + loadMicroApp({...})
    

Best Practices

  • ✅ Use TypeScript for complete type support

  • ✅ Register all micro apps before starting the framework

  • ✅ Use lifecycle hooks appropriately for state management

  • ✅ Configure proper error handling

  • ❌ Avoid registering duplicate app names

  • ❌ Avoid calling main app APIs from micro apps

  • ❌ Avoid time-consuming operations in lifecycle hooks