Multi-end unified development tool - kbone

kbone is a solution dedicated to WeChat synths and Web-side isomodes.

Brief introduction

Unlike the underlying model of WeChat small programs, we want to move the web side's code directly to the web side to execute in a small program environment. Kbone was born to solve this problem by implementing an adapter that simulates a browser environment in the adapter layer, allowing web-side code to run in small programs without any changes.

There is a simple code snippet here: https://developers.weixin.qq.com/s/R9Hm0Qm67Acd You can use the developer tool to open the look.

Because KBONE implements the same manner by providing an adapter, its advantage is obvious:

• Most popular front-end frames are available on Kbone, such as Vue, React, Preact, and more.
• Supports more complete front-end frame features because Kbone does not delete the frame underlayer (such as V-HTML instructions in Vue, Vue-Router plug-in).
• Provides common DOM / BOM interfaces, allowing user code to migrate from the web end to the small program end from the web side without doing too much change.
• When running in a small program, you can still use the characteristics of the small program itself (such as a Live-Player Built-in Components, Buffle Function).
• Some DOM expansion interfaces are provided to make some interfaces that cannot be perfectly compatible with small-range ends have alternatives (such as getComputedStyle interfaces).

use

In order to allow developers to be more freely carry out the project, there are three ways, optionally one of them:

Rapid development using KBONE-CLI

For new projects, you can use KBONE-CLI to create a project, first install KBONE-CLI:

npm install -g kbone-cli

Create a project:

kbone init my-app

Enter the project, develop according to the Guidelines of Readme.md:

// 开发小程序端
npm run mp

// 开发 Web 端
npm run web

// 构建 Web 端
npm run build

PS: Project Based on WebPack builds, information about WebPack can be viewed here, and detailed configuration details about the apparatus constructing can refer to this document.

Rapid development using templates

In addition to using KBONE-CLI, you can also direct existing templateclones and then develop and transform on the template:

• Vue project template
• React Project Template
• KBONE-UI project template
• PREACT project template
• OMI project template

After the project clone is now, it is developed according to the guide of Readme.md in the project.

Manual configuration development

This program is based on the WebPack build implementation. If you don't want to use the officially provided template, you want to build your own project, or want to transform the existing projects, you need to add your corresponding configuration to implement the KBONE project.Construct.

It usually needs to add two configurations:

• WebPack configuration constructed to the small program code
• Special plug-in MP-WebPack-Plugin configuration used in WebPack builds

Click here to view specific configuration methods and operational processes.

kbone-ui

kbone-ui is a multi-end UI library that supports both kbone and vue framework development.

• You can develop both small programs and H5 based on kbone, or you can develop H5 applications separately.
• Supports H5-side and small-terminal run with Vue syntax
• Align WeChat weui style components

Document

For more detailed instructions and guidance, you can click to view the documentation.

Community

Although this scenario includes the entire Web-side framework and provides an appropriate layer, it is not a silver bullet and does not meet all scenarios, with specific limitations that can be referenced to the problem documentation. U se related questions to post in the Kbone community. If you experience other issues, you can give feedback in issue.

Choose

In fact, the industry has emerged a lot of omogeneous solutions, each solution has its own advantages and disadvantages, there is no perfect solution to all problems. T he same is true of kbone, whose advantages are mentioned above, and its shortcomings are due to its implementation principles. kbone uses a certain amount of performance loss in exchange for more comprehensive web-side feature support.

So in terms of performance, if you are particularly demanding on the performance of small programs, it is recommended to develop directly using native small programs, if you have a particularly large number of page nodes (usually above 1000 nodes), and also to ensure that there is still stable rendering performance when the number of nodes increases indefinitely, you can try the industry with static template translation schemes;

Case