一、官方下載并安裝
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、開發者工具分區:
模擬器:小程序效果預覽
編輯器:代碼編寫區域
調試器:含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設計,界面簡潔,功能強大,有豐富的插件生態系統,支持團隊協作和版本管理。
?