一、官方下载并安装
1、下载（I选了稳定版）
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2、安装（A FEW MOMENT LATER）
3、运行 （CLICK＋）
4、项目创建（模板一般选第一个，ID先选测试号，不使用云服务）
二、认识界面
1、开发者工具分区：
模拟器：小程序效果预览
编辑器：代码编写区域
调试器：含Console、Sources、Network等调试工具
工具栏：含编译、预览、上传等操作按钮
2、编辑器主要构成部分
一个小程序页面由四个文件组成：
| #### 文件类型 | 作用 |
|---|---|
| #### js | 页面逻辑，是脚本 |
| #### wxml | 页面结构，xml是一种扩展标记语言（和HTML类似） |
| #### json | 页面配置，可以看成是一个轻量级数据库文件，本质上就是带有一定格式的数据存储文件。 |
| #### wxss | 页面样式表，xss就是样式文件定义页面格式和配色的 |
三、编辑器操作
│ **app.js：**整个项目的启动文件
│ **app.json：**整个项目的配置文件，样式，页面标题等；
**│ app.wxss：**对应index.css
**│ project.config.json：**默认项目配置文件
**│ project.private.config.json：**默认项目配置文件
│
**├─images：**图片素材
**├─libs：**libs文件夹是一个集中管理项目所需外部资源和代码的地方，使得项目结构更加清晰，便于团队协作和后期维护。
│ xx-wx.js
│ xx-wx.min.js
**├─pages：**页面
│ ├─index：首页
│ │ index.js
│ │ index.wxml
│ │ index.wxss
│ ├─logs：日志
│ │ logs.js
│ │ logs.json
│ │ logs.wxml
│ │ logs.wxss
│ ├─news：新闻页
│ │ news.js
│ │ news.json
│ │ news.wxml
│ │ news.wxss
│ │
**└─utils：**用于存放工具函数和辅助方法
util.js
四、代码编辑工具
1、官方开发工具
- 微信开发者工具：由微信官方提供，集代码编写、预览、调试和发布等功能于一体，支持可视化编辑，与微信平台无缝对接，是开发微信小程序的核心工具
2、代码编辑器
- Visual Studio Code：免费开源的跨平台代码编辑器，通过安装相关插件，支持微信小程序的开发，具备强大的代码补全、调试和版本控制等功能
- Sublime Text：轻量级、高性能的文本编辑器，可安装插件支持微信小程序开发，界面简洁，支持多种编程语言
3、其他开发工具
- HBuilder：支持HTML5的跨平台开发工具，提供可视化布局、代码生成、实时预览等功能，支持uni⁃app框架，一套代码可多端适配。
- Egret Wing：专为微信小程序设计，支持JavaScript、WXML、WXSS等开发语言，提供丰富的组件和模板。
- PyCharm：针对Python开发的IDE，通过安装插件可支持微信小程序开发，适用于高级开发者。
4、SaaS小程序制作平台
- 即速应用：支持拖拽式操作，无需编写代码即可完成小程序开发，提供丰富的行业模板和组件。
- 有赞：专注于零售行业，提供可视化编辑和丰富的营销插件，适合快速搭建电商类小程序。
5、设计工具
- Adobe XD：与Adobe系列软件无缝衔接，可导入素材并导出适合开发的格式，提升设计质量和效率。
- Sketch：主要用于UI设计，界面简洁，功能强大，有丰富的插件生态系统，支持团队协作和版本管理。