Get Started with Uniapp: Set Up the Environment in 10 Minutes and Run Your First Project

Key Operations

Install two core tools

Tool 1: HBuilderX (Uniapp official IDE)

Download: https://www.dcloud.io/hbuilderx.html

Version: select “App Development Edition” (out‑of‑the‑box, no extra plugins)

After installation, enable “Open project directory by default” for convenience

Tool 2: WeChat Developer Tools (mini‑program debugging)

Download: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

Key setting: after installation, log in, open Settings → Security Settings and check “Server Port Open” (required for HBuilderX connection)

Create the first Uniapp project (≈1 minute)

Open HBuilderX → File → New → Project

Select project type “Uniapp”, template “Hello UniApp” (includes multi‑platform demo code)

Enter a project name (e.g., uniapp-demo), choose a save path, click Create

Run the project on H5 and WeChat mini‑program

Run on H5 (no configuration)

Select the project → Run → Run to Browser → choose any browser

Result: the browser opens automatically and displays the Uniapp default demo page

Run on WeChat mini‑program (simple configuration)

Open WeChat Developer Tools, create a blank mini‑program (AppID can be the “test account”, no enterprise registration needed)

Back in HBuilderX, select the project → Run → Run to Mini‑Program Simulator → WeChat Developer Tools

On first run, choose the mini‑program project path: locate the HBuilderX project directory under unpackage/dist/dev/mp-weixin and select it

Result: WeChat DevTools loads the project and shows the multi‑platform adaptation

Core Code (copy‑paste ready)

Modify the default page title

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "My First Uniapp Project" // change title, save to apply
      }
    }
  ]
}

Pitfalls to Avoid

WeChat mini‑program fails to run: verify that the “Server Port Open” option is enabled; restart both tools if necessary

H5 runs blank: ensure the project is selected and the browser is not blocking local requests; allow them if needed

No manual environment‑variable configuration is required; the tools work out‑of‑the‑box after installation