1.2 小程序開發文檔與開發工具
小程序開發文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/。
1.2.1 小程序開發文檔
文檔共分6類，如圖1-1所示。
圖1-1
簡易教程提供了一個Hello World微信小程序教程，從獲取微信小程序的AppID、用微信Web開發者工具創建項目、編寫代碼到手機預覽，一步一步創建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語和當前用戶的微信頭像、點擊頭像，可以在新打開的頁面中查看當前小程序的啟動日志。該分類下體驗小程序頁面提供組件和接口體驗的方法，更新日志顯示基礎庫和開發工具最近的更新歷史。
框架講解小程序MINA框架的知識，包括目錄結構、配置、邏輯層和視圖層。
組件介紹小程序的一系列基礎組件，包括視圖容器、基礎內容、表單組件、導航、媒體組件、地圖、畫布、客服會話等。
API介紹框架提供的微信原生API，包括網絡、媒體、文件、數據緩存、位置、設置、界面和開放接口等。
工具介紹微信Web開發者工具的使用方法，包括模擬器使用、代碼編輯、調試工具、項目預覽等。
Q&A列舉常見問題的解答，讀者遇到一些莫名其妙的問題可以先在這里找答案。此分類下還有開發者社區的入口。
1.2.2 微信Web開發者工具
1．下載
在瀏覽器中打開網址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，即可進入開發工具下載頁。或者單擊導航欄的“工具”→“下載”進入下載頁，如圖1-2所示。
圖1-2
一般情況下，Windows XP系統選擇Windows 32版本，Windows 7\8\10及以上選擇Windows 64版本，Mac電腦選擇Mac版本。
安裝之后，用微信掃碼即可進入。
2．添加／打開項目
微信掃碼后，即可進入項目選擇界面，如圖1-3所示。
這時可以選擇添加項目，或者選擇已經創建的項目。這里我們選擇添加項目，如圖1-4所示。
圖1-3
圖1-4
登錄https://mp.weixin.qq.com，可以在網站的“設置”→“開發者設置”中查看微信小程序的AppID，如圖1-5所示。
圖1-5
開發階段可以不填AppID，所以這里選擇“無AppID”。選擇后，AppID文本框會顯示“無AppID部分功能受限”。不過不影響后續開發。
單擊“添加項目”，進入開發界面，如圖1-6所示。
圖1-6
這是小程序的默認DEMO：Hello World。
我們需要通過開發者工具完成小程序創建和代碼編輯。
1.2.3 開發工具Tips
官方文檔給出了完整的開發工具介紹，文檔地址為：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
文檔包含調試、代碼編輯及程序發布等功能的介紹。本節不再贅述，僅以問答的形式對文檔缺失的部分進行補充。
（1）如何保存文件？
編輯文件后，未保存的文件Tab后會有圓點。Windows用戶按Ctrl+S，Mac用戶按Command+S保存。保存成功后圓點消失，如圖1-7所示。
圖1-7
（2）程序修改后如何刷新頁面？
可以在“項目”頁設置自動刷新，如圖1-8所示。
圖1-8
在“編輯”模式下，也可以單擊“編譯”手動刷新。
（3）AppData有什么用？
開發工具提供查看頁面data數據的功能。在1.4節的例子中，頁面data有一個屬性為result。游戲未開始時，result的數據如圖1-9所示。
圖1-9
游戲結束后，result的數據如圖1-10所示。
圖1-10
AppData是調試程序的利器，在此處編輯數據能及時反饋到界面上，而且界面上的內容能夠實時更新到調試信息里。讀者可以充分利用此功能調試程序。
（4）“前臺”“后臺”操作有什么作用？
微信首先是一個聊天工具，消息具有最高的優先級。當新消息到來時，用戶返回聊天頁面，這時小程序優先級會下降，處于后臺執行中。點擊“前臺”可切換到前臺模式。比如小程序正在播放音樂或視頻，進入后臺就會中斷；返回前臺后，播放進度會保留，但需要重新點擊播放按鈕才能繼續播放，如圖1-11所示。
圖1-11
（5）“調試”頁面的Sensor Tab有什么作用？
“調試”頁面的Sensor Tab用來模擬地理位置調試重力感應API，如圖1-12所示。
圖1-12
（6）調試工具的Wxml Pannel和Sources Pannel有什么區別？
Wxml Pannel展示的是源代碼中的wxml文件，可以在此處寫樣式表調試頁面，如圖1-13所示。
圖1-13
Sources Pannel展示的是編譯后的HTML代碼，可以在此處打斷點調試js程序，如圖1-14所示。
圖1-14