Can WeChat mini programs use vue.js?

WeChat mini programs can use vue.js. mpvue is a front-end framework that uses [Vue.js] to develop WeChat mini programs. Using this framework, developers will get a complete [Vue.js] development experience. , while providing code reuse capabilities for H5 and mini programs.

【Recommended related articles: vue.js】

WeChat mini programs can use vue.js

mpvue is a front-end framework that uses Vue.js to develop WeChat mini programs. Using this framework, developers will get a complete Vue.js development experience, while providing code reuse capabilities for H5 and mini programs. If you want to transform an H5 project into a small program, or if you develop a small program and want to convert it to H5, mpvue will be a very suitable solution.

Features of Mini Program Development

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.

The applet itself is positioned as a simple logical view layer framework. It is not officially recommended to develop complex applications, but the business requirements are difficult to simplify. Complex applications have higher requirements for development methods, such as components and modularization, automatic construction and integration, code reuse and development efficiency, etc. However, small program development specifications greatly limit these capabilities. In order to solve the above problems and provide a better development experience, we created mpvue to develop WeChat mini programs using Vue.js.

What is mpvue

mpvue is a front-end development framework positioned to develop 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 plan to quickly iterate a product implementation that benchmarks H5. The core appeal is: rapid implementation, Code reuse, low cost and high efficiency... Afterwards, we went through the construction of 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

• The code multi-end reuse capability is lacking

• The small program framework and team technology stack cannot be organized organically Combined with

• The mini program learning cost is not low enough

Component mechanism: The mini program logic and the view layer code are separated from each other. Public components cannot be aggregated into a single file entry after being extracted. Components need to be introduced in the view layer and logic layer respectively, which results in poor maintainability. Components have no namespace mechanism, and event callbacks must be set as global functions. Component design has the risk of naming conflicts, and data encapsulation is not possible. powerful. Developers need a friendly code organization method, one-time import through the

ES module; component data is well encapsulated. Mature component mechanism is crucial to engineering development.

Multi-terminal multiplexing: 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 we only did the view layer conversion, 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 cost of learning small programs is reduced, and developers switch from H5 to small programs The program does not require more learning

• 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 goes against the original intention of the development tool service business.

The evolution of mpvue

The formation of mpvue originated from business scenarios and needs. The determination of the final plan went through three stages.

Phase 1:We implemented a view layer code conversion tool designed to improve the efficiency of first-time code development. Conduct secondary development on this target code by converting H5 view layer code into mini program code, including HTML tag mapping, Vue.js templates and style conversion. We have achieved limited code reuse, but the cost of component development and small program learning has not been effectively improved.

The second phase: We focus on improving the code componentization mechanism. The code organization form was designed with reference to the Vue.js

component specification, and the code was parsed into small programs through the code conversion tool. The conversion tool mainly solves data synchronization, life cycle association and namespace issues between components. In the end, we implemented a

Vue.js syntax subset, but if we want to implement more features or follow the Vue.js version iteration, the workload becomes difficult to estimate and feels never-ending.

The third stage: Our goal is to support the full set of Vue.js syntax and achieve the purpose of developing small programs using Vue.js

. And by introducing Vue.js runtime, it supports Vue.js syntax, thus avoiding human syntax adaptation. At this point, we have completed the purpose of developing small programs using

Vue.js. The goals of unifying technology stacks, component-based development, multi-end code reuse, reducing learning costs and improving development efficiency have been better achieved.

Related free learning recommendations: javascript (video), WeChat applet development tutorial

The above is the detailed content of Can WeChat mini programs use vue.js?. For more information, please follow other related articles on the PHP Chinese website!