How to use HbuilderX to run applet projects

1. Create a new project (importing existing projects is ignored)

1. Create a new project

2. Set the project name

3. HbuilderX running project

4. If the operation is successful, the WeChat developer tool will be opened automatically

5. uni-app project directory structure

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

2. Configuration environment

1. Fill in the AppID of your WeChat Mini Program

2. In HBuilderX, configure the installation path of "WeChat Developer Tools":

Note: After the configuration is complete, click Run to the applet simulator in HbuilderX, and the WeChat developer tool will be automatically launched

3. Open the service port in the WeChat developer tools:

3. Create a new page

1. Create a new tab page

2. Create a non-tab page

Fourth, use Git to manage projects

1. Local management

1.1 Create a new .gitignore ignore file in the project root directory and configure it as follows:

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

Note: Ignore the unpackage directory, the default unpackage directory will not be tracked by Git

At this time, in order to allow Git to track the unpackage directory normally, we can create a file called .gitkeep in the unpackage directory as a placeholder

1.2 Open the terminal, switch to the project root directory, and run the following command to initialize the local Git repository:

git init
git add .
git commit -m "init project"

2. Host the project to Code Cloud

1. Register and activate Code Cloud account (registration page address: https://gitee.com/signup )

2. Generate and configure SSH public key

3. Create a blank code cloud warehouse

4. Upload the local project to the blank warehouse corresponding to the code cloud