學習計算機語言，一般會最先接觸“Hello World! ”程序。與之類似，要掌握微信小程序的開發，我們也先來創建自己的第一個小程序實例。

1.1 準備工作

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

開始創建之前，我們需要做些準備工作，包括工作賬號及項目ID獲取，開發環境要求與搭建等，這也是開發小程序必備的前提工作。

1.1.1 成為微信公眾平臺開發者

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

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

1）填寫賬號信息。

2）郵箱激活。

3）信息登記。

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

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

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

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

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

1.1.2 獲取小程序AppID

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

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

1.1.3 安裝開發者工具包

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

雙擊下載的安裝包，將出現安裝向導，如圖1-6所示。

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

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

至此，我們創建第一個小程序所需的準備工作全部完成。

1.2 創建第一個小程序——Hello WXapplet

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

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

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

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

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

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

1.3 微信Web開發者工具的操作與使用

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

1.3.1 界面與操作

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

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

1區“頂部菜單”最為簡單，開發者使用到的機會也不多。“設置”是配置開發機運行程序時如何連接網絡（見圖1-12）。“動作”是指“刷新”“后退”“前進”等操作，主要在網頁或界面調試時使用。“幫助”則是本Web開發者工具的版本與版權聲明等信息。

2區“導航菜單”是開發者經常切換使用的功能區。特別是其中的“編輯”與“調試”功能將是開發者使用最多的重要功能。下面重點介紹這兩個功能。

1.3.2 編輯功能

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

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

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

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

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

■Ctrl+End：移動到文件結尾。

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

■Ctrl+i：選中當前行。

■Shift+End：選擇從光標到行尾。

■Shift+Home：選擇從行首到光標處。

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

■Ctrl+D：選中匹配。

■Ctrl+U：光標回退。

再比如，格式調整的快捷操作如下：

■Ctrl+S：保存文件。

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

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

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

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

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

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

■Ctrl+Shift+Enter：在當前行上方插入一行。

快捷鍵可以說是程序開發者的至愛，編輯器也支持自定義快捷鍵。關于如何自定義快捷鍵，可參考下節“調試”功能中的“快捷鍵設置項”。

1.3.3 調試功能

我們再來看導航菜單區的“調試”功能，這是開發者檢測代碼結果實現與排查問題的核心工具，界面如圖1-14所示。

我們看到，這時3區變成了“模擬器”，4區變成了調試工具與輸出區。

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

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

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

1）開發者直接在此輸入代碼并調試，如圖1-15所示。

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

Sources頁：源文件調試信息頁，用于顯示當前項目的腳本文件，如圖1-17所示。

Network頁：網絡調試信息頁，用于觀察和顯示每個元素請求信息和套接字（socket）狀態等網絡相關的詳細信息，如圖1-18所示。

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

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

Wxml頁：用于幫助開發者調試WXML轉化后的界面。通過這里的調試可以看到真實的頁面結構及對應的WXSS屬性，同時可通過修改對應的WXSS屬性，在模擬器中即時查看修改后的情形。并且，可以通過調試區左上角的選擇器，快速地找到頁面中組件所對應的WXML代碼，如圖1-21所示。

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

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

1.3.4 項目功能

導航菜單區的“項目”功能，用來顯示當前項目的細節，包括圖標、AppID以及目錄信息等。同時，提供了小程序發布功能（上傳）與手機預覽功能（預覽）。

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

1.3.5 運行小程序

1．調試預覽

開發者可以在微信開發者工具中點擊左側導航“調試”功能，以便在模擬器中運行小程序，查看小程序運行效果。

2．手機預覽

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

3．開發者手機預覽

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