Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you how to use kbone to solve Vue projects while supporting Mini Program problems related knowledge points, detailed content, clear logic, I believe most people are too aware of this knowledge, so share this article for your reference, I hope you will have something to learn after reading this article, let's take a look at it.

What is kbone?

During the development of WeChat Mini Programs, many developers will encounter the demand of Mini Program and Web. Due to the different running environments of Mini Program and Web, developers often need to maintain two similar sets of code, which is laborious and out of sync for developers.

In order to solve the above problems, WeChat Mini Programs launched an isomorphic solution kbone to solve this problem.

So, how do you use kbone? Here we will explain it to you through an example of todo.

Basic structure

First, let's take a look at the directory structure of the next basic kbone project (todo here is an example based on Vue, and kbone is also available in React, Preact, Omi, etc., details can be moved to kbone github).

Because kbone is designed to solve the problems of Mini Program and Web, there will be two configurations in each directory (one for Mini Program and one for Web)

Entrance

Whether it is Mini Program or Web, the entry file is required. In the src/index directory, main.js is the main portal for Web, and main.mp.js is the main portal for Mini Program.

Of course, the Web side will have one more entry page than Mini Program, namely index.html (located in the root directory).

The following two codes are the codes for the entry of mini program and Web, respectively. You can see that the entry code of mini program is encapsulated in the createApp function (fixed here). There will be one more operation to create app node than Web, and the rest is basically the same.

/ / Mini Program port entry import Vue from 'vue'import todo from'. / todo.vue'export default function createApp () {/ / create an app node to bind const container = document.createElement ('div') container.id =' app' document.body.appendChild (container) return new Vue ({el:'# app', render: h = > h (todo)})} / / web port portal import Vue from 'vue'import todo from'. / todo.vue'new Vue ({el:'# app' Render: h = > h (todo)})

Todo.vue

In the above entry chart, you can see that in the source directory, except before the entry files are separated, the page files are shared, here you can directly use the Vue writing method, do not have to do special adaptation.

Configuration

After writing the code, how are we going to run the project? At this point, the configuration comes in handy.

The Web side is configured with a normal Vue configuration. The only difference between the mini-program side configuration and the Web side configuration is that you need to introduce a mp-webpack-plugin plug-in to convert the Vue components into Mini Program code.

Build code

Next, we need to build the code so that it can run in their respective runtime environments. After the build is complete, the production code is located in the dist directory.

/ / build web side code / / object code build Mini Program side code in dist/webnpm run build// object code in dist/mpnpm run mp

The build of the mini program side will be one more step than that of the Web side, that is, the npm build.

Enter the dist/mp directory and execute the npm install installation dependency. After importing the dist/mp directory as a Mini Program project with developer tools, click build npm under the toolbar to preview the effect.

Effect.

Finally, let's look at the effect of todo. First experience of kbone, done~

The todo code can be picked up at kbone/demo13.

These are all the contents of this article entitled "how to use kbone to solve Vue projects while supporting Mini Program problems". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.