Unit 1 Introduction to development environment and quick start

1 Two development tools

1.1 HBuilder X

This tool is made in China and is free. You can download it directly from the official website. The official website refers to "HBuilder X" as "HX" for short.

1.1.1 Installation

Click "Download for Windows" directly on the official website page to download the HX software compressed package.

As of 2023-9-23, the compressed package file provided on the official website is "HBuilderX.3.8.12.20230817.zip".

[The following steps are very important! ! ! 】

• After downloading the compressed package to your local computer, please decompress the compressed package first.
• After decompression, you will find that a "HBuilderX" folder will appear in the directory where you downloaded the compressed package, indicating that the decompression is complete.
• Please cut the entire "HBuilderX" folder to a non- Chinese directory on the non- system disk of your local computer .
• Double-click the "HBuilderX" folder, find the "HbuilderX.exe" file, and double-click the file to open the HX software.

After completing each of the above steps, we have completed the installation of the "HX" software.

For future convenience, you can add a desktop shortcut to the "HBuilderX.exe" file.

1.1.2 Register an account

[Reason]: HX is a geek development tool developed by DCloud, which is Digital Paradise (Beijing) Network Technology Co., Ltd. Having a DCloud account can facilitate developers to create cloud writing software projects, and can also be easily and quickly imported into the DCloud plug-in market. The rich official and third-party plug-ins allow developers to complete a "mini program" in minutes without having to reinvent the wheel.

[Method]: Start HX. If you do not have an account or have an account but have not logged in, the word "Not logged in" will be displayed in the lower left corner of the software. Click here to log in or register. (See below)

After clicking, a login box in the style of the picture below will appear. Just look at the picture and operate.

[Registration]: After entering the registration page, just follow the step-by-step instructions on the page.

[Login]: After successful login, the currently logged in account name will be displayed in the lower left corner of the HX software interface.

1.1.3 HX configuration

If a worker wants to do his job well, he must first sharpen his tools.

In order to make HX bring you a more pleasing coding experience, we can also change the theme of HX according to our own preferences.

[Change Theme]: Click the "Tools" menu, select "Theme", (see the picture below) and see that currently only three official themes are provided. If you feel that none of these three look good, you can click "Customize Theme Tutorial..." and follow the official tutorial to write a theme file yourself.

In addition, the compressed package of HX contains the most streamlined content. There is no problem in writing general web page code. However, in order to improve the operating efficiency of HX, developers often need to install some extension plug-ins for HX. With the help of these plug-ins, HX will become stronger.

[Install the built-in browser plug-in]: Click the "Tools" menu, select "Plug-in Installation", select "Install New Plug-in" in the pop-up window, (see the picture below), click "Install" in the "Built-in Browser" group button to add a built-in browser to HX.

[Install other plug-ins]: According to the actual needs of development, just select the required plug-ins and install them.

[Uninstall plug-ins]: Click "Tools", select "Plug-in Installation", find the plug-in that needs to be uninstalled in "Installed Plug-ins", and click the "Uninstall" button on the right side of the list to complete the uninstallation of the plug-in.

1.2 WeChat developer tools

All cases in the mobile application development courses studied this semester must be run and used in the form of WeChat applets. HX can be developed in conjunction with WeChat developer tools to achieve "writing on HX, debugging, running and publishing in WeChat developer tools". Both are indispensable! ! !

1.2.1 Download

[Download]: Enter the official download page , and you can see the content consistent with the picture below (as of 2023-9-3). Please check the properties of your computer and check whether the system bit number is 64-bit in the system type. If so, click the Windows 64 link marked with an oval in the picture below to download. After the download is completed, you will get a "wechat_devtools_1.06.2307260_win32_x64.exe" executable file locally.

1.2.2 Installation

Double-click the downloaded "wechat_devtools_1.06.2307260_win32_x64.exe". Windows' protection mechanism will ask you whether to allow this application to make changes to your device. Just click "Yes". After that, there is a very friendly installation wizard. Click "Next", "I Accept", select the installation path and click "Install". Wait for the installation progress bar to reach 100%. Finally, "Installation Complete" will be displayed (see the picture below) , directly click the "Finish" button to start the WeChat developer tools for the first time.

1.2.3 WeChat Mini Program Registration

When the WeChat developer tool is launched for the first time, a QR code that needs to be scanned and logged in with WeChat will be displayed. If you want to use the WeChat developer tools normally for mini program debugging and real machine operation, you need to register the WeChat mini program.

Tencent officially provides a WeChat Mini Program registration process. Click here to access it . You can successfully complete the WeChat Mini Program registration by referring to this process.

1.2.4 AppID of mini program

The AppID of a WeChat applet is a very important attribute. Each applet has an independent AppID.

When we use HX to develop our own WeChat applet by linking it with the WeChat developer tools, we need to fill in the value of this AppID into the HX configuration file.

Please refer to the following steps to obtain the AppID of the WeChat applet. After completing each step, click the small square in front of the operation list.

• Click here to enter the WeChat public platform login page, as shown in the picture below. Use your mobile phone WeChat to scan the QR code below to log in.

• After entering the console page, click "Settings" in the menu action item on the left. See below.

  

• After entering the settings page, you can see the "Account Information" section on the page, and your mini program AppID is displayed as shown in the picture below.

[Instructions]: The above steps are the steps before you use the WeChat Developer Tools for the first time. If you have used WeChat to log in to the WeChat Developer Tools and created a small program, the AppID can be obtained in the WeChat Developer Tools.

1.2.5 Launching WeChat developer tools for the first time

If it is the first time or you have not logged in to the WeChat developer tool, the QR code page shown below will be displayed after startup. We need to use our mobile phone WeChat to scan the code to log in. Notice! Notice! The WeChat account on your mobile phone must be the WeChat account registered with the WeChat applet. Don’t choose the wrong one.

After scanning the QR code on your mobile phone WeChat, click Confirm to log in, and the WeChat Developer Tools will enter the interface shown below. This is also the startup interface of WeChat developer tools.

• The lower left corner of the picture below is the avatar currently logged into the WeChat account;
• The big "+" in the middle reminds us that clicking it can create a new mini program;
• The "small gear" in the upper right corner is the button to enter the setting function. Click it to configure the linkage between WeChat developer tools and HX.

In the interface shown above, we click on the big "+" to enter the interface shown in the picture below. You can find the AppID by referring to the picture guide.

1.2.6 Configure linkage with HX

In the startup interface of WeChat Developer Tools, after clicking the "gear" in the upper right corner, you can see the settings interface shown in the picture below. As shown in the figure below, click the "Security" button in the interface and "Open" the service port in the security settings. Only in this way can HX be linked with WeChat developer tools through the service port.

[Note]: The "port number" value marked in the rectangular box in the above picture is not fixed and unified. The specific port that can be used is determined by the computer system currently running the WeChat developer tools.

2 Get started with HX quickly

Below, we use HX to create a template project to create a WeChat applet without writing a single line of code.

2.1 Create a new uni-ui project

Start HbuilderX, select 新建→ 项目, by default HX will start the wizard interface for creating a project, and create the uni-app project by default. please

Refer to the guidance in the figure below and complete the following steps in the order marked by the serial number:

• ① Select the uni-ui project template.
• ② Name the project. It is required that Chinese characters cannot appear in the name, such as "HelloUni".
• ③ If you are not satisfied with the default project creation location, you can click "Browse" to select your favorite creation location.
• ④ Click the "Create" button to complete the creation of the project.

After the above steps are completed, the prompt box shown in the figure below will appear in the lower right corner of HX's main interface, indicating that the current project has been successfully created.

2.2 Preview in HX’s built-in browser

The picture below shows the effect of the created HelloUniproject running in HX's built-in browser. in:

• ① This is the project manager view of HX. Because HelloUniit is a uni-app project, the small icon of this project is a "U". Double-click the project name to expand and see the directory structure of a uni-app project. Expand it pages > index > and you will see index.vuethe file. Double-click the file and you can see the source code of this file in the code editing view of HX.
• ② Click on the upper right corner of the HX main interfacePreviewAfter pressing the button, the built-in browser of HX will call up pages > index > index.vuethe process log of compiling the source code of the file content. This will display prompt information such as what is currently being done and whether an error has been encountered.
• ③ This is the running interface of HX's built-in browser, where the running effect of the file selected in HX's code editing view will be displayed. The currently selected file is index.vue.

[Tip]: When you use HX to create a uni-app project for debugging and running for the first time, HX will judge whether you need to install a new plug-in based on the current plug-in installation. If necessary, it will automatically download and install it. We can do this in the HX main page. In the lower right corner of the interface, you will see a prompt to download and install the plug-in.

2.3 Run the project to WeChat developer tools

2.3.1 Configuration items

The uni-app project manifest.jsonis configured by modifying the file. As shown below:

• ① Double-click the file in the HelloUni project directory manifest.json.
• ② In the code editing view of HX, see manifest.jsonthat is open, click the "WeChat Mini Program Configuration" list item.
• ③ Fill in the correct content in the WeChat Mini Program AppID text box.

2.3.2 Configure the running environment of the uni-app project

HX integrates many operating environments, including "WeChat applets, Android, iOS...". If you want the uni-app project to run smoothly in the WeChat developer tools, you also need to configure the operation of the uni-app project in HX Environmental parameters. Here are the steps.

• As shown in the figure below, click the "Run (R)" menu of HX, select "Run to Mini Program Simulator (M)>", and click "Run Settings (S)".

• In the run settings page, find the section shown in the figure below and clickBrowse…button to find the installation location of "WeChat Developer Tools".

• After the configuration is completed, press Ctrl + Sthe key combination to save the modifications.

2.3.3 Run to WeChat applet

• As shown in the figure below, click the "Run (R)" menu of HX, select "Run to Mini Program Simulator (M)>", click the "WeChat Developer Tools (W)" menu, and wait for HX to invoke the WeChat Developer Tools. And recompile the code and send it to WeChat developer tools.

• Before the WeChat developer tool is invoked by HX and the code is debugged, the following prompt will be displayed. Clicktrust and runJust click the button.

• The running effect seen in the WeChat developer tools is shown in the figure below.

[Tip]: The default simulator selected in the preview of WeChat Developer Tools is related to the mobile phone model currently used to scan the QR code to log in to WeChat Developer Tools. You can click on the location of the words "iPhone 12/13 mini 100% 16" in the picture above to change the simulator to a different model to see the running effect.

2.3.4 Real machine debugging

In WeChat developer tools, you can directly check the running effect of the mini program interface during the development process on your mobile phone through real device debugging.

As shown in the figure below, click the real device debugging button shown as "①", and you will see the QR code shown as "②" later. The system selected by "③" is the same as the mobile phone currently scanned to log in to the WeChat developer tool. The system is consistent. It is not recommended to check the "LAN mode" marked by "④" because it will be slower.

[Warm Tips]: Please use WeChat on the mobile phone that is currently logged in to scan the QR code to log in to the WeChat developer tool and scan the QR code for real machine debugging.

Note: This is only a debugging version, not an official release version. The purpose of debugging is to facilitate viewing the effect of the code running on your mobile phone.