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

10年積累的網(wǎng)站設計、做網(wǎng)站經驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有積石山保安族東鄉(xiāng)族免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

下載開發(fā)工具

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

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

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

小程序目前情況及限制

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

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

小程序開發(fā)工具介紹

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

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

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

創(chuàng)建完成：

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

打開調試器：

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

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

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

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

Network界面可以查看網(wǎng)絡請求信息：

Storage界面查看緩存：

AppData界面查看數(shù)據(jù)綁定：

Wxml界面，可以審查元素：

詳情界面：

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

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

清緩存的按鈕會清除Storage界面里緩存的數(shù)據(jù)。

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

斷點調試的快捷鍵：
F10單步調試，F(xiàn)8是調到下一個斷點

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