1.2.2 開發(fā)工具功能介紹

微信團隊發(fā)布了微信小程序開發(fā)者工具、微信小程序開發(fā)文檔和微信小程序設(shè)計指南。微信小程序開發(fā)者工具集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能，幫助開發(fā)者簡單、高效地開發(fā)微信小程序。

啟動工具時，開發(fā)者需要使用已在后臺成功綁定的微信號掃描二維碼登錄，后續(xù)所有的操作都會基于該微信賬號。

程序調(diào)試主要有4大功能區(qū)：模擬器、編輯器、調(diào)試器和云開發(fā)。

1．模擬器

模擬器模擬微信小程序在客戶端真實的邏輯表現(xiàn)，對于絕大部分的API模擬器能夠呈現(xiàn)出正確的狀態(tài)，如圖1-14所示。

2．編輯器

微信小程序編輯器可以對當(dāng)前項目進行代碼編寫和文件的添加、刪除及重命名等基本操作，如圖1-15所示。工具目前提供了對5種文件的編輯功能：wxml、wxss、js、json、wxs，并具有圖片文件的預(yù)覽功能。同大多數(shù)編輯器一樣，工具提供了較為完善的自動補全功能：js文件編輯能幫助開發(fā)者補全所有的API及相關(guān)的注釋解釋，并提供代碼模板支持；wxml文件編輯能幫助開發(fā)者直接寫出相關(guān)的標簽和標簽中的屬性；json文件編輯能幫助開發(fā)者補全相關(guān)的配置，并給出實時的提示。

單擊上方“預(yù)覽”功能按鈕，開發(fā)工具會自動編譯和構(gòu)建代碼，并生成代碼包上傳到微信服務(wù)器，成功后將會顯示該項目的二維碼，開發(fā)者用微信掃描二維碼即可在手機上看到相應(yīng)項目的真實表現(xiàn)。

3．調(diào)試器

調(diào)試器分為11個功能模塊：Console、Sources、Network、Security、Mock、AppData、Audits、Sensor、Storage、Trace和Wxml。

Console模塊有兩大功能：開發(fā)者輸入和調(diào)試代碼，以及微信小程序的錯誤輸出，如圖1-16所示。Sources模塊用于顯示當(dāng)前項目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會對腳本文件進行編譯，所以在Sources模塊中，開發(fā)者看到的文件是處理之后的腳本文件，開發(fā)者的代碼都會被包裹在define函數(shù)中。Network模塊用于觀察和顯示request和socket的請求情況。

Security、Mock、Audits和Trace模塊分別可以對小程序進行安全認證、數(shù)據(jù)模擬、體驗評分和性能監(jiān)控。AppData模塊用于顯示當(dāng)前項目當(dāng)前時刻appdata的具體數(shù)據(jù)，實時地反饋項目數(shù)據(jù)情況，用戶可以在此處編輯數(shù)據(jù)，數(shù)據(jù)結(jié)果將及時反饋到界面上。Sensor模塊主要有兩個功能，分別用于選擇模擬地理位置和模擬移動設(shè)備表現(xiàn)（用于調(diào)試重力感應(yīng)API）。Storage模塊用于顯示當(dāng)前項目使用wx.setStorage或wx.setStorageSync后的數(shù)據(jù)存儲情況。Wxml模塊用于幫助開發(fā)者開發(fā)Wxml轉(zhuǎn)化后的界面，如圖1-17所示。在這里可以看到真實的頁面結(jié)構(gòu)及結(jié)構(gòu)對應(yīng)的WXSS屬性，同時可以修改對應(yīng)的WXSS屬性，在模擬器中實時看到修改的情況。

4．云開發(fā)

云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運維概念，開發(fā)者無須搭建服務(wù)器，使用平臺提供的API進行核心業(yè)務(wù)開發(fā)，即可實現(xiàn)快速上線和迭代。同時，這一功能同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

單擊微信小程序開發(fā)工具的“云開發(fā)”模塊，會彈出云開發(fā)控制臺窗口，如圖1-18所示。云開發(fā)控制臺主要包括運營分析、數(shù)據(jù)庫、存儲和云函數(shù)4個模塊。開發(fā)者可以使用云開發(fā)的云函數(shù)、數(shù)據(jù)庫、存儲和云調(diào)用等功能。