體驗(yàn)微信小程序

本章會(huì)詳細(xì)介紹微信小程序工具以及微信小程序結(jié)構(gòu)，包括微信小程序工具操作、目錄結(jié)構(gòu)、常用快捷鍵等。

2.1 界面與操作

微信小程序開發(fā)工具的功能非常強(qiáng)大和便捷，其工具內(nèi)部集成了代碼編輯、開發(fā)調(diào)試及程序發(fā)布等功能，微信小程序開發(fā)工具界面如圖21所示。

微信小程序開發(fā)工具界面基本劃分為四大區(qū)域：頂部菜單區(qū)域、導(dǎo)航菜單區(qū)域、目錄文件&模擬運(yùn)行區(qū)域、編輯&調(diào)試開發(fā)區(qū)域。頂部菜單區(qū)域和導(dǎo)航菜單區(qū)域是固定的，目錄文件&模擬運(yùn)行區(qū)域和編輯&調(diào)試開發(fā)區(qū)域會(huì)根據(jù)選擇導(dǎo)航菜單的不同功能而有所不同。

頂部菜單區(qū)域在開發(fā)小程序的過程中使用的機(jī)會(huì)并不多，其中“設(shè)置”頁面用于配置開發(fā)模擬器運(yùn)行程序時(shí)連接的網(wǎng)絡(luò)代理（見圖22）。“動(dòng)作”頁面用于刷新、后退、前進(jìn)等操作。“幫助”頁面用于顯示開發(fā)工具的版本和版權(quán)聲明等信息。導(dǎo)航菜單區(qū)域是開發(fā)者經(jīng)常使用的功能區(qū)域。特別是其中的編輯和調(diào)試的功能對(duì)開發(fā)者來說是非常重要的功能。下面重點(diǎn)介紹這兩個(gè)功能。

圖21 開發(fā)工具主界面

圖22 設(shè)置頁面

2.2 編輯功能

編輯區(qū)分為兩個(gè)部分，在右側(cè)的編輯區(qū)域可以對(duì)當(dāng)前項(xiàng)目進(jìn)行編寫、文件添加和刪除以及重命名等基本操作。在左側(cè)的模擬器區(qū)域可以實(shí)時(shí)預(yù)覽編輯的情況，如圖23所示。編輯器同時(shí)也提供了比較完善的自動(dòng)補(bǔ)全和自動(dòng)保存功能，編寫代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前代碼為編輯狀態(tài)，如果直接關(guān)閉工具或者切換項(xiàng)目，也不會(huì)丟失當(dāng)前代碼的編輯狀態(tài)。但是要注意，處于編輯狀態(tài)的代碼只保存到工具內(nèi)部，并沒有寫到硬盤上，只有手動(dòng)保存文件后，修改的內(nèi)容才會(huì)寫到硬盤上，并觸發(fā)實(shí)時(shí)預(yù)覽。

圖23 編輯區(qū)頁面

2.3 調(diào)試功能

調(diào)試工具分為七大功能模塊：Console、Sources、Network、Storage、AppData、Wxml和Sensor，如圖24所示。

圖24 調(diào)試工具選擇區(qū)（1） Console選項(xiàng)卡有以下兩大功能。

① 開發(fā)人員可以在此輸入和調(diào)試代碼，如圖25所示。

圖28 Network頁面（4） Storage選項(xiàng)卡用于顯示當(dāng)前項(xiàng)目使用wx.setStorage或者wx.setStorageSync后的數(shù)據(jù)存儲(chǔ)情況，如圖29所示。

圖29 Storage頁面（5） AppData選項(xiàng)卡的主要功能是顯示當(dāng)前項(xiàng)目在當(dāng)前時(shí)刻AppData的具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況，可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖210所示。

圖210 AppData頁面（6） Wxml選項(xiàng)卡的主要功能是幫助開發(fā)者開發(fā)WXML轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的wxss屬性，同時(shí)可以通過修改對(duì)應(yīng)的wxss屬性，在模擬器中實(shí)時(shí)看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁面中組件對(duì)應(yīng)的WXML代碼，如圖211所示。

圖211 Wxml頁面（7） Sensor選項(xiàng)卡有兩大功能。

① 開發(fā)人員可以在這里選擇模擬地理位置，如圖212所示。

圖212 設(shè)置模擬地理位置② 開發(fā)人員可以在這里模擬移動(dòng)設(shè)備表現(xiàn)，用于調(diào)試重力感應(yīng)API，如圖213

圖213 調(diào)試模擬器重力感應(yīng)

2.4 項(xiàng)目功能編輯器

項(xiàng)目選項(xiàng)卡主要用于顯示和設(shè)置項(xiàng)目的信息，其中顯示的信息包括圖標(biāo)、AppID、本地開發(fā)目錄、最新更新時(shí)間、最近上傳時(shí)間以及代碼包大小，如圖214所示。· 預(yù)覽：指上傳源碼到微信服務(wù)器并成功后會(huì)生成一個(gè)二維碼，開發(fā)者用最新版本的微信掃描二維碼后，即可在手機(jī)上體驗(yàn)到最新的效果。

圖214 項(xiàng)目設(shè)置頁面· 上傳：指上傳源碼到微信服務(wù)器后，開發(fā)者可以在微信管理后臺(tái)看到本地提交情況，此功能只限于管理員微信號(hào)操作。

· 開啟ES6轉(zhuǎn)ES5：在微信0.10.101000以及之后版本的開發(fā)工具

中，會(huì)默認(rèn)使用babel將開發(fā)者代碼中的ES6語法轉(zhuǎn)換為三端都能很好支持的ES5代碼，幫助開發(fā)者解決因環(huán)境不同所帶來的開發(fā)問題。

開發(fā)者可以在項(xiàng)目設(shè)置中關(guān)閉這個(gè)功能。

· 開啟上傳代碼時(shí)樣式文件自動(dòng)補(bǔ)全：開啟此功能后，開發(fā)工具會(huì)自動(dòng)檢測(cè)并補(bǔ)全缺失樣式。

· 開啟代碼壓縮上傳：開啟此功能后，會(huì)在上傳代碼時(shí)幫助開發(fā)者壓縮代碼，減小代碼包的體積。

· 監(jiān)聽文件變化，自動(dòng)刷新開發(fā)者工具：開啟此功能后和當(dāng)前項(xiàng)目相關(guān)文件改變時(shí)，會(huì)自動(dòng)幫助開發(fā)者刷新模擬器。

· 開發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名及TLS版本：開啟此功能后，開發(fā)工具在開發(fā)環(huán)境中將不會(huì)校驗(yàn)安全域名和TLS版本。

2.5 常用快捷鍵

為了提高開發(fā)效率，微信小程序的編輯器中設(shè)置了很多快捷鍵供開發(fā)者使用，下面介紹一些常用的快捷鍵的功能，如表21所示。

表21

2.6 項(xiàng)目的目錄與文件結(jié)構(gòu)

在創(chuàng)建小程序項(xiàng)目時(shí)，小程序開發(fā)工具會(huì)默認(rèn)生成一些文件，這些文件就是小程序的基本結(jié)構(gòu)。除此之外，在開發(fā)過程中，可以根據(jù)產(chǎn)品需求自定義小程序的目錄和文件，本章會(huì)簡(jiǎn)單介紹一下微信小程序的結(jié)構(gòu)。

項(xiàng)目目錄

• 程序