【未經作者本人同意，請勿以任何形式轉載】
上一篇文章主要分析了微信小程序應用場景和優劣勢。本篇你可以學習到：
-
如何使用小程序開發工具寫一個Hello World
-
微信小程序設計規范
-
微信小程序項目結構
》》》微信小程序開發工具使用
-
下載安裝小程序
下載 ：微信web開發者工具下載：官方DEMO源碼
本系列教程使用的是mac版的開發者工具。
-
安裝完成后，打開微信web開發者工具
1.掃碼登錄，綁定個人微信
2.掃碼登錄后，新建或導入已有項目（這里使用官方提供的DEMO源碼quickstart）
3.新建項目,導入剛下載的quickstart項目
由於只有接收到內測邀請的企業或個人，才有AppID,所以一定記得選『無AppID』
4.新建成功,看看開發工具的廬山真面目
是不是非常像chrome開發者模式。。。
5.開發工具【調試】介紹
『調試』模塊主要包括選擇調試機型、選擇網絡類型、控制台輸出、網絡資源、視圖定位、斷點等
6.開發工具【編輯】介紹
左邊紅色框為項目結構目錄，右邊為代碼編輯區，每次改動保存后，點擊『編譯』就可以瀏覽到修改后的頁面效果。
7.新建文件夾或文件
鼠標放置到文件夾上，右邊會出現『+』圖標，點擊添加文件夾或文件
》》》小程序設計規范(摘自微信小程序設計指南)
-
友好禮貌
為了避免用戶在微信中使用小程序服務時，注意力被周圍復雜環境干擾，小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。 -
重點突出
每個頁面都應有明確的重點，以便於用戶每進入一個新頁面的時候都能快速地理解頁面內容，在確定了重點的前提下，應盡量避免頁面上出現其他干擾項影響用戶的決策和操作。 -
清晰明確
一旦用戶進入我們的小程序頁面，我們就有責任和義務清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全的愉悅的使用體驗。
》》》微信小程序項目結構
-
文件結構
-
框架程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。一個框架程序主體部分由三個文件組成，必須放在項目的根目錄。
| 文件 | 作用 |
|---|---|
| app.js | 小程序(全局)邏輯 |
| app.json | 小程序(全局)公共設置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等 |
| app.wxss | 小程序公共(全局)樣式表 |
-
一個框架頁面由四個文件組成：
| 文件類型 | 作用 |
|---|---|
| js | 頁面邏輯 |
| wxml | 頁面結構，框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。 |
| wxss | 是一套樣式語言，用於描述 WXML 的組件樣式。用來決定 WXML 的組件應該怎么顯示。 |
| json | 頁面配置 |
按照『約定優於配置』的原則，一個框架頁面至少包含js、wxml、wxss三個文件類型，文件名要一樣，例如首頁index.js、index.wxml、index.wxss,並且要放在同一文件夾下。頁面注冊時，文件名不需要寫文件后綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。
》》》總結
以上從開發工具、設計規范、項目目錄三個方面介紹微信小程序開發准備工作，后續還將更新；同時通過導入官方DEMO，展示了Hello World小程序頁面。總體來說，小程序開發工具精簡，項目結構清晰，文檔齊全，入門門檻不算高；微信團隊已經對不同操作系統不同機型封裝好了，開發者只需調用相應的API即可。當然如果要弄明白整個框架，你需要深入學習Redux工作原理、狀態模式、數據單雙向綁定、JS調用Android/IOS原生UI組件等內容。
如果有疑問，你也可以關注我的微信公眾號『ITNotes』， 一起交流學習 。