Hi，我是前端人类学（之前叫布兰妮甜）！
从今天开始，我将开启一个全新的微信小程序开发系列教程，通过实际项目带大家系统学习小程序开发。作为系列的第一篇文章，我们将从最基础的环境搭建开始，一步步学习如何使用微信开发者工具创建项目、配置基础设置，并理解小程序的目录结构。
这个系列我们将以天气预报小程序为实战项目，涵盖从环境搭建到项目上线的完整流程。无论你是完全没有接触过小程序开发的新手，还是想要系统学习小程序开发的开发者，这篇文章都将为你提供详细的指导。
让我们打开微信开发者工具，开始我们的第一个小程序项目吧！

---

---

一、开发环境准备

1. 下载并安装微信开发者工具

1. 访问官网下载：打开微信官方开发者工具下载页面
2. 选择对应版本：根据你的操作系统（Windows/Mac）下载最新版本
3. 安装开发者工具：双击安装包，按照提示完成安装

2. 注册小程序账号

1. 访问注册页面：打开微信公众平台
2. 点击立即注册：选择"小程序"类型
3. 填写注册信息：按照要求填写邮箱、密码等信息
4. 邮箱激活：登录邮箱点击激活链接
5. 完善信息：填写主体信息和管理员信息

💡 提示：个人开发者也可以注册小程序，但部分功能可能会受限

二、创建第一个小程序项目

1. 打开开发者工具并登录

安装完成后，首次打开微信开发者工具：

# 在Windows上可以在开始菜单搜索"微信开发者工具"
# 在Mac上可以在应用程序中找到并打开

打开后会看到登录界面，使用你的小程序账号扫码登录。

2. 创建新项目

登录成功后，点击"+"号或"新建项目"按钮：

1. 项目设置：
   • 项目名称：WeatherApp（天气预报应用）
   • 目录：选择你想要存放项目的文件夹路径
   • AppID：填写你注册的小程序AppID（重要！）
   • 后端服务：选择"不使用云服务"（初学阶段）
   • 开发模式：选择"小程序"
2. 模板选择：
   • 选择"JavaScript-基础模板"
   • 不建议选择"快速启动模板"，因为我们从零开始学习

3. 项目初始化配置

点击"新建"后，开发者工具会自动生成基础项目结构：

WeatherApp/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── utils/
│   └── util.js
└── project.config.json

三、开发者工具界面介绍

成功创建项目后，你会看到开发者工具的主界面：

1. 编辑器区域（左侧）

• 文件树：显示项目所有文件
• 代码编辑器：支持语法高亮、代码提示
• 文件标签：可以同时打开多个文件编辑

2. 预览区域（中间）

• 模拟器：实时预览小程序效果
• 调试器：查看Console、Network等信息

3. 工具栏（右侧）

• 编译：手动触发重新编译
• 预览：生成二维码在手机上预览
• 上传：上传代码到微信平台
• 切后台：模拟小程序进入后台

四、基础文件配置详解

1. 项目配置文件 (project.config.json)

这个文件保存了项目的个性化配置：

{"description": "项目配置文件","setting": {"urlCheck": false,"es6": true,"postcss": true,"minified": true,"newFeature": true},"compileType": "miniprogram","libVersion": "2.19.4","appid": "你的AppID","projectname": "WeatherApp","debugOptions": {"hidedInDevtools": []}
}

2. 全局配置文件 (app.json)

这是小程序最重要的配置文件：

{"pages": ["pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#667eea","navigationBarTitleText": "天气预报","navigationBarTextStyle": "white","backgroundColor": "#f5f5f5","enablePullDownRefresh": true},"style": "v2","sitemapLocation": "sitemap.json"
}

3. 全局样式文件 (app.wxss)

添加一些基础样式：

/* 基础样式重置 */
page {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;background-color: #f5f5f5;color: #333;line-height: 1.6;
}/* 容器样式 */
.container {padding: 20rpx;min-height: 100vh;
}

五、创建项目所需页面

现在让我们为天气预报应用创建所需的页面结构：

1. 在app.json中添加页面路径

修改app.json文件，添加所有需要的页面：

{"pages": ["pages/index/index","pages/citySelect/citySelect","pages/forecast/forecast","pages/settings/settings"],// ... 其他配置保持不变
}

2. 使用开发者工具创建页面

手动创建（推荐学习使用）

1. 在pages目录右键 → 新建文件夹
2. 命名为citySelect
3. 在citySelect文件夹中右键 → 新建文件
4. 创建四个文件：citySelect.js, citySelect.json, citySelect.wxml, citySelect.wxss
5. 多天气预报页和设置页也是一样的创建法

每个页面都需要四个文件: js、json、wxml、wxss

六、首次编译和预览

1. 编译项目

点击工具栏的"编译"按钮（或使用快捷键 Ctrl/Cmd + B），开发者工具会自动编译并在模拟器中显示效果。

2. 在手机上预览

1. 点击"预览"按钮
2. 使用微信扫描生成的二维码
3. 在手机上查看实际效果

七、项目结构优化

1. 创建资源目录

在项目根目录创建以下目录：

mkdir assets         # 图片和图标资源
mkdir components      # 自定义组件

2. 整理后的项目结构

WeatherApp/
├── assets                         
│   ├── icons                       # 图标文件
│   ├── images                      # 图片文件
├── components                      # 自定义组件
│   ├── tabBar                      # 底部导航栏页 (后续文章详细介绍)
│   │   ├── tabBar.js               # 页面逻辑 
│   │   ├── tabBar.json             # 页面配置
│   │   ├── tabBar.wxml             # 页面结构
│   │   ├── tabBar.wxss             # 页面样式
├── pages
│   ├── index                       # 首页 (后续文章详细介绍)
│   │   ├── index.js                # 首页逻辑
│   │   ├── index.json              # 页面配置
│   │   ├── index.wxml              # 页面结构
│   │   └── index.wxss              # 页面样式
│   ├── citySelect                  # 城市选择页  (后续文章详细介绍)
│   │   ├── citySelect.js           # 城市选择页逻辑
│   │   ├── citySelect.json         # 页面配置
│   │   ├── citySelect.wxml         # 页面结构
│   │   └── citySelect.wxss         # 页面样式
│   ├── forecast                    # 多天气预报页 (后续文章详细介绍)
│   │   ├── forecast.js             # 多天气预报页逻辑
│   │   ├── forecast.json           # 页面配置
│   │   ├── forecast.wxml           # 页面结构
│   │   └── forecast.wxss           # 页面样式
│   └── settings                    # 设置页 (后续文章详细介绍)
│       ├── settings.js             # 设置页逻辑
│       ├── settings.json           # 页面配置
│       ├── settings.wxml           # 页面结构
│       └── settings.wxss           # 页面样式
└── utils               
|   └── util.js                     # 工具函数库
|   └── api.js                      # API请求
├── app.js                          # 小程序入口文件
├── app.json                        # 全局配置文件
├── app.wxss                        # 全局样式文件
└── project.config.json

项目功能模块：

• 首页(index): 展示当前城市天气概况和基本信息
• 城市选择(citySelect): 允许用户搜索和切换城市
• 天气预报(forecast): 显示未来多天的详细天气预报
• 设置(settings): 提供主题切换、通知设置等个性化选项

各文件功能说明：

• app.js: 小程序入口文件，包含全局逻辑和应用生命周期函数
• app.json: 全局配置文件，设置页面路径、窗口样式等
• app.wxss: 全局样式文件，定义公共样式
• pages/: 页面目录，每个页面有独立的js、json、wxml和wxss文件
• utils/: 工具类目录，存放公共工具函数

这样的结构清晰地将全局文件、页面文件和工具文件分开，便于维护和开发。

八、总结与下一步计划

通过本文，我们完成了：

环境搭建：安装微信开发者工具并登录账号
项目创建：创建了WeatherApp天气预报小程序项目
基础配置：配置了项目设置和全局样式
页面结构：创建了所需的页面文件结构
首次预览：成功编译并在模拟器中查看效果

开发小贴士：

• 经常使用Ctrl/Cmd + S保存文件
• 关注控制台的错误提示
• 使用模拟器的调试功能排查问题

下一篇预告：在下一篇文章中，我将详细介绍首页页面(index)的开发，实现：

• 调用天气API获取数据
• 设计美观的天气展示界面
• 下拉刷新功能

---

如果你觉得文章有用，请点赞👍 + 收藏⭐ + 关注👀 你的支持是我持续创作的最大动力！
📚 系列文章目录
本系列文章将带你从零开始开发一个完整的天气预报小程序，以下是各章节的详细内容：

• 使用开发者工具创建天气预报项目（本文）
• 首页实现与和风天气API整合
• 城市选择页面开发实战
• 10天天气预报详情页面实现
• 设置页面与个性化功能

🔗 相关推荐
有关小程序的更多内容，请看:

• 微信小程序：从基础到进阶的全面指南 (详细版)
• 微信小程序终极指南：注册与开发全流程详解