微信小程序开发(一)：使用开发者工具创建天气预报项目

原创已于 2025-08-27 16:17:07 修改 · 1.4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-08-22 13:35:28 首次发布

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

一、开发环境准备

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

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

2. 注册小程序账号

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

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

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

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

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

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

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

2. 创建新项目

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

项目设置：
- 项目名称：WeatherApp（天气预报应用）
- 目录：选择你想要存放项目的文件夹路径
- AppID：填写你注册的小程序AppID（重要！）
- 后端服务：选择"不使用云服务"（初学阶段）
- 开发模式：选择"小程序"
模板选择：
- 选择"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. 使用开发者工具创建页面

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

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

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

六、首次编译和预览

1. 编译项目

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

2. 在手机上预览

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

七、项目结构优化

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天天气预报详情页面实现
设置页面与个性化功能

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

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