In-depth evaluation of the top five WeChat mini program development IDEs

The WeChat applet has been in internal testing for some time. The author wrote several small demos out of curiosity and learning. Although I didn’t encounter too many pitfalls in the MINA framework, the official development tools really didn’t dare. Compliment. In response to several needs, the author has tried the tools currently on the market that support the development of small programs. I have painstakingly summarized them as follows for your reference.

The WeChat applet has been in internal testing for some time. The author wrote several small demos out of curiosity and learning, although I have not encountered them in the MINA framework. There are too many pitfalls, but the official development tools are really not flattering.

• The api prompt is incomplete. You have to check the api one by one. Writing code is super slow.

• Many necessary shortcut keys are not available, such as Select all keywords, quickly copy a line, etc.

• Can’t select a color theme? What if you don’t like the white style?

• No plugins, no plugins, no plugins I have said the important things about plug-ins three times

I have no choice but to embark on the journey of trying various IDEs. Now let me talk about my needs or assumptions about IDEs:

• Lightweight: I don’t like behemoths like Eclipse. Even if similar tools appear, I will not use them because 90% of their functions will not be used.

• Customizable code coloring: Code coloring is a must-have feature. It would be best if it supports color templates

• Accurate code tips: this It’s so important, everyone understands

• Debuggable: IDE can be debugged or run

• Real-time preview interface: Since application development is different from web pages, Real-time preview must load dynamic data into the interface when the program is running. I don’t have high hopes for this.

In view of the above requirements, the author has tried various supports currently on the market. The tools for small program development are summarized below for your reference.

WeChat Mini Program Official Development Tool

Note that I did not use the word "IDE" in this subtitle. Because in the author's eyes, it is really a tool, not an IDE. The code editing function in the official tool is to embed the code editing function of vscode into the tool, which is not enough to support development.

Advantages

Because it is an official tool, other third-party tools have incomparable natural advantages, if it is not that its code editing function is too weak.

• Official tool, debuggable, previewable

• Basic code editing, smart prompts, debugging and other functions are available

• Project management, creation, mobile preview, code submission review

• Official maintenance update

Disadvantages

The disadvantages are also obvious. Generally speaking, it is a tool rather than an IDE. The poor code editing function makes writing code very awkward. This is the most important reason why I gave up it.

• The api prompt is incomplete. You have to check the api one by one. Writing code is super slow.

• Many necessary shortcut keys are not available, such as Select all keywords, quickly copy a line, etc.

• Can’t select a color theme? What if you don’t like the white style?

• No plugins, no plugins, no plugins Let’s talk about important things about plug-ins three times

Summary

Currently, because we need to use WeChat web development tools to create, debug, and view small programs , preview, and upload, so this tool is essential. However, the code editing function is really poor. It is recommended to use other third-party code editing tools instead.

Sublime Text 3

After talking about the official tools, let’s talk about the most commonly used tool in my daily work, sublime text 3. It It is positioned as a code editor rather than an IDE. After trying it out, it can only be considered average in terms of code prompts.

Advantages

• Opening files is twice as fast and the UI is simple and elegant

• Code editing experience Comfortable and efficient

• It has a large number of plug-ins. Basically, corresponding plug-ins can be found to meet different needs.

• Third-party developers develop small program plug-ins For code coloring and code hints

Disadvantages

• No debugging, no preview

• Because It is a plug-in written by a third-party developer, and the code prompts are not very comprehensive

Summary

In addition to its own code editing advantages, it does not have any substantial help in the development of small programs. In the end, the Sublime Text solution was also abandoned by the author.

I have to complain about this plug-in of Sublime Text. It took me a long time to get it running, which is frustrating.

Note: The plug-in download link is at the end of the article

Vim + WEPT

Vim this editor The god of vim has always been my tool for showing off. I won’t say much about the goodness of vim, lest the Emacs people come and scold me.

Someone on the Internet has developed a corresponding plug-in called Wxapp.vim. I have used this plug-in briefly. It includes file detection, intelligent completion, document jump, syntax highlighting, indentation, code snippets, and word lists. , grammar checking and other functions. Overall it's good, but there is one serious problem. When I was doing server development, I basically used Vim for programming, and used some other plug-ins and tools to run debugging directly on the terminal. But I had to give up the WeChat Mini Program after using it for a long time, because I had to frequently switch back and forth between Vim and the official WeChat Mini Program tool, which made me extremely irritated. According to the author's usual style, you should throw away the mouse when using Vim.

But in the end I found a remedy, which I will introduce below.

Advantages

• Code highlighting, code prompts and other functions are complete.

• There is a small program development plug-in Wxapp.vim that can be used. As mentioned above

Disadvantages

• Unable to debug preview

• Another problem is that many people cannot handle Vim, which has a high learning curve

• UI and usage are not in line with most people's habits

Summary

'WEPT' solves what I said about Vim above Pain points.

WEPT is a real-time development environment for WeChat mini programs. Its goal is to provide an efficient, stable, friendly, and unrestricted operating environment for mini program development. In other words, it itself is a real-time running environment that can achieve real-time preview and debugging. At the same time, debugging can be completed with the help of chrome browser. Paired with the previous Vim, it perfectly solves the problems from code editing to debugging to preview.

This product is not an IDE, and the author will not analyze its advantages and disadvantages. Overall, WEPT+VIM+Plugin is a good solution. Recommended for everyone to use.

Note: The plug-in download link is at the end of the article

WebStorm

There is a plug-in on WebStorm that can implement code prompts, but cannot do debugging and previewing, and It is a heavy tool, so I did not use WebStorm. Children's shoes that like a thicker feel can try this tool.

Advantages

• There are plug-ins that can realize code highlighting, code prompts and other functions

• Yes Very mature and rich in functions

• Various shortcut keys

Disadvantages

• Unable to debug Preview

• It has many functions and is bloated

##Summary

In summary, webstorm and Like the above, the code editing function is powerful but requires plug-in support to develop small programs, and it is bloated.

Note: The plug-in download link is at the end of the article

Egret Wing

Wing is considered the author’s This is the first IDE I have seen supported at the company level, so the functions are quite mature. I downloaded it and tried it. For now, apart from the Vim solution above, this should be the best IDE tool after comparison.

Advantages

• Support code prompts, code highlighting

• Real-time preview and debugging and switching Preview at different resolutions

• Actually supports project creation?!

• Supports new page template files

• bi-weekly update

Disadvantages

• Real-time interface preview is a static rendering and cannot be used for dynamic data in the interface Preview, can only be previewed during debugging.

• Unable to visually drag and drop to generate the interface (am I too greedy?)

Summary

Wing is the only IDE that supports real-time preview function. Even WeChat official does not have real-time preview but needs to preview after compilation. For the lazy author, don’t be too happy when writing the interface with real-time preview! Wing Not only can you create a project, create a new page template, and run the project, you will find that the preview interface is very similar to the official WeChat development tool. Recommended first.

Summary

Let’s make a list and let everyone choose according to their own mood.

##Egret WingThe first IDE to support WeChat applet development. SupportSupportSupportSupportDownload softwareSublime Text 3Sublime Text needs to install a plug-in.

Environment/Tools	Brief Description	Code Highlighting	Code Tips	Debugging	Real-time preview	Software/plug-in download address
Official Tool	WeChat Mini Program Official Tool	Support	Extremely weak	Support	Support	Download software
	Supported	Supported	Not supported	Not supported	Plug-in
Webstorm	WebStorm Heavyweight IDE	Supported	Supported	Not supported	Not supported	Plugin
vim + WEPT	Powerful combination tool	Support	Support	Support	Support	Vim plug-in, WEPT

For more articles related to in-depth evaluation of the five major WeChat applet development IDEs, please pay attention to the PHP Chinese website!