# wechat-miniprogram/kbone

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/wechat-miniprogram-kbone).**

4,914 stars · 455 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/wechat-miniprogram/kbone
- awesome-repositories: https://awesome-repositories.com/repository/wechat-miniprogram-kbone.md

## Description

kbone is an isomorphic frontend framework and web-to-mini-program adapter. It serves as a cross-platform UI bridge and DOM simulation library that allows web applications to run inside WeChat Mini Programs by simulating a browser environment for JavaScript code.

The project enables the migration of web UI frameworks into restricted environments by providing simulated browser interfaces and APIs. It translates standard web components and routing into native mini program elements and page transitions, allowing a single codebase to function as both a standard website and a mini program.

The framework covers a broad range of capabilities including isomorphic routing, browser API polyfilling, and platform-specific component mapping. It also handles native-specific integration such as subpackage configuration, tab bar navigation, and social sharing.

Command-line tools are available to bootstrap isomorphic projects and standardize the initial development environment.

## Tags

### User Interface & Experience

- [Web Application Integration](https://awesome-repositories.com/f/user-interface-experience/mobile-web-integration/web-application-integration.md) — Simulates a browser environment using an adapter layer to execute web-based code within a native client environment. ([source](https://wechat-miniprogram.github.io/kbone/docs/))
- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-frameworks.md) — Provides a framework for building user interfaces that render consistently across web and mobile platforms.
- [Cross-Platform UI Bridges](https://awesome-repositories.com/f/user-interface-experience/native-ui-bridges/cross-platform-ui-bridges.md) — Translates standard web components and routing into native mini program elements and transitions.
- [Isomorphic Route Mappings](https://awesome-repositories.com/f/user-interface-experience/view-to-data-mappings/controller-to-component-mappings/isomorphic-route-mappings.md) — Translates web URL paths into native page identifiers to synchronize navigation between single page applications and native containers.
- [System Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling-systems/system-event-handling.md) — Monitors system-level interactions like pull-down refreshes and reach-bottom triggers to execute page actions. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))
- [Responsive Layout Scaling](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-scaling.md) — Scales font sizes and document styles dynamically to ensure a consistent visual presentation across different screen sizes. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))
- [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Enables the creation of bottom navigation menus using page names and image assets. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))

### Web Development

- [Isomorphic](https://awesome-repositories.com/f/web-development/isomorphic.md) — Enables sharing a single codebase between standard websites and WeChat Mini Programs.
- [Non-Browser API Emulations](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-apis/non-browser-api-emulations.md) — Simulates standard web interfaces and window objects to allow browser-based JavaScript to run in non-browser environments.
- [Platform Component Mapping](https://awesome-repositories.com/f/web-development/cross-platform-styling/platform-specific-styling/platform-component-mapping.md) — Translates standard HTML tags and custom web components into their corresponding native UI equivalents.
- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/web-development/cross-platform-ui-frameworks.md) — Builds user interface components that render consistently across different web and mobile environments using a single syntax. ([source](https://github.com/wechat-miniprogram/kbone#readme))
- [Frontend Framework Migration Tools](https://awesome-repositories.com/f/web-development/frontend-framework-migration-tools.md) — Executes frontend libraries by providing the necessary browser interfaces to run web-based components in non-browser environments. ([source](https://github.com/wechat-miniprogram/kbone#readme))
- [Cross-Runtime Frameworks](https://awesome-repositories.com/f/web-development/isomorphic-frameworks/cross-runtime-frameworks.md) — Provides a unified runtime for sharing a single codebase across web platforms and mobile mini programs.
- [Mini-Program Runtime Adapters](https://awesome-repositories.com/f/web-development/request-adapters/environment-runtime-adapters/mini-program-runtime-adapters.md) — Adapts standard web library calls to meet the specific runtime requirements of WeChat Mini Programs.
- [URL Route Mapping](https://awesome-repositories.com/f/web-development/dynamic-content-resolution/url-route-mapping.md) — Associates specific URL paths with page names to handle navigation and dynamic routing between different screens. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))

### Part of an Awesome List

- [Simulated Browser Environments](https://awesome-repositories.com/f/awesome-lists/devtools/simulated-browser-environments.md) — Provides simulated browser interfaces and DOM APIs to execute JavaScript frameworks in non-browser environments.
- [Development Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/development-frameworks.md) — Solution for isomorphic Web and小程序 development.
- [Frontend Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/frontend-frameworks.md) — Adapter for running web applications in mini-program environments.
- [Mini Program Development](https://awesome-repositories.com/f/awesome-lists/devtools/mini-program-development.md) — Solution for isomorphic Web and mini-program development.

### Programming Languages & Runtimes

- [View Hierarchy Mapping](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-environment-simulations/dom-state-simulation/view-hierarchy-mapping.md) — Implements a compatibility layer that maps web component behaviors and property updates to a native view hierarchy.
- [WeChat Mini-Program Runtimes](https://awesome-repositories.com/f/programming-languages-runtimes/styling-languages/mini-program/wechat-mini-program-runtimes.md) — Simulates a browser environment to run web-based applications within the WeChat Mini Program runtime.
- [Web Worker Integrations](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/concurrency-models/concurrency/execution-models/web-worker-integrations.md) — Maps browser-based worker calls to native background threading capabilities to execute tasks without blocking the main interface. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))

### Mobile Development

- [Mini Program Subpackage Configurations](https://awesome-repositories.com/f/mobile-development/mini-program-subpackage-configurations.md) — Organizes pages into smaller bundles to reduce initial loading times and manage associated plugin settings. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))
- [Mobile Performance Optimizations](https://awesome-repositories.com/f/mobile-development/mobile-performance-optimizations.md) — Optimizes application load times via subpackage configuration and efficient component library imports.

### Software Engineering & Architecture

- [Global Window Injections](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/environment-variable-management/environment-variable-injection/global-window-injections.md) — Defines constant values or window-level references that remain available across all execution scripts throughout the application lifecycle. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))
- [Runtime Environment Injections](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/environment-variable-management/environment-variable-injection/runtime-environment-injections.md) — Inserts required environment constants and window-level references into the execution context before loading application scripts.
- [External Component Integration](https://awesome-repositories.com/f/software-engineering-architecture/integration-interfaces/ui-component-integrations/external-component-integration.md) — Allows importing external native components and mapping their properties to application logic. ([source](https://wechat-miniprogram.github.io/kbone/docs/config/))