學(xué)習(xí)計算機語言，一般會最先接觸“Hello World! ”程序。與之類似，要掌握微信小程序的開發(fā)，我們也先來創(chuàng)建自己的第一個小程序?qū)嵗?/p>

1.1 準(zhǔn)備工作

微信小程序是繼訂閱號、服務(wù)號、企業(yè)號之后，微信公眾平臺上全新的一種連接用戶與服務(wù)的方式。

開始創(chuàng)建之前，我們需要做些準(zhǔn)備工作，包括工作賬號及項目ID獲取，開發(fā)環(huán)境要求與搭建等，這也是開發(fā)小程序必備的前提工作。

1.1.1 成為微信公眾平臺開發(fā)者

成為微信公眾平臺的開發(fā)者，是小程序開發(fā)的首要條件。只有成為微信公眾平臺開發(fā)者，才可以使用公眾平臺的各種開發(fā)接口。如果你已經(jīng)是開發(fā)者，則可以跳過本節(jié)。

一般來講，開發(fā)者的微信號就是小程序的開發(fā)者ID。要注意的是：微信號可以獨立存在，而開發(fā)者ID不能獨立存在，它必然要綁定于某個公眾平臺服務(wù)項目，如公眾號或小程序。因此，若要成為開發(fā)者，還需要有公眾平臺服務(wù)（訂閱號、服務(wù)號、企業(yè)號、小程序）賬號或歸屬于某個公眾平臺服務(wù)的開發(fā)者。如果還沒有公眾平臺小程序服務(wù)賬號，需要先注冊，注冊入口為：https://mp.weixin.qq.com/，點擊首頁右上角“立即注冊”進行注冊。經(jīng)過以下步驟完成小程序服務(wù)賬號注冊：

1）填寫賬號信息。

2）郵箱激活。

3）信息登記。

完成注冊后，可以登錄公眾平臺（網(wǎng)址為https://mp.weixin.qq.com/）并完善微信小程序信息（如小程序名稱、頭像、小程序介紹、服務(wù)范圍等）。

然后我們就可以綁定開發(fā)者了。登錄后進入“用戶身份”頁面，選擇“開發(fā)者”進行綁定，如圖1-1和圖1-2所示。

由于個人不能注冊小程序賬號，但這并不意味著個人不能進行小程序開發(fā)，這時可以通過已有的訂閱號（或新注冊的訂閱號）開發(fā)小程序。步驟如下：

1）使用訂閱號賬號，登錄公眾平臺（用電腦在https://mp.weixin.qq.com/中登錄），在左邊菜單中，選擇“開發(fā)”→“基本配置”，點擊“開通”，成為開發(fā)者。

2）在左邊菜單中，選擇“開發(fā)”→“開發(fā)者工具”→在頁中點選“Web開發(fā)者工具”的“進入”，點選“綁定開發(fā)者微信號”，如圖1-3所示。成功后可以看到個人頭像；如圖1-4所示。之后，開發(fā)者微信號可在Web開發(fā)者工具中進行公眾號或小程序的開發(fā)與調(diào)試。

1.1.2 獲取小程序AppID

成功注冊小程序賬號后，會有唯一的AppID。登錄https://mp.weixin.qq.com，在頁面左邊的菜單中，點選“設(shè)置”→“開發(fā)設(shè)置”，可查看到微信小程序的AppID，如圖1-5所示。

要在手機上體驗此AppID的小程序，默認只有公眾平臺小程序賬號的管理員微信號可以；其他微信號還需要進行“綁定開發(fā)者”的操作。即在“用戶身份”-“開發(fā)者”模塊中，綁定需要體驗該小程序的微信號。

1.1.3 安裝開發(fā)者工具包

作為開發(fā)者，需要有開發(fā)環(huán)境。這里需要下載安裝開發(fā)者工具包。截止于2017年5月9日，微信團隊提供的開發(fā)者工具包版本為0.17.170900，有Windows 32位、Windows 64位及Mac三種版本。官方下載地址為：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。成功下載適當(dāng)?shù)陌姹竞螅陂_發(fā)者的電腦上進行安裝。下面以Windows 64位安裝包為例，描述安裝過程。

雙擊下載的安裝包，將出現(xiàn)安裝向?qū)В鐖D1-6所示。

點擊“下一步”，完成開發(fā)者工具包的安裝，如圖1-7所示。

運行“微信Web開發(fā)者工具”，將會要求開發(fā)者使用手機微信掃碼登錄，如圖1-8所示。

至此，我們創(chuàng)建第一個小程序所需的準(zhǔn)備工作全部完成。

1.2 創(chuàng)建第一個小程序——Hello WXapplet

事不宜遲，我們馬上開始創(chuàng)建第一個微信小程序——Hello WXapplet。

在安裝開發(fā)者工具的電腦上運行“微信Web開發(fā)者工具”，通過開發(fā)者的微信掃碼進入后，即可得到如圖1-9所示的界面。

點擊“添加項目”，填入前面我們獲得的AppID（無AppID可以忽略），并輸入項目名稱“Hello WXapplet”，選定本地文件夾作為“項目目錄”，如圖1-10所示。

勾選“在當(dāng)前目錄中創(chuàng)建quick start項目”后，點擊“添加項目”按鈕，即已成功創(chuàng)建了我們的第一個微信小程序項目——Hello WXapplet。

Hello WXapplet項目創(chuàng)建成功后，即進入并看到完整的開發(fā)者工具界面。我們創(chuàng)建的Hello WXapplet這個小程序只包含兩個頁面：首頁及信息頁，實現(xiàn)一些簡單的功能。其中，首頁顯示當(dāng)前登錄的微信號頭像及昵稱。點擊首頁，則進入信息頁，可以查看到小程序啟動的日志信息。我們將在第2章中全面解析Hello WXapplet這個項目的代碼。

在進行Hello WXapplet小程序項目代碼介紹之前，我們需要熟悉一下微信Web開發(fā)者工具的操作。

1.3 微信Web開發(fā)者工具的操作與使用

“工欲善其事，必先利其器”。熟悉開發(fā)者工具界面與操作，將為我們今后的開發(fā)帶來極大的便利。

1.3.1 界面與操作

微信開發(fā)者工具功能非常強大與便捷，集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能。主界面如圖1-11所示。

開發(fā)者工具界面基本劃分為四大區(qū)域：1區(qū)“頂部菜單”，2區(qū)“導(dǎo)航菜單”，3區(qū)“目錄文件/模擬運行”，4區(qū)“編輯/調(diào)試開發(fā)”。1區(qū)與2區(qū)是固定的。3區(qū)與4區(qū)會依據(jù)選擇導(dǎo)航菜單區(qū)的不同功能或模式有所不同。

1區(qū)“頂部菜單”最為簡單，開發(fā)者使用到的機會也不多。“設(shè)置”是配置開發(fā)機運行程序時如何連接網(wǎng)絡(luò)（見圖1-12）。“動作”是指“刷新”“后退”“前進”等操作，主要在網(wǎng)頁或界面調(diào)試時使用。“幫助”則是本W(wǎng)eb開發(fā)者工具的版本與版權(quán)聲明等信息。

2區(qū)“導(dǎo)航菜單”是開發(fā)者經(jīng)常切換使用的功能區(qū)。特別是其中的“編輯”與“調(diào)試”功能將是開發(fā)者使用最多的重要功能。下面重點介紹這兩個功能。

1.3.2 編輯功能

我們先來看其中的“編輯”功能。點擊“編輯”后出現(xiàn)的界面如圖1-13所示。

原來的3區(qū)部分就變成了項目的目錄與文件列表區(qū)，4區(qū)部分則變成了對應(yīng)所選文件的代碼編輯區(qū)，我們也稱之為代碼編輯器。

微信開發(fā)者工具提供的代碼編輯器，可以對當(dāng)前項目對應(yīng)文件進行編碼工作，同時也可以對文件進行基本的添加、刪除及重命名操作。

代碼編輯器現(xiàn)在支持4種文件的編輯：wxml、wxss、js以及json文件。當(dāng)然編輯器支持了較為完善的自動補全功能，大大方便了開發(fā)者。

代碼編輯器還支持快捷鍵操作，而且快捷鍵功能與行為基本保持與其他編輯器一致。比如光標(biāo)相關(guān)快捷鍵操作如下：

■Ctrl+End：移動到文件結(jié)尾。

■Ctrl+Home：移動到文件開頭。

■Ctrl+i：選中當(dāng)前行。

■Shift+End：選擇從光標(biāo)到行尾。

■Shift+Home：選擇從行首到光標(biāo)處。

■Ctrl+Shift+L：選中所有匹配。

■Ctrl+D：選中匹配。

■Ctrl+U：光標(biāo)回退。

再比如，格式調(diào)整的快捷操作如下：

■Ctrl+S：保存文件。

■Ctrl+[, Ctrl+]：代碼行縮進。

■Ctrl+Shift+[, Ctrl+Shift+]：折疊打開代碼塊。

■Ctrl+C, Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行。

■Shift+Alt+F：代碼格式化。

■Alt+Up, Alt+Down：上下移動一行。

■Shift+Alt+Up, Shift+Alt+Down：向上向下復(fù)制一行。

■Ctrl+Shift+Enter：在當(dāng)前行上方插入一行。

快捷鍵可以說是程序開發(fā)者的至愛，編輯器也支持自定義快捷鍵。關(guān)于如何自定義快捷鍵，可參考下節(jié)“調(diào)試”功能中的“快捷鍵設(shè)置項”。

1.3.3 調(diào)試功能

我們再來看導(dǎo)航菜單區(qū)的“調(diào)試”功能，這是開發(fā)者檢測代碼結(jié)果實現(xiàn)與排查問題的核心工具，界面如圖1-14所示。

我們看到，這時3區(qū)變成了“模擬器”，4區(qū)變成了調(diào)試工具與輸出區(qū)。

模擬器將如實地模擬微信小程序項目在客戶端的邏輯與操作表現(xiàn)，絕大部分的功能與API調(diào)用均能在模擬器上正確呈現(xiàn)。

調(diào)試工具與輸出區(qū)的頂部是一行菜單，分別是：Console、Sources、Network、Storage、AppData、Wxml，最右邊的擴展菜單項是定制與控制開發(fā)工具鈕“…”。下面我們一一進行簡單介紹。

Console頁：控制臺信息頁，它有兩個作用：

1）開發(fā)者直接在此輸入代碼并調(diào)試，如圖1-15所示。

2）顯示小程序的錯誤輸出，如圖1-16所示。

Sources頁：源文件調(diào)試信息頁，用于顯示當(dāng)前項目的腳本文件，如圖1-17所示。

Network頁：網(wǎng)絡(luò)調(diào)試信息頁，用于觀察和顯示每個元素請求信息和套接字（socket）狀態(tài)等網(wǎng)絡(luò)相關(guān)的詳細信息，如圖1-18所示。

Storage頁：數(shù)據(jù)存儲信息頁，用于顯示當(dāng)前項目使用存儲API（wx.setStorage或wx.setStorageSync）接口的數(shù)據(jù)存儲情況。比如，我們在Console中輸入：wx.setStorage ({key:"name", data:"Roeyxiong"})，則在Storage頁面中就可以看到我們存儲了一個Key-Value數(shù)據(jù)，如圖1-19所示。

AppData頁：用于調(diào)試顯示當(dāng)前小程序項目此時此刻的應(yīng)用具體數(shù)據(jù)，實時地回顯項目數(shù)據(jù)調(diào)整情況。即我們可在此處編輯修改數(shù)據(jù)，反饋到當(dāng)前界面上去。比如，我們將“Hello World”這個字，改為“Hello WXApplet”，界面上馬上就顯示出相應(yīng)的效果，如圖1-20所示。

Wxml頁：用于幫助開發(fā)者調(diào)試WXML轉(zhuǎn)化后的界面。通過這里的調(diào)試可以看到真實的頁面結(jié)構(gòu)及對應(yīng)的WXSS屬性，同時可通過修改對應(yīng)的WXSS屬性，在模擬器中即時查看修改后的情形。并且，可以通過調(diào)試區(qū)左上角的選擇器，快速地找到頁面中組件所對應(yīng)的WXML代碼，如圖1-21所示。

例如，我們先點擊①定位，在模擬器中選擇定位點②，快速定位到WXML代碼段③。然后我們可以在最右邊的樣式④中進行修改調(diào)配，并立即查看效果。

最右邊的擴展菜單項——定制與控制開發(fā)工具鈕“…”，主要包括開發(fā)工具的一些定制與設(shè)置，如“Show Console”（顯示控制臺頁），“Search all files”（查找文件），“Shotcuts”（快捷鍵自定義或配置），“Settings”（開發(fā)者工具的環(huán)境參數(shù)設(shè)定，包括喜好Preferences，工作區(qū)域Workspace、黑箱Blackboxing，支持模擬的手機設(shè)備型號Devices，網(wǎng)絡(luò)帶寬及時延限制Throttling等），“Help”（幫助）以及“More tools”（更多工具）。這些工具包括：Inspect devices（檢測設(shè)備）、Network conditions（網(wǎng)絡(luò)條件）、Rendering settings（渲染設(shè)定）、Sensors（重力傳感器）。這里不展開敘述，如圖1-22所示。

1.3.4 項目功能

導(dǎo)航菜單區(qū)的“項目”功能，用來顯示當(dāng)前項目的細節(jié)，包括圖標(biāo)、AppID以及目錄信息等。同時，提供了小程序發(fā)布功能（上傳）與手機預(yù)覽功能（預(yù)覽）。

我們點擊“預(yù)覽”，開發(fā)者工具會將項目代碼進行編譯與構(gòu)建，生成代碼包上傳到微信服務(wù)器，如圖1-23所示。成功后會顯示一個二維碼，這樣開發(fā)者就可以用手機微信掃描它，并在手機上看到小程序項目的真實表現(xiàn)。

1.3.5 運行小程序

1．調(diào)試預(yù)覽

開發(fā)者可以在微信開發(fā)者工具中點擊左側(cè)導(dǎo)航“調(diào)試”功能，以便在模擬器中運行小程序，查看小程序運行效果。

2．手機預(yù)覽

開發(fā)者也可以將小程序上傳到微信小程序平臺中，讓用戶或測試與開發(fā)人員通過手機微信客戶端來掃碼，以裝載小程序，并在微信客戶端環(huán)境下運行。

3．開發(fā)者手機預(yù)覽

在開發(fā)者工具左側(cè)菜單欄中選擇“項目”，點擊“預(yù)覽”，掃碼后即可在微信客戶端中體驗，如圖1-24所示。