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天天氣預報詳情頁面實現
• 設置頁面與個性化功能

🔗 相關推薦
有關小程序的更多內容，請看:

• 微信小程序：從基礎到進階的全面指南 (詳細版)
• 微信小程序終極指南：注冊與開發全流程詳解