微信小程序 - 小程序项目初识（创建小程序项目、小程序项目结构、小程序项目新建页面）

一、创建小程序项目

1. 点击 【项目】 -> 点击 【新建项目】

2. 配置小程序项目 -> 点击 【确定】

1. 输入项目名称

2. 选择项目目录

3. 填写 AppID

4. 选择开发模式为小程序

5. 选择后端服务

6. 选择模板

---

二、小程序项目结构

1、miniprogram

• 在小程序项目中，miniprogram 目录是小程序的核心目录，它包含了小程序的所有页面、逻辑代码、配置文件、静态资源

1. app.json：小程序的全局配置文件，包括页面路径、窗口表现、网络超时时间等

2. app.ts：小程序的逻辑文件，处理生命周期和全局数据

3. app.wxss：小程序的全局样式文件

4. pages：存放小程序的各个页面

• 小程序的每个页面包含一个 .js、.json、.wxml、.wxss

1. index.ts：页面的逻辑代码

2. index.json：页面的配置文件

3. index.wxml：页面的结构文件，类似于 HTML

4. index.wxss：页面的样式文件，类似于 CSS

miniprogram
├── pages
│   ├── index
│   │   ├── index.ts
│   │   ├── index.json
│   │   ├── index.wxml
│   │   ├── index.wxss
│   ├── logs
│   │   ├── logs.ts
│   │   ├── logs.json
│   │   ├── logs.wxml
│   │   ├── logs.wxss
├── utils
│   ├── util.ts
├── app.json
├── app.ts
├── app.wxss

2、typings

• typings 目录用于存放 TypeScript 的类型定义文件，它帮助开发者在 TypeScript 中获得更好的类型提示

3、eslintrc.js

• ESLint 配置文件，用于定义代码风格、静态检查规则

4、package.json

• 小程序项目的配置文件，定义了项目的依赖、脚本、其他元数据

5、project.config.json

• 小程序项目的配置文件，定义了项目的设置，例如、AppID、项目名称、编译选项等

6、project.private.config.json

• 小程序项目的私有配置文件，用于存储开发者个人的配置（例如，本地路径），不会被上传到版本控制

7、tsconfig.json

• TypeScript 的配置文件，定义了 TypeScript 的编译选项

---

三、小程序项目新建页面

1. 新建页面目录：右击 【pages 目录】 -> 点击 【新建文件夹】

2. 新建页面文件：右击 【页面目录】 -> 点击 【新建 Page】