what is mpvue

WeChat Mini Program recommends a concise development method and completes lightweight product functions through multi-page aggregation. The mini program is downloaded locally as an offline package, loaded and started through the WeChat client. The development specifications are simple, the technology is thoroughly encapsulated, and it has its own development system. It has the shadow of Native and H5, but is never the same.

What is mpvue?

mpvue is a front-end development framework targeted at developing small programs. Its core goal is to improve development efficiency and enhance development experience. Using this framework, developers only need to have a preliminary understanding of the mini program development specifications and be familiar with the basic syntax of Vue.js to get started. The framework provides a complete Vue.js development experience. Developers write Vue.js code, and mpvue parses and converts it into a small program and ensures that it runs correctly. In addition, the framework also provides developers with quick start sample code through the vue-cli tool. Developers only need to execute a simple command to get a runnable project.

Why do mpvue?

At the beginning of the internal testing of the mini program, we planned to quickly iterate a product implementation that benchmarked H5. The core demands are: rapid implementation, code reuse, low cost and high efficiency... Subsequent experiences After constructing multiple mini programs, combining business scenarios, technology selection and mini program development methods,

we sorted out the main problems faced during the development stage:

The componentization mechanism is not perfect

Lack of multi-end code reusability

The mini program framework and the team technology stack cannot be organically combined

The learning cost of mini programs is not low enough

Component mechanism:

The applet logic and the view layer code are separated from each other. After the public components are extracted, they cannot be aggregated into a single file entry. The components need to be introduced in the view layer and logic layer respectively, resulting in poor maintainability. ; The component has no namespace mechanism, event callbacks must be set as global functions, the component design has the risk of naming conflicts, and data encapsulation is not strong. Developers need a friendly code organization method, one-time import through ES modules, and good encapsulation of component data. Mature component mechanism is crucial to engineering development.

Multi-terminal reuse:

There are two common business scenarios, which are transforming existing H5 products into small program applications or vice versa. From an efficiency perspective, developers hope to complete development by reusing code, but the mini program development framework cannot do this. We tried to convert the H5 code into a small program through static code analysis, but only the view layer conversion was done, which could not bring more benefits. Multi-end code reuse requires more mature solutions.

Introducing Vue.js:

The small program development method is similar to H5, so we consider code reuse with H5. Following the team's technology stack selection, we determined Vue.js as the mini program development specification.

Using Vue.js to develop small programs will directly bring about the following development efficiency improvements:

H5 code can be reused into small programs with minimal modifications

Use Vue.js component mechanism to develop small programs, which can realize the reuse of small programs and H5 components

After the technology stack is unified, the learning cost of small programs is reduced, and developers do not need to learn more when switching from H5 to small programs.

Vue.js code allows all front-ends to directly participate in development and maintenance

Why Vue.js? This depends on the team’s technology stack selection. Introducing new selections is contrary to unifying the technology stack and improving development efficiency, and is contrary to the original intention of the development tool service business.

The above is the detailed content of what is mpvue. For more information, please follow other related articles on the PHP Chinese website!