一、官方下載并安裝

1、下載（I選了穩定版）

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、安裝（A FEW MOMENT LATER）

3、運行 （CLICK＋）

4、項目創建（模板一般選第一個，ID先選測試號，不使用云服務）

二、認識界面

?1、開發者工具分區：

1. 模擬器：小程序效果預覽

2. 編輯器：代碼編寫區域

3. 調試器：含Console、Sources、Network等調試工具

4. 工具欄：含編譯、預覽、上傳等操作按鈕

?

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設計，界面簡潔，功能強大，有豐富的插件生態系統，支持團隊協作和版本管理。

?