小程序環境搭建與開發工具的簡單介紹

筆記內容：小程序環境搭建與開發工具的簡單介紹
筆記日期：2018-1-03

下載開發工具

和其他產品的開發一樣，開發小程序也需要搭建相應的環境，小程序的開發環境很簡單，下載個開發工具就可以了。微信官方提供了一個小程序的開發者工具，可以在官網下載到。
官網下載地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

下載對應的版本即可，我這里下載的是最新版的。

下載完成之后安裝，因為安裝都是圖形化而且是中文的，就不過多說明了：

小程序目前情況及限制

• 小程序已經過了公測不穩定階段，目前處于在穩定發展的階段
• 已經開放了個人開發者申請注冊
• 沒有小程序賬號不能上傳和發布小程序
• 沒有小程序賬號不能真機運行，只可以在pc的模擬中運行
• 不能真機運行的話，錄音、網絡狀態、羅盤、撥打電話等功能的api無法使用
• 沒有小程序賬號的話，獲取用戶信息的流程是模擬的而不是真實的
• 但是沒有小程序賬號也不影響學習小程序開發

建議處于學習階段的話，在模擬器上運行會比較好一些，真機運行需要綁定一些相關的信息，過程比較麻煩，不利于初學者。

小程序開發工具介紹

安裝好開發工具，運行之后會彈出一個對話框，讓你使用微信掃碼登錄：

登錄之后點擊小程序項目：

創建相應的工程，沒有AppID的話可以點擊 “點此體檢” 即可，當然你也可以去注冊一個AppID，我這里選擇的是不使用AppID：

創建完成：

左邊是效果的顯示區域，右邊是代碼的編寫區域。當代碼修改后保存按Ctrl+s保存時就會自動編譯，然后左邊就會顯示出修改后的效果。這個開發工具還是比較簡單的，沒有什么復雜的功能。

打開調試器：

這個調試器感覺和谷歌瀏覽器的開發者工具一毛一樣。

文件樹：app.js是編譯過的文件，帶 ?[sm] 后綴的則是沒有編譯過的文件：

Console控制臺界面會顯示錯誤信息或者輸出信息：

在Source界面可以按Esc鍵讓控制臺位于下方顯示：

Network界面可以查看網絡請求信息：

Storage界面查看緩存：

AppData界面查看數據綁定：

Wxml界面，可以審查元素：

詳情界面：

如果你使用了AppID的話，上傳那幾個按鈕應該是亮著的，因為我是游客ID所以是灰色的。

切后臺是用來模擬應用切換時在后臺運行的狀況：

清緩存的按鈕會清除Storage界面里緩存的數據。

關于快捷鍵：
Ctrl+f可以打開查找：

斷點調試的快捷鍵：
F10單步調試，F8是調到下一個斷點

這些快捷鍵可以在設置 >>> 快捷鍵設置里查看到，也可以自定義快捷鍵：