How to run hello uniapp

hello How to run uniapp: First, use the HBuilderX tool visual interface; then click "File->New->Project" in the toolbar, and select the "uni-app" type to create; finally Enter the "hello-uniapp" project and click "Run" on the toolbar.

#The operating environment of this tutorial: Windows 10 system, uni-app2.5.1 version, thinkpad t480 computer.

Recommended (free): uni-app development tutorial

uni-app supports two methods: visual interface and vue-cli command line Create projects quickly.

1. Through the HBuilderX visual interface

The visualization method is relatively simple. HBuilderX has built-in related environments and can be used out of the box without configuring nodejs.

Before starting, developers need to download and install the following tools:

HBuilderX: Official IDE download address https://www.dcloud.io/hbuilderx.html

HBuilderX It is a general front-end development tool, but it is specially enhanced for uni-app.

Download the App development version, which can be used out of the box; if you download the standard version, when running or publishing uni-app, you will be prompted to install the uni-app plug-in, which can only be used after the plug-in is downloaded.

If you use cli to create a project, you can directly download the standard version because the uni-app compilation plug-in is installed in the project.

Create uni-app

Click on the file in the toolbar-> New-> Project:

Select the uni-app type, enter the project name, select the template, and click Create to create it successfully.

The template that comes with uni-app is Hello uni-app, which is an official component and API example. Another important template is the uni ui project template, which is recommended for daily development and has a large number of commonly used components built-in.

Run uni-app

1. Run the browser: Enter the hello-uniapp project, click Run-> on the toolbar ; Run to the browser-> Select the browser to experience the H5 version of uni-app in the browser.

2. Run on a real machine: Connect the phone, turn on USB debugging, enter the hello-uniapp project, click Run on the toolbar -> Run on a real machine -> Select Run device, you can experience uni-app on the device.

#3. If the mobile phone cannot be recognized, please click the menu Run-Run to mobile phone or simulator-Real machine running common troubleshooting guide. Note that currently developing apps also requires the installation of WeChat developer tools.

Run in the WeChat Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> WeChat Developer Tools, you can run it in the WeChat Developer Tools Experience uni-app.

Note: If it is the first time to use it, you need to configure the relevant path of the mini program ide before it can run successfully. As shown below, you need to enter the installation path of the WeChat developer tools in the input box. If H Builder Real-time effects.

uni-app compiles the project to the unpackage directory of the root directory by default.

4. Run in the Alipay mini program developer tool: enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> Alipay Mini Program Developer Tools, you can experience uni-app in Alipay Mini Program Developer Tools.

5. Run in Baidu Developer Tools: Enter the hello-uniapp project, click Run on the toolbar-> Run to the mini program simulator-> Baidu Development You can experience uni-app in Baidu developer tools.

6. Run in the Bytedance Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> Bytedance Developer Tools, you can open the Bytedance Developer Tools Try uni-app in the jump developer tools.

7. Import in 360 development tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> 360 development tools , you can experience uni-app in 360 development tools.

8. Run in the Quick App Alliance tool: enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> Quick App Alliance tool, you can experience uni-app in the quick application alliance tool.

9. Run in Huawei developer tools: enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> Huawei Development You can experience uni-app in Huawei developer tools.

10. Run in the QQ applet development tool: The content is the same as above and will not be repeated.

The above is the detailed content of How to run hello uniapp. For more information, please follow other related articles on the PHP Chinese website!