Kbone: A New Approach to WeChat Mini-Program and Web Co-development

With the rapid development of WeChat mini‑programs, the demand for a unified code base that can run both on the Web and on mini‑programs has grown. Kbone is an open‑source framework released by WeChat that lets developers write a single Vue‑based application and compile it to both platforms with minimal changes.

The article, originally a talk by Kbone author June in the YunJia community, explains the background, the technical solution, practical applications and a summary.

Background : The original WeChat Open Community was only a Web site. To provide a mini‑program version with a user experience close to the Web, a solution was needed that could reuse most of the existing Vue code without rewriting the DOM‑related parts.

Solution Overview : Kbone creates an adapter layer that emulates the browser DOM in the mini‑program logic layer (using libraries such as jsdom). The emulated DOM tree is then mapped to the mini‑program component tree (WXML) through custom components. This approach allows Vue’s component model, router, Vuex, and other plugins to work with only a small amount of glue code.

Key techniques include:

Building a fake DOM API that Vue can call.

Using a recursive custom‑component ( custom-dom ) to render the emulated DOM as a component tree.

Re‑implementing the event system on the fake DOM so that capture and bubbling behave like in a browser.

Optimising setData calls by passing only the data needed for each custom component, reducing diff size.

Reducing the number of custom‑component instances by pruning invisible nodes and merging leaf nodes into built‑in view components.

Implementation Details : The build process is based on Webpack. A Kbone Webpack plugin transforms the original Web bundle into a mini‑program bundle, injects environment variables (e.g., process.env.isMiniprogram ) and replaces browser‑specific APIs with their mini‑program equivalents (e.g., wx-button for a share button). Code size is kept under the 2 MB mini‑program limit by using standard techniques such as compression, tree‑shaking, code splitting and conditional loaders.

Performance : Benchmarks on synthetic DOM trees (up to 500 nodes) show comparable rendering time to a static‑template approach. For larger trees (>1000 nodes) the overhead of creating many custom components becomes noticeable, but typical mini‑program pages stay within the 100‑500 node range, making the trade‑off acceptable.

Usage : The framework has been applied to the WeChat Open Community, which originally used Vue, Vue‑router, Vuex and Markdown‑it. By adding Kbone, the same code base runs on both H5 and mini‑program platforms, with environment‑specific UI tweaks (e.g., different headers) handled via the injected flag.

Q&A Highlights :

Kbone currently supports Vue 2.x; Vue 3.x support is planned.

Mini‑program plugins and wxs are not yet supported.

Native mini‑program APIs (wx.*) can be used directly; environment checks allow fallback to Web APIs.

The emulated event system adds a small overhead but does not significantly affect performance.

All source code is open‑source on GitHub (https://github.com/wechat-miniprogram/Kbone) and can be extended to other frameworks such as React, Preact or Omi.