This article describes how to split the existing Vue template (Template + Script + style) into wechat template (WXML + JS + WXSS) with the minimum cost.

The correspondence is obvious, and you can copy and paste it. But how can we quickly implement these high-frequency and inefficient tasks?

2.1 Vue template ==> WeiXin *.wxml

Although the project was small, the split VUE components were more detailed, resulting in many pages. It takes time to copy, paste, and replace the whole thing. So after a search, according to various versions of the Internet leaders, I finally concluded my own vueTemplateToWxml compiler plug-in, which can transform HTML tags and attributes into WXML tags and attributes, and can restore the previous code structure as much as possible with the minimum cost of changes.

The principle is simple:

  • usingvue-template-compilerThe plug-inparseComponentMethod, you can putvueThe object structure of the file;
  • And then thetemplateThe object’scontentContent that is handed to the plugincompileMethod, you get oneCompiledResultObject that contains the template’sAST syntax tree 和 Render functionInformation such as;
  • Finally write our own handler that willAST syntax treeObject compile true yesThe Dom treeStructure;

Compile the plug-in code is more than this paste, will write a separate article to introduce. The source code is available for comment or private chat.

The final operation effect is shown in the figure below:

2.2 Vue script ==> WeiXin *.js

Although there has been written before Vue2 to wechat small program JS plug-in, but now to convert the project is using Vue3

Fortunately, the structure of the code was clear, so I took the time to copy and paste it. If you are interested in writing another Vue3CompileToWxjs plugin script later on, so be it.

Vue style ==> WXSS

The original project uses the stylus preprocessor, which is rough and concise in writing. However, if you want to directly copy it into the *. CSS file, it is more difficult to use, so I found a CSS Portal website, which contains a variety of tools for processing CSS.

For example, we use the Stylus to CSS Compiler Compiler. Copy the Stylus style Code into the Stylus Code text box above and click the Compile button below to get the native CSS syntax. The usage method is shown in the figure below:

This can be copied to a *.wxss file, saving us a lot of high-frequency inefficient operations.

2. X

Here, a simple *.vue component can be converted into wechat corresponding *.wxml, *.js, *.wxss files, and the style and events are relatively complete, has been able to run well in wechat developer tools. What is missing is some dynamic style replacement, maintenance and introduction of global state management, etc. Then some browser native API (such as Window, Document, etc.) is not available in the wechat environment, need to be replaced by wechat small program API.

series

The title of the article may not be determined, and it will be improved in the later stage.

  • Vue3 project to native small program plug-in (I) to initialize the project

  • Vue3 project to native small program plug-in (2) Vue template split into Wx template

  • Vue3 project to native small program plug-in (3) replace Vuex with Mobx

  • Vue3 project to native applet plug-in (4) applet and plug-in event interaction

  • Vue3 project turn native mini program plug-in (v) use Http and Websocket within the plug-in

  • More…