Self-developed PSD parser dynamically generates static code to improve your development efficiency

Preface

Hello everyone, welcome to the Useless Innovation technology channel. That's right! You read that right, here is a combination of useless technologies or technologies that are rarely touched in daily life. Innovate a more useless tool and provide it for everyone to use. Therefore, we call it useless innovation, or we can also call it berry innovation.

Finished product display

Before explaining my development and learning process, I will first share the tools with everyone. If you want to know more about us or want to learn and cooperate, you can send me a private message. Quick access address：http://meichuang.org.cn/meichuangToos/#/index

front page

When you enter the homepage of the platform, you can see a very simple style, which is mainly divided into three areas: the header area, the introduction area, and the functional module area. What we developed this time: the “useless” static code generator tool is our first product, also known as Pixel Partner.

*When I chose this name, I wanted this tool to be your partner in the development process. It can help you complete the task of cutting pictures at any time, so that you are no longer a picture cutting boy. *

Pixel Partner

When you enter the Pixel Partner tool, you will be asked by default to upload a PSD mockup first. After the upload is completed, it will help you with cutting, rendering and other actions, and finally enter the console.

The console page is divided into three modules:

1. File preview area on the left: You can upload multiple psds and switch at any time.
2. The page preview area in the middle: preview the corresponding psd interface.
3. Ribbon on the right: Set the configuration of download code.

Mainly explain the functions of the functional area:

1. Source code type: Generate code using the syntax and rules of the corresponding type. Contains HTML, Vue2.x, React, Uniapp, WeChat applet
2. Size standard: The page adapts to the size. According to the value you fill in, all the elements of the page are generated to the corresponding adapted size, so that they can be perfectly presented on the page.
3. Unit standard: According to the size and unit, it can be adapted to the display of different clients. Contains PX, REM, VH, VW
4. Font: Upload the corresponding text font to restore the visual draft.

Self-test

After the development was completed, we also conducted self-tests for a period of time to summarize the overall integrity of the current website.

1. Parse poster-related PSD files, which can be perfectly parsed, as long as the corresponding font file is uploaded (This is very important). Our company is also using it now, which basically saves one or two people’s working hours (the boss is very satisfied).
2. The layout is not strong, and it is not very friendly to the management backend or daily business viewing pages. The current overall layout is based on positioning and has no structure. We are constantly making breakthroughs in this regard (If you have the ability and interest in this area People can join our small team, and we can open source in this area)
3. The recognition is not strong and cannot be recognized as input boxes, tables, icons, etc. We are also looking for a breakthrough point for this. To be honest, it is a bit difficult. There is no one in this field (If anyone is willing to teach us how to train large models, please send me a private message, or if you are willing to cooperate)

Summarize

The above introduction ends here. The operation is very simple, and the function of generating page code is also very nice. Everyone can try it. Maybe it will be helpful to you, I introduced this tool to a friend, and he directly used it to take orders to develop pages. He complained that he could borrow more orders for drawing static pages.I secretly envy people who have private contracts. That’s it for this issue, see you next time.