“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Uni-app is a front-end framework for cross-platform application development using vue. js. Developers write a set of code, which can be compiled to iOS, Android, H5, applets and other platforms.

Method 1: Use HBuilderX to develop and run quickly

Step 1: Get the HbuilderX tool ready

Download the HbuilderX tool for app development.

Step 2: Create a new uni-app project and select the empty project.

Uni-app’s default template project folder structure looks like this:

  • Pages — used to store the page file path;
  • Static – a directory of referenced static resources, such as pictures, videos, etc.
  • App.vue– Application configuration, used to configure global styles and listen to files;
  • Main.js —- vue initialization entry file;
  • Mainfest.json —- Configure the application name, appID, logo, version and other package information files.
  • Pages. Json —- Configudes page-class information files such as routing, navigation bar, and tabs.

Step 3: Run the project.

Click the “Run” option in the toolbar and select a different running environment from the drop-down box. You can refer to the official website for steps.

Since the recent project is on the wechat terminal, I would like to introduce the relevant matters about the operation of the wechat terminal here.

Run in wechat Developer Tools: Enter the Hello-UniApp project and click Run in the toolbar -> Run to Mini Program Simulator -> wechat Developer Tools to experience uni-App in wechat Developer Tools.

Note: If this is the first time to use, you need to configure the related path of the small program IDE to run successfully. In HbuilderX, you need to go to Tools -> Configuration -> Run Configuration, find the small program run configuration, and copy the wechat developer tool path into it.

Method 2: Use scaffolding to build and develop quickly

  1. NPM i-g@vue /cli: Uni-app is based on Vue 3.0 and above, so update vue to the appropriate version;

  2. Create project: vue create -p dCloudio /uni-preset-vue my-project (name of your own created project)

Enter as prompted.

  1. NPM run dev:mp-weixin

  2. Wechat applets developer tool import project: need to manually import applets project.