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
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
##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.
| 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 |
##Egret Wing | The first IDE to support WeChat applet development. | Support | Support | Support | Support | Download software |
Sublime Text 3 | Sublime Text needs to install a plug-in.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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
