Historical review:

  • Why not use skeleton screen in wechat mini program to improve user experience?
  • Micro channel applet native performance optimization practice
  • Wechat applets custom component – table component is coming
  • Realize “Dingdingclocking” through wechat mini program
  • Micro channel small program project subcontracting, and subcontracting pre-download actual combat
  • Micro channel applet practice

Our micro channel small program project selection of technology stack is: native + embedded H5, technology selection is not wrong, just feel strange. The same design draft, usually H5 development is faster than small program development, frustrating, why? Small program provides a lot of packaged components, why is the development of low efficiency, find one of the root causes of the problem, small program native development, style using WXSS, can not use nested syntax, development efficiency is naturally discounted, later WXSS maintenance is also more troublesome.

Past lives

WXSS development is too slow, wechat small program native development, I don’t want to write WXSS. Thinking of wechat small programs are out for so long, there should be a mature solution to solve this problem, so I found the following solutions.

Solution 1: WebStorm configures less for automatic compilation

This solution is suitable for developers using webstorm editor, but I am now in love with VSCode (or wechat developer tools, debugging still use it) and do not want to use webstorm, so I have to find another solution.

Developers using the WebStorm editor can follow the following reference configuration.

  • Webstorm configures less for automatic compilation
  • Webstorm Less files are compiled into WXSS file configurations

Scheme 2: use gulp-less to compile automatically

Gulp-less is a plugin for the GULP automation component tool that processes LESS files to produce CSS files for production use. This kind of scheme, can use, still not quite meet my requirements, I am lazy, do not want to manually compile ah. The search for the next solution. 👇

  • Gulp-less Gulp processes less

Solution 3: WXSS – CLI: global command line + path

WXSS – CLI for Echo008. Run WXSS./path to compile less into WXSS. After using it for a week, I found that every day I went to the company for development, I had to copy the directory of the project to be compiled first. I didn’t want to copy the path every time. Less in node_modules is also compiled. This makes compiling slow. I just want to, in my project root directory under the pages and Components file to compile, no way?

None of these three schemes works smoothly with……

In this life

So I mentioned issues to the author of WXSS-CLI, and a week later the author ignored me.

Can not wait, not on their own, strip source code, changed to meet my requirements. In the directory where less needs to be compiled, run the less-to-wxss watch command to monitor in real time and convert less to WXSS files automatically.

It’s very handy to use. I left issus to the author again and ignored me 😓, it seems that other issus did not answer either, maybe the author was too busy to take care of it. Less-to-wxss watch is finally supported on multiple terminals. This plug-in for small program native development ape ape people, is really too easy to use. A plugin comes out of the box. Help yourself to need. Less – to – WXSS NPM package

less-to-wxss

Advantages of less-to-WXSS:

    1. Don’t pass path
    1. Global installation, one-click compilationless-to-wxss watch
    1. Support multiple terminals and multiple directories

The implementation principle of the improved less-to-WXSS is that you can enter the command to obtain the current location path, perform file traversal monitoring on the files under the changed directory, compile less into WXSS using the less tool, rename it and save it to the original directory. The original LESS file update continues the process above.

reference

  • Less. Js usage
  • Webstorm configures less for automatic compilation
  • Webstorm Less files are compiled into WXSS file configurations
  • Gulp-less Gulp processes less
  • wxss-cli

Feel free to leave a comment below on what methods you have used to build WXSS.