Uni-app H5, Applets, IOS, Android (ii) : Development tool HBuilderX use tips

Hello everyone, I am the dark horse Tengyun.

This is an original series of articles that will give you a quick introduction to UNI-APP development based on real enterprise projects. Welcome to click your profile picture to avoid getting lost!

A few days ago, many readers asked for details of the implementation of the project case mentioned above. This article will reveal the development tools used.

Uni-apper series articles are designed to help beginners from the beginning to the actual combat, suitable for zero foundation or poor foundation UNI-apper. In order to save time, master do not enter, can pay attention to the actual combat part of the follow-up.

I. Project demonstration

The project mentioned above is a real online commercial project. If you haven’t experienced it yet, you can find the entrance of the previous article to enter the experience.

Intimate xiaobian also recorded a screen for you, convenient to see the official view.

1. Mall project APP

2. Small program of take-out project

Ps: Video uploading is not supported, so upload it first.

All of the above projects include apps (IOS, Android), applets and H5.

Seeing this demo, I’m sure you have a different approach in mind. So, what do you have in mind?

There are many implementation schemes under consideration. After comparative analysis, we finally choose uni-App multi-terminal development (for reasons mentioned above).

The development environment and tools are different for different open solutions. Since uni-app development has been chosen, the tool is naturally the official HBuilderX.

Here’s a look at how it compares to other front-end development tools

2. Comparison and selection of front-end tools

1, VSCode

Microsoft released a free cross-platform editor that was also widely used.

Visual Studio Code, modern lightweight Code editor, support almost all mainstream development languages syntax highlighting, intelligent Code completion, custom hotkeys, parenthesis matching, Code snippets, Code comparison Diff, Git and other features, support plug-in extension, And optimized for web development and cloud application development. Software cross-platform support Win, Mac and Linux, running smoothly.

2, HBuilderX

HBuilderX (HX for short) is the perfect combination of a lightweight editor and a powerful IDE, and is an upgrade to HBuilder. Agile performance, clean interface, powerful functions.

A local editor with a world class parsing engine, from the same company as UNI-App, has many native support advantages.

The biggest advantage of HBuilder is relatively fast speed, powerful code prompt and code input, greatly increase the development efficiency of developers.

3, webStorm

Js support is very good, with the people are also very much (although the charge, but I believe that you must have a clever way, understand).

4, Sublime does the Text

A code editor with beautiful user pages and utility features, as well as multi-functional plug-ins. There are many features, including multi-selection and multi-window and Python API features.

5, Bracket

Free, open source and cross-platform HTML/CSS/JavaScript front-end WEB integration development environment IDE. Created and maintained by Adobe, distributed under an MIT license and supported on Windows, Linux, and OS X platforms.

Of course, there are other tools (DreamWeaver, etc.) that are also great. Tools are essentially for development, so pick the right ones.

Here’s how to use HBuilderX to create a UNI-app project:

HBuilderX creates a project

1. Download and install

Go directly to the official website to download and install, as of writing the latest version is: 3.0.7, this series of development is also using this version.

Note: the official version updates quickly, if your version is inconsistent, there may be some differences in the interface and functionality of the software.

I’m developing this series on Windows, and if you’re on a MAC, the keyboard shortcuts and interface are a little different.

The installation process will not be described, as prompted all the way click next.

If the network speed is slow or inconvenient to download, I can also send you a private message.

2. Create projects

HBuilderX can create many types of projects. Here is an example of how to create an HTML-based Web project.

New project

Through the menu bar: File-New-Project, or directly click “New Project” in the main interface, the following interface will pop up: “New Project”

Select “Common project” above, enter the project name, select the storage location, and click “Create” to create the project.

The new file

You can add files to the project by right-clicking the new – HTML file on the created “Test” project

Enter the file name: getstart. HTML

After the file is created, preview the file

You can preview the changes in real time by typing in and saving the file and clicking the ‘Preview’ button in the upper right corner.

The process of creating projects and adding files is not that different from any other editor or IDE.

3. Software interface

The main interface is as shown in the figure above. The interface is relatively simple, and you can choose the encoding of the file in the lower right corner.

4. Open and close the project

Open the project

Menu: File – Open the directory, select the corresponding project folder in the pop-up box.

Close the project

Right-click on the project – remove the project or close the project.

Remove items are deleted from the local computer.

Closed items are simply not displayed in the project area, they are displayed in the “Closed Items” area, right click on the closed items, you can open them again.

Based on the above Web project, let’s demonstrate the HBuilderX operation.

4. Initial experience of HBuilderX

The following operations, it is strongly recommended to open HBuilderX to operate again, in order to achieve twice the result with half the effort.

1. Powerful code blocks

With code blocks, you can reduce the amount of repetitive code.

Open the getstart. HTML file, delete the contents, and enter the h character in English

As prompted, the number before Alt + can be quickly inserted into the corresponding code block.

Alt +9, quickly enter HTML code blocks.

How’s that？ You only need one key to write the basic structure of HTML, are you still typing character by character?

2. Powerful shortcut keys

Skillful use of shortcut keys, code words like flying general feeling. Do not believe you look!!

Be sure to follow! The steps are as follows:

Set the HTML file to title: HelloHBuilder and use Ctrl+ Enter to insert a blank line on the next line and move the cursor to the next line.
Generate a script block to write JS code using sc block (type sc, press Enter)
Use the funn block to write a JS method helloWorld (type funn, enter). At this point, the generated method name is selected, we just need to directly enter the new method name HelloWorld, hit the enter cursor will jump directly to the function body.
Press down, down,Ctrl+ Enter, type style Enter to generate the CSS code area. Define a Css class classA: type. ClassA {and press Enter. Type font to select the font and press Enter.
Click down to go to the next edit area
Type <div enter, type I enter, type D1, space, type C enter, enter.
CTRL + Enter to add a blank line
Divc press enter, press enter, hellworld.

Without a mouse, it feels like typing commands on Linux.

Of course, the first use must not remember so much, more than a few times to form a conditioned reflex, really remember, you can view the corresponding menu. There are shortcuts on the menu.

3, powerful JS parsing engine tips

Js prompts the ID of the HTML

Js prompts for the HTML tagname

Js Prompts the CSS class name

4, jump to class, ID, js method definition

Simply “Alt + left-click” the referenced method name, ID, CSS class, file (link, image), can jump to the referenced place, also can be cross-file reference.

With the demo over, let’s look at some specific techniques

5. HBuilderX high efficiency skills

1. File preservation

HX saves files every 30 seconds by default.

Temporary files are saved automatically regardless of hX shutdown, power outage, or crash.

The default autosave does not trigger compilation, only if you save manually (CTRL + S).

With hX, you can focus on writing code without having to press CTRL + S every once in a while and save when you need to compile.

2. Grammar tips

World-class syntax analysis engine has always been the biggest feature of HBuilder series products.

There are many front-end frameworks, and the syntax prompt of the framework needs to load a separate syntax prompt library, which is selected in the lower right corner of the page.

The framework syntax library is attached to the project. After a project loads a framework syntax library, all js files or HTML files under the project will be prompted in the code assistant for the framework syntax.

But if a file is opened separately from the hard disk and the entire project is not dragged into HX, then the framework syntax library cannot be loaded at this time.

3. Code assistant

Hx code assistant, you can press Alt + number selection directly select a project, similar to Chinese input method number word selection

4. Grammar help

Put it in an API and press F1 to jump to the API’s official manual. Currently, vue, UNI-app, 5+ and other apis are supported

5. Multi-cursor batch processing

Hx supports multiple cursors. Press CTRL + left mouse button to add a cursor, CTRL + right mouse button to cancel a cursor or selection.

You can also select the same word, CTRL + E to select the same word for batch processing.

6. Column selection

Hx column selection, is Alt + mouse drag selection

7. Select the code

When opening an unknown document, that is, hX cannot be highlighted, you can open it using another editor in the lower right corner.

When opening a file encoding disorder, generate garbled code, you can also select the lower right corner of the code to open again.

8. Go to definitions

The shortcut key is Alt+ D, and the mouse operation is Alt+ left click

Another feature of HBuilderX is to go to the definition column, CTRL + Alt + left, which opens the code at one definition on the other side for common viewing

Support to switch [Ctrl+ left mouse button] or [Alt+ left mouse button] to go to the definition (Menu [Select], the last menu)

Of course, shortcut keys can be personalized Settings, can be modified, so they can be set according to personal habits, not necessarily the same as mine.

9. Return to last cursor position

In HBuilderX, Alt+Left or click < on the toolbar to return to the previous cursor position.

10. Open files quickly

On the top toolbar, directly search for the file name under the project and open it, or use the shortcut key CTRL + P.

Frequently used files can be added to favorites in the toolbar.

11. Search within the directory

Project manager right-click and choose: Find String (current directory) to search for strings in all files in that directory

Familiar with the above quick functions, daily development can greatly improve efficiency.

There are also some features:

For example, syntax check plug-in, SVN/Git project management plug-in, precompiler (less/ SASS), etc., I will not expand the space limit, and I will continue to write later.

In addition, if you are interested, the HbuilderX plug-in development will be covered in an advanced section later, and you can customize and extend your editor functionality as you wish.

In the next article, we will discuss the MVVM framework idea for Uni-App.

Discussion Time:

Which development tool do you think is the best?

Six million developers of choice, HBuilderX?

See you in the comments section!

About the author:

Black Marten cloud, code farmers, entrepreneurs, lifelong learners!

Willing to share technology, entrepreneurship, life thinking. Pay attention to me, cheer for life together!