# Multiport Unified Development Toolskbone

kbone Is a Mini Program dedicated to WeChat and Web End isomorphic solutions.

# Introduction

The underlying model and Web End different, we want to directly Web It is not possible to move code to the Mini Program environment for execution. kbone To solve this problem, it implements an adapter that simulates the browser environment in the adaptation layer, allowing the Web End of the code can not make any changes to run in the Mini Program.

Here's a simple one.Code snippet：https://developers.weixin.qq.com/s/R9Hm0Qm67AcdYou can use the developer tools to open it to see the effect.

because kbone Isomorphism is achieved by providing adapters, so its advantages are obvious:

Most popular front-end frameworks are able to kbone Run on, for example Vue、React、Preact Wait.
Supports more complete front-end framework features because kbone Does not make changes to the underlying framework such as Sight to hit the target v-html Instructions, Vue-router Plug-in).
Provides a common house/good Interface that allows user code to change from the Web To the Mini Program side.
When running on the Mini Program side, you can still use the Mini Programs' own features, such as live-player Built-in components, sub-packageing functions).
Provides a number of House Extend the interface so that some interfaces that are not perfectly compatible with the Mini Program side have alternative uses such as getComputedStyle Interface).

# Use

In order to allow developers to have more freedom to build projects, the following three methods are provided, choose one of them:

# Use kbone-cli Rapid development

For new projects, you can use the kbone-cli To create the project, first install the kbone-cli:

npm install -g kbone-cli

Create a project:

kbone init my-app

Enter the project according to README.md Guidelines for the development of:

// Development Mini Program end
npm run mp

// Development Web end
npm run web

// to construct Web end
npm run build

PS: The project is based on webpack Build, about webpack The configuration of aspects can beClick here to viewWhile detailed configuration details about the Mini Program build can beRefer to this document。

# Rapid development using templates

In addition to using kbone-cli You can also directly convert existing templates clone Down, and then develop and transform based on the template:

project clone After coming down, follow the items in README.md Guidelines for the development of.

# Manual configuration development

This scenario is based on the webpack Build implementations. If you don't want to use official templates, want to build your own projects more flexibly, or want to retrofit existing projects, you need to add the corresponding configuration to implement them. kbone Construction of the project.

Two configurations are typically added:

Built into the Mini Program code webpack Configuration
Use webpack Special plug-ins used in the build mp-webpack-plugin Configuration

Click here to viewSpecific configuration and operation process.

# kbone-ui

kbone-ui Is someone who can support Mini Programs(kbone) and vue Multiport framework development UI Kurt.

That can be based on kbone Simultaneous development of Mini Programs and H5, can also be used alone to develop H5 Apply.
In support of Sight Syntax to support H5 Side and Mini Program side run
alignment WeChat weiui Style components

# file

For more detailed instructions and guidelines, please clickView Document。

PS: If the document cannot be accessed, try to access itBackup Document Image。

# community

Although the entire scheme Web The end frame is included and provides an adaptation layer, but it is not a silver bullet, it can not meet all scenarios, specific limitations can refer toProblem documentation. Questions about usage can be found at #Kbone Community Post. If you encounter additional problems, you can find the issue Feedback in.

# Choice

In fact, there have been many isomorphic solutions in the industry, each has its own advantages and disadvantages, there is no perfect solution to all problems. kbone Similarly, its advantages mentioned above, and its shortcomings are also brought by its implementation principle. kbone Is to use some performance degradation in exchange for a more comprehensive Web Support for terminal properties.

So on the performance side, if you are particularly critical of the performance of the Mini Program, it is recommended to use native Mini Program developmentIf your page has a large number of nodes (usually in the 1000 Node above), and also to ensure that the number of nodes in the infinite rise is still stable rendering performance, you can try the industry using static template translation schemeIn other cases, you can just use kbone It's not.

# case

WeChat Open Community