1.3　制作第一個小程序

不管學習什么技術(shù)，都需要邁出第一步，紙上談兵是無法進步的，所以建議將本書所有的實戰(zhàn)項目都照著做一下。微信開發(fā)者工具中的大多數(shù)操作按鈕提示都是中文的，使用起來也相對便捷一些，所以就不需要抱怨又要學一個新的工具了。現(xiàn)在開發(fā)環(huán)境和工具都已安裝完畢，讓我們開始創(chuàng)建第一個小程序！本節(jié)先創(chuàng)建一個新的項目，然后介紹微信開發(fā)者工具的使用方法，了解項目的結(jié)構(gòu)。

1.3.1　HelloWorld

打開之前安裝的微信開發(fā)者工具，登錄自己的微信就可以使用了。

【示例1-1】

單擊“新建項目”按鈕，創(chuàng)建一個經(jīng)典的HelloWorld項目。因為暫時只是練習用，所以AppID選擇測試號，如圖1.12所示。

進入到項目中看到如圖1.13所示的窗口。微信開發(fā)者工具如（微信小程序）的理念一般，排列的結(jié)構(gòu)和功能設計簡單明了。該應用整體上可以分為頂部的導航欄、模擬器、編輯器、調(diào)試器四個部分，右側(cè)寫代碼，左側(cè)看樣式，底部輸出調(diào)試。頂部導航欄中的每個按鈕都有中文標記，基本上不難理解它的意思，之后用到的時候會講，這里就不單獨列出用法了。在接下來的小節(jié)中，我們將分別對模擬器、編輯器、調(diào)試器這3個模塊的基本用法進行講解。

1.3.2　編輯器的使用

編輯器算是中規(guī)中矩的，左側(cè)是目錄、文件的層級列表，右側(cè)為代碼部分。這部分的功能并不復雜，這里首先解釋左側(cè)的目錄區(qū)。從左到右各按鈕的功能分別是新建文件／目錄、文件／內(nèi)容搜索、打開項目所在的文件夾、收起所有展開的目錄、隱藏左側(cè)目錄區(qū)。

值得一提的是，新建時會把文件建立在根目錄，如果需要在某個目錄下，就在該目錄下右擊后新建。該新建功能封裝得比較豐富，除了目錄和文件以外，還支持直接創(chuàng)建頁面（Page）和組件（Component）。以創(chuàng)建頁面功能為例，微信開發(fā)者工具會自動生成js、json、wxml、wxss四個文件，并會自動在文件里填充頁面所需的基本代碼，最后還會將頁面自動注冊到app.json，可以說是極大地提高了開發(fā)者的使用體驗。

右側(cè)寫代碼的區(qū)域是中規(guī)中矩的，比如查找、剪貼、粘貼、格式化代碼等基本都有，具體的快捷鍵和其他編輯器差不多，如圖1.14中的右鍵菜單所示。

1.3.3　調(diào)試器的使用

調(diào)試器部分的內(nèi)容與Chrome的開發(fā)模式比較相似，整體功能也非常全面，我們從中選擇幾個比較常用的功能進行講解。

（1）首先解釋Console。它最常用的功能就是在我們開發(fā)的過程中輸出一些數(shù)據(jù)進行調(diào)試，當然直接在Console里寫JS代碼也是可以的。除此之外，微信小程序還會提醒是否使用了過期的方法、列出頁面索引等，如圖1.15所示。

（2）接著解釋Sources。在該選項卡中可以看到文件的目錄，而且支持斷點功能。以HelloWorld項目為例，找到pages/index/index/index.js，在onLoad函數(shù)中設置一個斷點，單擊頂部的編譯按鈕重新運行項目，就可以看到斷點生效了，如圖1.16所示。

（3）Network的功能也很簡單明了。所有的網(wǎng)絡請求都能在這里看到，以項目中用戶頭像圖片的請求舉例。在Headers中，我們可以看到請求的URL、請求類型、狀態(tài)碼、Content-Type等必要信息，如圖1.17所示。如果不看圖片之類的請求，可以在上方切換分類為XHR。

（4）Storage也比較常用，我們使用wx.setStorage存儲的數(shù)據(jù)都可以在這里一目了然地看到，與前端localStorage不同的是，除了字符串，其他對象、數(shù)組等類型都可以存儲。

1.3.4　模擬器的使用

回到圖1.13，我們可以看到模擬器默認在屏幕左邊。

這里的功能也不復雜，頂部第一個按鈕用于切換模擬器的類型，比如iOS設備、Android設備等都在其中。與Chrome不同的是，切換完不需要手動刷新也可以看到完整的效果，模擬器會自動重載。

剩下的幾個功能為頁面縮放比例調(diào)整、網(wǎng)絡類型切換、模擬操作（返回鍵等）、靜音、為模擬器單獨創(chuàng)建窗口。