小程序環(huán)境搭建與開發(fā)工具的簡(jiǎn)單介紹

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

下載開發(fā)工具

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

下載對(duì)應(yīng)的版本即可，我這里下載的是最新版的。

下載完成之后安裝，因?yàn)榘惭b都是圖形化而且是中文的，就不過(guò)多說(shuō)明了：

小程序目前情況及限制

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

建議處于學(xué)習(xí)階段的話，在模擬器上運(yùn)行會(huì)比較好一些，真機(jī)運(yùn)行需要綁定一些相關(guān)的信息，過(guò)程比較麻煩，不利于初學(xué)者。

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

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

登錄之后點(diǎn)擊小程序項(xiàng)目：

創(chuàng)建相應(yīng)的工程，沒(méi)有AppID的話可以點(diǎn)擊 “點(diǎn)此體檢” 即可，當(dāng)然你也可以去注冊(cè)一個(gè)AppID，我這里選擇的是不使用AppID：

創(chuàng)建完成：

左邊是效果的顯示區(qū)域，右邊是代碼的編寫區(qū)域。當(dāng)代碼修改后保存按Ctrl+s保存時(shí)就會(huì)自動(dòng)編譯，然后左邊就會(huì)顯示出修改后的效果。這個(gè)開發(fā)工具還是比較簡(jiǎn)單的，沒(méi)有什么復(fù)雜的功能。

打開調(diào)試器：

這個(gè)調(diào)試器感覺(jué)和谷歌瀏覽器的開發(fā)者工具一毛一樣。

文件樹：app.js是編譯過(guò)的文件，帶 ?[sm] 后綴的則是沒(méi)有編譯過(guò)的文件：

Console控制臺(tái)界面會(huì)顯示錯(cuò)誤信息或者輸出信息：

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

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

Storage界面查看緩存：

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

Wxml界面，可以審查元素：

詳情界面：

如果你使用了AppID的話，上傳那幾個(gè)按鈕應(yīng)該是亮著的，因?yàn)槲沂怯慰虸D所以是灰色的。

切后臺(tái)是用來(lái)模擬應(yīng)用切換時(shí)在后臺(tái)運(yùn)行的狀況：

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

關(guān)于快捷鍵：
Ctrl+f可以打開查找：

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

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