1、微信小程序開發(fā)圖解案例教程微信小程序介紹 微信小程序開發(fā)準(zhǔn)備 微信小程序開發(fā)工具的使用 沙場(chǎng)大練兵：Hello World的創(chuàng)建 小結(jié) 第1章 認(rèn)識(shí)微信小程序1.1.1初識(shí)微信小程序 微信小程序（簡(jiǎn)稱小程序）是一個(gè)基于去中心化而存在的平臺(tái)，它沒有聚合的入口，有多種進(jìn)入方式。（1）在微信中的“發(fā)現(xiàn)”界面，可以找到小程序的入口，如圖1.1所示。1.1微信小程序介紹圖1.1微信小程序入口（2）在微信主界面下拉，會(huì)看到用過的微信小程序。（3）給好友或者在群里分享小程序。 小程序的界面和使用方法和App類似，圖1.2所示是幾個(gè)已發(fā)布的常用小程序界面。圖1.2常用微信小程序界面 用戶需要下載、安裝才可以使

2、用App，安裝時(shí)還會(huì)考慮App占用多大存儲(chǔ)空間，哪些程序應(yīng)該卸載掉以釋放空間。 微信小程序則無需安裝，直接使用，不占用存儲(chǔ)空間。用戶在使用微信小程序后，可以用完即走。 微信小程序看起來是程序，但它以完全不同于App的狀態(tài)出現(xiàn)，具有更靈活的應(yīng)用組織形態(tài)。 小程序提供的功能如下。（1）分享頁功能。（2）分享對(duì)話功能。（3）線下掃碼進(jìn)入微信小程序功能。（4）掛起狀態(tài)功能。（5）消息通知功能。（6）實(shí)時(shí)音視頻錄制播放功能。1.1.2微信小程序的功能（7）硬件連接功能。 （8）小游戲功能。（9）公眾號(hào)關(guān)聯(lián)功能。（10）搜索查找功能。 （11）識(shí)別二維碼功能。 小程序不提供的功能如下。（1）小程序沒有集中

3、入口，沒有應(yīng)用商店。（2）小程序沒有訂閱關(guān)系，沒有粉絲，只有訪問量。（3）小程序不能推送消息。 從上線開始，各種小程序就如雨后春筍般出現(xiàn)，小程序有哪些適合的使用場(chǎng)景呢？在發(fā)布小程序的時(shí)候，要選擇服務(wù)類目。 通過這些服務(wù)類目，我們能知道小程序的使用場(chǎng)景。服務(wù)類目分為個(gè)人服務(wù)類目和企業(yè)服務(wù)類目。 個(gè)人服務(wù)類目針對(duì)以個(gè)人為開發(fā)主體的小程序，服務(wù)范圍??；企業(yè)服務(wù)類目針對(duì)以企業(yè)為開發(fā)主體的小程序，服務(wù)范圍大，如表1.1、表1.2所示。1.1.3微信小程序的使用場(chǎng)景表1.1個(gè)人服務(wù)類目續(xù)表表1.2企業(yè)服務(wù)類目續(xù)表 原生App一般要同時(shí)開發(fā)iOS和Android兩版，而小程序只需要做一版。毫無疑問，這點(diǎn)是小

4、程序最大的優(yōu)勢(shì)。從這個(gè)角度來看，小程序是“跨平臺(tái)”的。 在現(xiàn)階段，開發(fā)一套邏輯完整的應(yīng)用程序，小程序的開發(fā)效率是低于App的。小程序獨(dú)立出了一個(gè)封閉的生態(tài)。 小程序雖是跨平臺(tái)的，但是缺乏成熟的組件，缺少統(tǒng)計(jì)、繪圖組件，以前的echarts和hightcharts都無法使用。1.1.4微信小程序能取代App嗎 小程序不支持WebView，大量已被靜態(tài)化好的HTML頁面完全沒辦法在小程序上展示。 小程序想取代Android和iOS還要走很長(zhǎng)的路，是藍(lán)海還是死海需要時(shí)間來驗(yàn)證。 小程序經(jīng)過騰訊公司的扶持和發(fā)展，已經(jīng)吸引了很多企業(yè)使用，作為與iOS、Android、公眾號(hào)、網(wǎng)站并行的流量入口。 微信小

5、程序從開始研發(fā)、正式發(fā)布到推廣使用，經(jīng)歷了以下發(fā)展時(shí)期。（1）2016年1月9日，微信團(tuán)隊(duì)首次提出應(yīng)用號(hào)的概念。（2）2016年9月22日，微信公眾平臺(tái)對(duì)外發(fā)送小程序內(nèi)測(cè)邀請(qǐng)，內(nèi)測(cè)名額200個(gè)。（3）2016年11月3日，微信小程序?qū)ν夤珳y(cè)，開發(fā)完成后可以提交審核，但公測(cè)期間不能發(fā)布。1.1.5微信小程序的發(fā)展歷程（4）2016年12月28日，張小龍?jiān)谖⑿殴_課中解答外界對(duì)微信小程序的幾大疑惑，包括沒有應(yīng)用商店、沒有推送消息等。（5）2016年12月30日，微信公眾平臺(tái)對(duì)外發(fā)布公告，上線的微信小程序最多可生成10?000個(gè)帶參數(shù)的二維碼。（6）2017年1月9日，微信小程序正式上線。（7）20

6、17年3月27日，個(gè)人開發(fā)者可以申請(qǐng)小程序開發(fā)和發(fā)布。（8）2017年4月17日，小程序代碼包大小限制擴(kuò)大到2MB。（9）2017年4月20日，騰訊公司發(fā)布公眾號(hào)關(guān)注小程序新規(guī)則。（10）2017年5月12日，騰訊公司發(fā)布“小程序數(shù)據(jù)助手”。（11）2017年12月28日，微信更新的6.6.1版本開放了小游戲。（12）2018年1月18日，微信提供了電子化的侵權(quán)投訴渠道，用戶或者企業(yè)可以在微信公眾平臺(tái)以及微信客戶端入口進(jìn)行投訴。（13）2018年1月25日，微信團(tuán)隊(duì)在“微信公眾平臺(tái)”發(fā)布公告稱“從移動(dòng)應(yīng)用分享至微信的小程序頁面，用戶訪問時(shí)支持打開來源應(yīng)用”。（14）2018年3月，微信正式宣布

7、小程序廣告組件啟動(dòng)內(nèi)測(cè)，內(nèi)容還包括第三方可以快速創(chuàng)建并認(rèn)證小程序、新增小程序插件管理接口和更新基礎(chǔ)能力，開發(fā)者可以通過小程序來賺取廣告收入。 微信小程序給很多想做程序員的人提供了機(jī)會(huì)，因?yàn)樗拈_發(fā)門檻很低，不需要太難的技術(shù)。學(xué)習(xí)微信小程序開發(fā)，就可以成為一名“小程序員”。例如，設(shè)計(jì)師、學(xué)生、創(chuàng)業(yè)者、待業(yè)青年、“網(wǎng)蟲”、策劃人員、編輯、草根站長(zhǎng)等都可以轉(zhuǎn)做程序員。 微信小程序給企業(yè)提供了流量入口，企業(yè)可以通過小程序推廣自己的產(chǎn)品。經(jīng)過騰訊公司的大力扶持，小程序已經(jīng)成為各個(gè)企業(yè)非?？粗氐牧髁咳肟?。1.1.6微信小程序帶來的機(jī)會(huì)1.2.1基礎(chǔ)技術(shù)準(zhǔn)備 微信小程序自定義了一套語言，稱為WXML（微信標(biāo)

8、記語言），它的使用方法類似于HTML。另外，微信小程序還定義了自己的樣式語言WXSS，兼容了CSS，并做了擴(kuò)展；使用JavaScript來進(jìn)行業(yè)務(wù)處理，兼容了大部分JavaScript功能，但仍有一些功能無法使用，所以有一定HTML、CSS、JavaScript技術(shù)功底的人學(xué)習(xí)微信小程序開發(fā)會(huì)容易很多。1.2微信小程序開發(fā)準(zhǔn)備Step1：在“微信公眾平臺(tái)”注冊(cè)微信開發(fā)者賬號(hào)。單擊“立即注冊(cè)”，在“注冊(cè)”界面選擇“小程序”，在“小程序注冊(cè)”界面根據(jù)提示填寫相關(guān)信息完成注冊(cè)。 在微信公眾平臺(tái)中，選擇“小程序”“小程序開發(fā)文檔”，如圖1.3（a）所示，可以打開幫助文檔界面，如圖1.3（b）所示。1.

9、2.2開發(fā)準(zhǔn)備圖1.3（a）開發(fā)文檔圖1.3（b）幫助文檔 在幫助文檔里有介紹、設(shè)計(jì)、小程序開發(fā)、運(yùn)營(yíng)、數(shù)據(jù)、社區(qū)6個(gè)菜單，針對(duì)不同角色的用戶提供了不同內(nèi)容的幫助文檔。 開發(fā)人員經(jīng)常會(huì)用到這里的簡(jiǎn)易教程、框架的使用、組件的介紹、API、工具以及騰訊云支持等內(nèi)容。Step2：在文檔工具里，根據(jù)自己的操作系統(tǒng)，下載微信小程序的開發(fā)工具，如圖1.4所示。圖1.4下載開發(fā)工具Step3：按照提示完成開發(fā)工具的安裝，安裝完成后用微信掃描二維碼登錄。開發(fā)工具提供了小程序項(xiàng)目和公眾號(hào)網(wǎng)頁項(xiàng)目?jī)蓚€(gè)調(diào)試類型，如圖1.5所示。圖1.5開發(fā)工具1.3.1創(chuàng)建項(xiàng)目 在開發(fā)工具里單擊“小程序項(xiàng)目”，進(jìn)入到“小程序項(xiàng)目”

10、界面，可以添加一個(gè)新的項(xiàng)目。在這個(gè)界面里需要填寫項(xiàng)目目錄、AppID和項(xiàng)目名稱，如圖1.6所示。1.3微信小程序開發(fā)工具的使用圖1.6添加項(xiàng)目 獲取微信小程序AppID，需要在“微信公眾平臺(tái)”中登錄1.2.2節(jié)中注冊(cè)的賬戶，在“設(shè)置”“開發(fā)設(shè)置”中，查看微信小程序的AppID，如圖1.7所示。圖1.7獲取AppID 輸入AppID后，在桌面上建立一個(gè)“demo”文件夾，并將其選擇為項(xiàng)目目錄，在項(xiàng)目名稱中輸入“demo”，勾選“建立普通快速啟動(dòng)模板”選項(xiàng)（還可以選擇“建立插件快速啟動(dòng)模板”創(chuàng)建插件項(xiàng)目），單擊“確定”按鈕即可，如圖1.8所示。圖1.8創(chuàng)建demo項(xiàng)目 創(chuàng)建項(xiàng)目后，進(jìn)入到微信開發(fā)者

11、工具界面，界面大致可以分為6個(gè)區(qū)域：菜單欄區(qū)域，模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域，模擬器區(qū)域，編輯器區(qū)域，調(diào)試器區(qū)域，工具欄區(qū)域，如圖1.9所示。1.3.2開發(fā)者工具界面圖1.9開發(fā)者工具界面 菜單欄區(qū)域：包含項(xiàng)目、文件、編輯、工具、界面、設(shè)置、微信開發(fā)者工具菜單。 模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域：是用來控制模擬器區(qū)域、編輯器區(qū)域、調(diào)試器區(qū)域的顯示與隱藏的便捷操作按鈕。模擬器區(qū)域：用來顯示小程序項(xiàng)目的界面。編輯器區(qū)域：用來進(jìn)行代碼編寫的區(qū)域。調(diào)試器區(qū)域：用來進(jìn)行調(diào)試的區(qū)域。工具欄區(qū)域：包含編譯、預(yù)覽、遠(yuǎn)程調(diào)試、切后臺(tái)、清緩存、上傳、測(cè)試、騰訊云、詳情工具欄按鈕。 模擬器區(qū)域用來顯示小

12、程序界面。在小程序開發(fā)過程中，小程序界面隨著代碼編寫可以實(shí)時(shí)變化，方便小程序的開發(fā)和調(diào)試。同時(shí)模擬器可以模擬小程序在各個(gè)終端設(shè)備上的操作效果；可以設(shè)置小程序運(yùn)行的終端設(shè)備，如iPhone5、iPhone6等；設(shè)置模擬器區(qū)域的百分比大小；模擬設(shè)置Wi-Fi、2G、3G等網(wǎng)絡(luò)連接情況，如圖1.10所示。1.3.3模擬器區(qū)域圖1.10模擬器區(qū)域 編輯器區(qū)域分為兩部分：一部分用來展示項(xiàng)目文件目錄和文件結(jié)構(gòu)；另一部分用來進(jìn)行代碼編輯，如圖1.11所示。1.3.4編輯器區(qū)域圖1.11編輯器區(qū)域（1）在項(xiàng)目目錄上單擊鼠標(biāo)右鍵可以在硬盤打開文件目錄，對(duì)文件目錄重新命名，刪除目錄，在該目錄下查找指定內(nèi)容、新建文

13、件等，如圖1.12所示。圖1.12文件操作（2）在代碼編輯區(qū)域里編寫代碼，可以通過模擬器區(qū)域，實(shí)時(shí)預(yù)覽編輯的情況。修改wxss、wxml文件，會(huì)刷新當(dāng)前頁面（page），修改js文件或者json文件，會(huì)重新編譯小程序，如圖1.13所示。圖1.13代碼編寫（3）在代碼編寫過程中，開發(fā)工具提供自動(dòng)補(bǔ)全功能。在編輯js文件時(shí)，開發(fā)工具會(huì)幫助開發(fā)者補(bǔ)全所有的API，并給出相關(guān)的注釋解釋；編輯wxml文件時(shí)，會(huì)幫助開發(fā)者直接寫出相關(guān)的標(biāo)簽；編輯json文件時(shí)，會(huì)幫助開發(fā)者補(bǔ)全相關(guān)的配置，并給出實(shí)時(shí)的提示，如圖1.14所示。圖1.14自動(dòng)補(bǔ)全功能（4）開發(fā)工具提供自動(dòng)保存功能，書寫代碼后，工具會(huì)自動(dòng)幫助用

14、戶保存當(dāng)前的代碼編輯狀態(tài)，直接關(guān)閉工具或者切換到別的項(xiàng)目，并不會(huì)丟失已經(jīng)編輯的文件內(nèi)容，但需要注意的是，只有保存文件，修改內(nèi)容才會(huì)真實(shí)地寫到硬盤上，并觸發(fā)實(shí)時(shí)預(yù)覽。 小程序的常用調(diào)試工具有：Console、Sources、Network、Storage、AppData、Wxml。 除了這6個(gè)調(diào)試選項(xiàng)外，還有一些不常用的工具：Application為記錄加載的資源信息，Security為安全和認(rèn)證，Audits為性能診斷和優(yōu)化建議，Sensor用來選擇模擬地理位置，Trace為性能監(jiān)測(cè)數(shù)據(jù)，在這里不做詳細(xì)介紹。1.3.5調(diào)試器區(qū)域（1）Console窗口用來顯示小程序的錯(cuò)誤輸出信息和調(diào)試代碼，除

15、了可以輸出錯(cuò)誤信息，還可以進(jìn)行代碼編寫和調(diào)試，如圖1.15所示。圖1.15Console功能（2）Sources窗口用于顯示當(dāng)前項(xiàng)目的腳本文件，在Sources中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在define函數(shù)中，并且對(duì)于Page代碼，有require的主動(dòng)調(diào)用，如圖1.16所示。圖1.16Sources功能（3）Network用來觀察發(fā)送的請(qǐng)求和調(diào)用文件的信息，包括文件名稱、路徑、大小、調(diào)用的狀態(tài)、時(shí)間等，如圖1.17所示。圖1.17Network功能（4）Storage窗口用于顯示當(dāng)前項(xiàng)目，使用wx.setStorage或者wx.setStorageSyn

16、c后的數(shù)據(jù)存儲(chǔ)情況，如圖1.18所示。圖1.18Storage功能（5）AppData窗口用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻的具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況。用戶可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖1.19所示。圖1.19AppData功能（6）Wxml窗口用于幫助開發(fā)者開發(fā)Wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的wxss屬性，同時(shí)可以修改對(duì)應(yīng)的wxss屬性，如圖1.20所示。圖1.20Wxml功能1編譯操作 我們可以通過編譯按鈕或者使用快捷鍵Ctrl+B編譯當(dāng)前小程序的代碼，并自動(dòng)刷新模擬器。 為了方便調(diào)試，開發(fā)者還可以添加或選擇已有的自定義編譯條件進(jìn)行編譯和代碼預(yù)

17、覽，如圖1.21所示。1.3.6工具欄區(qū)域圖1.21編譯2預(yù)覽 單擊預(yù)覽按鈕，可以將小程序上傳，生成二維碼，通過掃描二維碼可以在手機(jī)上預(yù)覽小程序，如圖1.22所示。圖1.22預(yù)覽（本圖中二維碼只是示意，請(qǐng)掃描自己操作生成的二維碼）3前后臺(tái)切換 工具欄中的前后臺(tái)切換按鈕可以幫助開發(fā)者模擬一些客戶端的操作環(huán)境。例如，在操作微信小程序過程中，突然進(jìn)來電話，如果接電話，小程序就會(huì)從前臺(tái)進(jìn)入到后臺(tái)，重新訪問小程序時(shí)，又會(huì)從后臺(tái)進(jìn)入到前臺(tái)，如圖1.23所示。圖1.23前后臺(tái)切換4清緩存 清緩存包括清除數(shù)據(jù)緩存、清除文件緩存、清除授權(quán)數(shù)據(jù)、清除網(wǎng)絡(luò)緩存、清除登錄狀態(tài)、全部清除功能，如圖1.24所示。圖1.2

18、4清緩存5上傳、測(cè)試 小程序開發(fā)完成后，需要上傳到騰訊服務(wù)器進(jìn)行測(cè)試，然后可以獲取測(cè)試報(bào)告，根據(jù)測(cè)試報(bào)告進(jìn)行相應(yīng)的修改，如圖1.25、圖1.26所示。圖1.25上傳圖1.26測(cè)試報(bào)告申請(qǐng)1格式調(diào)整快捷鍵Ctrl+S：保存文件。Ctrl+，Ctrl+：代碼行縮進(jìn)。Ctrl+Shift+，Ctrl+Shift+：折疊打開代碼塊。Ctrl+C，Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行。Shift+Alt+F：代碼格式化。1.3.7常用快捷鍵Alt+Up，Alt+Down：上下移動(dòng)一行。Shift+Alt+Up，Shift+Alt+Down：向上向下復(fù)制一行。Ctrl+Shift+E

19、nter：在當(dāng)前行上方插入一行。Ctrl+Shift+F：全局搜索。Ctrl+B：可以編譯當(dāng)前代碼，并自動(dòng)刷新模擬器。2光標(biāo)相關(guān)快捷鍵Ctrl+End：移動(dòng)到文件結(jié)尾。Ctrl+Home：移動(dòng)到文件開頭。Ctrl+I：選中當(dāng)前行。Shift+End：選擇從光標(biāo)到行尾。Shift+Home：選擇從行首到光標(biāo)處。Ctrl+Shift+L：選中所有匹配。Ctrl+D：選中匹配。Ctrl+U：光標(biāo)回退。3界面相關(guān)快捷鍵Ctrl+：隱藏側(cè)邊欄。Ctrl+M：打開或者隱藏模擬器。 在創(chuàng)建項(xiàng)目之后，開發(fā)工具會(huì)添加默認(rèn)的目錄和頁面，在默認(rèn)的頁面上，可以看到有“Hello World”文字，如圖1.27所示。1

20、.4沙場(chǎng)大練兵：Hello World的創(chuàng)建圖1.27Hello World界面 下面，我們分析一下Hello World是怎么創(chuàng)建出來的。（1）在pages/index/index.js文件里，Page的data中提供數(shù)據(jù)源motto，data的數(shù)據(jù)可以動(dòng)態(tài)地綁定到WXML頁面中，如圖1.28所示。圖1.28motto數(shù)據(jù)源（2）在pages/index/index.wxml文件里，通過雙大括號(hào)（）的方式，將motto綁定到頁面里，motto對(duì)應(yīng)的值就可以在頁面里顯示出來，如圖1.29所示。圖1.29綁定motto（3）在pages/index/index.wxss文件里，通過class的方

21、式給Hello World添加樣式，距頂部的高度200px，如圖1.30所示。圖1.30添加樣式 本章內(nèi)容主要認(rèn)識(shí)微信小程序和開發(fā)工具的使用，重點(diǎn)掌握以下內(nèi)容。（1）做好微信小程序開發(fā)的準(zhǔn)備工作，包括基礎(chǔ)技術(shù)準(zhǔn)備和開發(fā)賬號(hào)、文檔、開發(fā)工具的準(zhǔn)備。（2）學(xué)會(huì)微信小程序開發(fā)工具的使用，會(huì)添加項(xiàng)目、編輯代碼、調(diào)試代碼等。（3）記住微信小程序常用的一些快捷鍵，以提高開發(fā)效率。（4）理解微信小程序的開發(fā)流程。1.5小結(jié)微信小程序開發(fā)圖解案例教程微信小程序目錄結(jié)構(gòu)介紹 微信小程序注冊(cè)程序應(yīng)用 微信小程序注冊(cè)頁面的使用 微信小程序如何綁定數(shù)據(jù) 微信小程序條件渲染 微信小程序列表渲染 微信小程序定義模板 微信

22、小程序的引用功能 WXS小程序腳本語言 沙場(chǎng)大練兵：仿香哈菜譜微信小程序 小結(jié) 第2章 微信小程序框架分析 微信小程序目錄結(jié)構(gòu)可以分為3個(gè)部分框架全局文件、工具類文件和框架頁面文件，如圖2.1所示。2.1微信小程序目錄結(jié)構(gòu)介紹圖2.1微信小程序框架目錄 框架全局文件必須放在項(xiàng)目的根目錄中。框架全局文件包括4個(gè)文件：app.js小程序邏輯文件（定義全局?jǐn)?shù)據(jù)以及定義函數(shù)文件）、app.json小程序公共設(shè)置文件、app.wxss小程序公共樣式表、project.config.json小程序項(xiàng)目個(gè)性化配置文件。它們對(duì)所有頁面都有效，如表2.1所示。2.1.1框架全局文件表2.1框架全局文件1app.

23、js小程序邏輯文件 app.js文件用來定義全局?jǐn)?shù)據(jù)和函數(shù)的使用，它可以指定微信小程序的生命周期函數(shù)。 生命周期函數(shù)可以理解為微信小程序自己定義的函數(shù)，例如onLaunch（監(jiān)聽小程序初始化）、onShow（監(jiān)聽小程序顯示）、onHide（監(jiān)聽小程序隱藏）等，在不同階段不同場(chǎng)景可以使用不同的生命周期函數(shù)。此外，app.js中還可以定義一些全局的函數(shù)和數(shù)據(jù)，其他頁面引用app.js文件后就可以直接使用，如圖2.2所示。圖2.2app.js小程序邏輯2app.json小程序公共設(shè)置文件 app.json文件可以對(duì)5個(gè)功能進(jìn)行設(shè)置：配置頁面路徑、配置窗口表現(xiàn)、配置標(biāo)簽導(dǎo)航、配置網(wǎng)絡(luò)超時(shí)、配置debu

24、g模式。具體如圖2.3所示。圖2.3app.json的5個(gè)功能（1）配置頁面路徑。頁面路徑定義了一個(gè)數(shù)組，存放多個(gè)頁面的訪問路徑，它是進(jìn)行頁面訪問的必要條件。如果在這里沒有配置頁面訪問路徑，頁面被訪問時(shí)就會(huì)報(bào)錯(cuò)；在這里定義了頁面訪問路徑，微信小程序框架就可以在頁面文件夾下建立相應(yīng)名稱的文件夾以及文件，免去用戶手動(dòng)添加文件夾和文件的痛苦，如圖2.4所示。圖2.4自動(dòng)創(chuàng)建頁面（2）配置窗口表現(xiàn)。如圖2.5所示。圖2.5窗口表現(xiàn)（3）配置標(biāo)簽導(dǎo)航。標(biāo)簽導(dǎo)航是很多移動(dòng)App都會(huì)采用的一種導(dǎo)航方式，微信小程序同樣可以實(shí)現(xiàn)這樣的效果，如圖2.6所示。圖2.6貓眼電影App標(biāo)簽導(dǎo)航 怎么制作標(biāo)簽導(dǎo)航呢？我們

25、需要在app.json文件里配置tabBar屬性。 tabBar是一個(gè)對(duì)象，它可以配置標(biāo)簽導(dǎo)航文字的默認(rèn)顏色、選中顏色，標(biāo)簽導(dǎo)航背景色以及上邊框顏色。 上邊框顏色可以配置兩種顏色：black/white。 標(biāo)簽導(dǎo)航存放到list數(shù)組里面，list里的每個(gè)對(duì)象對(duì)應(yīng)一個(gè)標(biāo)簽導(dǎo)航，每個(gè)對(duì)象里可以配置標(biāo)簽導(dǎo)航的路徑、導(dǎo)航名稱、默認(rèn)圖標(biāo)以及選中圖標(biāo)，如圖2.7所示。圖2.7貓眼電影微信小程序標(biāo)簽導(dǎo)航配置（4）配置網(wǎng)絡(luò)超時(shí)?？梢耘渲镁W(wǎng)絡(luò)請(qǐng)求、文件上傳、文件下載時(shí)最大的請(qǐng)求時(shí)間，超過這個(gè)時(shí)間，則不再請(qǐng)求。（5）配置debug模式。配置debug模式可方便微信小程序開發(fā)者調(diào)試開發(fā)程序，如圖2.8和圖2.9所示

26、為沒有開啟debug模式和開啟debug模式的調(diào)試信息對(duì)比。圖2.8沒有開啟debug模式圖2.9開啟debug模式 從圖2.8和圖2.9可以看出，開啟debug模式后，可以看到每一步的調(diào)用情況、訪問路徑以及錯(cuò)誤信息，這樣更加方便開發(fā)者進(jìn)行調(diào)試工作。 App.json作為全局配置文件就是提供配置頁面路徑、配置窗口的表現(xiàn)、配置底部標(biāo)簽導(dǎo)航、配置網(wǎng)絡(luò)連接超時(shí)、配置debug模式這些功能，配置也比較容易。3app.wxss小程序公共樣式表 app.wxss文件對(duì)CSS樣式進(jìn)行了擴(kuò)展，和CSS的使用方式一樣，類選擇器和行內(nèi)樣式的寫法兼容大部分CSS樣式，有一些CSS樣式在這里是不起作用的。app.wx

27、ss還形成了自己的風(fēng)格，是對(duì)所有頁面定義的一個(gè)全局樣式。 只要頁面有全局樣式里的class，就可以渲染全局樣式里的效果；但如果頁面又重新定義了這個(gè)class樣式，則會(huì)把全局的覆蓋掉，使用自己的樣式，如圖2.10所示。圖2.10小程序公共樣式表4project.config.json小程序項(xiàng)目個(gè)性化配置文件 在使用微信小程序開發(fā)者工具時(shí)，開發(fā)者都會(huì)針對(duì)各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等。當(dāng)換了另外一臺(tái)計(jì)算機(jī)重新安裝工具的時(shí)候，用戶還要重新配置。因此，小程序開發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè)project.config.json文件，用戶在工具上做的任何配置都會(huì)寫入這個(gè)文件。

28、 重新安裝工具或者換計(jì)算機(jī)工作時(shí)，用戶只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就會(huì)自動(dòng)恢復(fù)到當(dāng)時(shí)開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等一系列選項(xiàng)。 在微信小程序框架目錄里有一個(gè)utils文件夾，它用來存放工具欄的js函數(shù)，例如可以放置一些日期格式化的函數(shù)、時(shí)間格式化的函數(shù)等一些常用的函數(shù)。 定義完這些函數(shù)后，要通過module.exports將定義的函數(shù)名稱注冊(cè)進(jìn)來，在其他的頁面才可以使用，圖2.11所示為時(shí)間格式化工具類文件。2.1.2工具類文件圖2.11utils.js工具類文件 一個(gè)小程序框架頁面文件由5個(gè)文件組成，分別是js頁面邏輯、json頁面配置、wxml

29、頁面結(jié)構(gòu)、wxs小程序腳本語言、wxss頁面樣式表，如表2.2所示。2.1.3框架頁面文件表2.2框架頁面文件 微信小程序的框架頁面文件，都放置在pages文件夾下面，如圖2.12所示。圖2.12頁面文件 每個(gè)頁面都有一個(gè)獨(dú)立的文件夾，比如日志頁面logs文件夾，它的下面放置5個(gè)文件：logs.js進(jìn)行業(yè)務(wù)路徑處理；logs.json進(jìn)行頁面配置，可以覆蓋全局App.json配置；logs.wxml配置頁面結(jié)構(gòu)，負(fù)責(zé)渲染頁面；WXS（WeiXin?Script）是小程序的一套腳本語言，logs.wxs結(jié)合wxml文件，可以構(gòu)建出頁面的結(jié)構(gòu)；logs.wxss是針對(duì)logs.wxml頁面的樣式文

30、件。 貓眼電影底部標(biāo)簽導(dǎo)航有4個(gè)標(biāo)簽：電影、影院、發(fā)現(xiàn)、我的，如圖2.13所示。2.1.4小試牛刀：制作貓眼電影底部標(biāo)簽導(dǎo)航圖2.13貓眼電影底部標(biāo)簽導(dǎo)航（1）新建一個(gè)movie項(xiàng)目，如圖2.14所示。圖2.14添加項(xiàng)目（2）將準(zhǔn)備好的底部標(biāo)簽導(dǎo)航圖標(biāo)拷貝到movie項(xiàng)目下面。（3）打開App.json配置文件，在pages數(shù)組里添加4個(gè)頁面路徑電影“pages/movie/movie”、影院“pages/cinema/cinema”、發(fā)現(xiàn)“pages/find/find”、我的“pages/me/me”，保存后會(huì)自動(dòng)生成相應(yīng)的頁面文件夾；刪除“pages/index/index”“pages

31、/logs/logs”頁面路徑以及對(duì)應(yīng)的文件夾，如圖2.15所示。圖2.15配置頁面路徑（4）在window數(shù)組里配置窗口導(dǎo)航背景顏色為紅色（#D53E37），導(dǎo)航欄文字為電影，字體顏色設(shè)置為白色（white），具體配置如圖2.16所示。圖2.16窗口及導(dǎo)航欄配置（5）在tabBar對(duì)象里配置底部標(biāo)簽導(dǎo)航背景色為灰色（#f5f5f5），文字默認(rèn)顏色為白色（white），文字選中時(shí)為紅色（#D53E37），在list數(shù)組里配置底部標(biāo)簽導(dǎo)航對(duì)應(yīng)的頁面、導(dǎo)航名稱、默認(rèn)時(shí)圖標(biāo)、選中時(shí)圖標(biāo)，具體配置如圖2.17所示。圖2.17底部標(biāo)簽導(dǎo)航配置 這樣就完成了貓眼電影底部標(biāo)簽導(dǎo)航的配置，單擊不同的導(dǎo)航標(biāo)簽，

32、可以切換顯示不同的頁面，同時(shí)導(dǎo)航圖標(biāo)和導(dǎo)航文字會(huì)呈現(xiàn)為選中狀態(tài)，如圖2.18所示。圖2.18電影界面 app.js文件不僅可以定義全局函數(shù)和數(shù)據(jù)，還可以注冊(cè)小程序。 在App()函數(shù)里可以完成小程序的注冊(cè)，并指定其生命周期函數(shù)。 表2.3所示為生命周期函數(shù)的定義。2.2微信小程序注冊(cè)程序應(yīng)用表2.3生命周期函數(shù)續(xù)表（1）onLaunch生命周期函數(shù)，用來監(jiān)聽小程序初始化，一旦初始化完成，就會(huì)觸發(fā)該函數(shù)，這個(gè)生命周期函數(shù)只會(huì)觸發(fā)一次。（2）onShow生命周期函數(shù)，用來監(jiān)聽小程序顯示，微信小程序有前后臺(tái)定義，當(dāng)用戶單擊左上角關(guān)閉、按Home鍵關(guān)閉或者突然來電話，微信小程序都沒有銷毀，而是進(jìn)入后臺(tái)

33、，當(dāng)再次進(jìn)入微信或者小程序的時(shí)候就會(huì)觸發(fā)onShow這個(gè)函數(shù)。只要程序啟動(dòng)或者從后臺(tái)進(jìn)入前臺(tái)都會(huì)觸發(fā)該函數(shù)。（3）onHide生命周期函數(shù)，用來監(jiān)聽小程序隱藏，一旦微信小程序從前臺(tái)進(jìn)入后臺(tái)，就會(huì)觸發(fā)該函數(shù)。（4）onError生命周期函數(shù)，用來監(jiān)聽小程序腳本或者API是否發(fā)生錯(cuò)誤，發(fā)生錯(cuò)誤時(shí)返回錯(cuò)誤信息。（5）onPageNotFound生命周期函數(shù)，當(dāng)要打開的頁面不存在時(shí)，會(huì)回調(diào)這個(gè)監(jiān)聽函數(shù)。 在每個(gè)頁面文件夾里，都有一個(gè)頁面對(duì)應(yīng)的js文件，比如日志logs文件夾，對(duì)應(yīng)的就是logs.js文件，這個(gè)文件里的Page()函數(shù)用來注冊(cè)頁面。 接受一個(gè)object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周

34、期函數(shù)、事件處理函數(shù)等頁面的所有業(yè)務(wù)邏輯處理都放在這個(gè)文件里。 object參數(shù)如表2.4所示。2.3微信小程序注冊(cè)頁面的使用表2.4object參數(shù)說明 data為頁面初始化數(shù)據(jù)，初始化數(shù)據(jù)將作為頁面的第一次渲染。 data將會(huì)以JSON的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串、數(shù)字、布爾值、對(duì)象或數(shù)組。 渲染界面可以通過WXML對(duì)數(shù)據(jù)進(jìn)行綁定。2.3.1頁面初始化數(shù)據(jù)示例代碼：mottoPage(data:motto:Hello World,userInfo:)（1）onLoad頁面加載：一個(gè)頁面只會(huì)調(diào)用一次，接收頁面參數(shù)可以獲取wx.navigateTo和

35、wx.redirectTo及中的query。（2）onShow頁面顯示：每次打開頁面都會(huì)調(diào)用一次。2.3.2生命周期函數(shù)（3）onReady頁面初次渲染完成：一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互，對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置。（4）onHide頁面隱藏：當(dāng)調(diào)用navigateTo或底部tab切換時(shí)調(diào)用。（5）onUnload頁面卸載：當(dāng)調(diào)用redirectTo或navigateBack的時(shí)候調(diào)用。（1）onPullDownRefresh下拉刷新：監(jiān)聽用戶下拉刷新事件，需要在config的window選項(xiàng)中開

36、啟enablePullDownRefresh。當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新。（2）onShareAppMessage用戶分享：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分享”按鈕，用戶點(diǎn)擊“分享”按鈕的時(shí)候會(huì)調(diào)用此函數(shù)，此事件需要返回一個(gè)Object參數(shù)，用于自定義分享內(nèi)容。 Object參數(shù)說明如表2.5所示。2.3.3頁面相關(guān)事件處理函數(shù)表2.5分享參數(shù) 微信小程序的頁面路由都是由微信小程序框架來管理的，框架以棧的形式維護(hù)了所有頁面。 棧作為一種數(shù)據(jù)結(jié)構(gòu)，是一種只能在一端進(jìn)行插入和刪除操作的特殊線性表。 它按照后進(jìn)先出的原則

37、存儲(chǔ)數(shù)據(jù)，先進(jìn)入的數(shù)據(jù)被壓入棧底，最后進(jìn)入的數(shù)據(jù)在棧頂，需要讀數(shù)據(jù)的時(shí)候從棧頂開始彈出數(shù)據(jù)（最后一個(gè)數(shù)據(jù)被第一個(gè)讀出來）。2.3.4頁面路由管理 微信小程序頁面交互也是通過棧來完成的，微信小程序初始化時(shí)，新頁面入棧；打開新頁面時(shí)，新頁面入棧；頁面重定向時(shí)，當(dāng)前頁面出棧，新頁面入棧；頁面返回時(shí)，頁面不斷出棧，直到新頁面入棧；tab切換時(shí)，頁面全部出棧，只留下新的tab頁面；重新加載時(shí)，頁面全部出棧，只留下新的頁面。 對(duì)于路由的觸發(fā)方式以及頁面生命周期函數(shù)如表2.6所示。表2.6路由的觸發(fā)方式及頁面生命周期函數(shù) 除了初始化數(shù)據(jù)和生命周期函數(shù)，Page?中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。 在

38、渲染層的組件中可以加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行Page中定義的事件處理函數(shù)。2.3.5自定義函數(shù) Ptotype.setData()設(shè)值函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的this.data的值。 setData()參數(shù)格式：接受一個(gè)對(duì)象，以key，value的形式表示將this.data中的key對(duì)應(yīng)的值改變成value。 其中key非常靈活，以數(shù)據(jù)路徑的形式給出，如array2.message，a.b.c.d，并且不需要在this.data中預(yù)先定義。2.3.6setData設(shè)值函數(shù) WXML頁面里的動(dòng)態(tài)數(shù)據(jù)，都是來自js文件Page的data，數(shù)據(jù)綁定就是通過雙

39、大括號(hào)（）將變量包起來，在WXML頁面里將數(shù)據(jù)值顯示出來。2.4微信小程序如何綁定數(shù)據(jù)示例代碼如下：index.wxmlmessageindex.jsPage(data:message:Hello MINA!) 組件屬性綁定，是將data里的數(shù)據(jù)綁定到微信小程序的組件上，示例代碼如下：Page(data:id:0)2.4.1組件屬性綁定 控制屬性綁定用來進(jìn)行if語句條件判斷，如果滿足條件，則執(zhí)行，否則不執(zhí)行，示例代碼如下：Page(data:condition:true)2.4.2控制屬性綁定 關(guān)鍵字綁定常用于組件的一些關(guān)鍵字，像復(fù)選框組件一樣，checked關(guān)鍵字如果等于true，則代表復(fù)選

40、框選中；如果等于false，則代表不選中復(fù)選框，示例代碼如下： 不要直接寫checked=false，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后代表真值。2.4.3關(guān)鍵字綁定 可以在內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，小程序支持以下幾種方式進(jìn)行運(yùn)算：1三元運(yùn)算Hidden2.4.4運(yùn)算2數(shù)學(xué)運(yùn)算a+b+c+dPage(data:a:1,b:2,c:3)view中的內(nèi)容為3+3+d。3邏輯判斷54字符串運(yùn)算hello+namePage(data:name:MINA)5數(shù)據(jù)路徑運(yùn)算object.keyarray0Page(data:object:key:Hello,array:MINA) 天氣微信小程序，用來

41、顯示溫度、最低溫度、最高溫度以及其他天氣情況，下面通過數(shù)據(jù)綁定的方式，來顯示天氣情況，如圖2.19所示。2.4.5小試牛刀：天氣微信小程序圖2.19天氣微信小程序（1）創(chuàng)建一個(gè)weather項(xiàng)目，如圖2.20所示。圖2.20weather項(xiàng)目（2）進(jìn)入index.wxml、index.js、index.wxss文件，清空所有的內(nèi)容，進(jìn)入App.json，修改導(dǎo)航欄標(biāo)題為“中國(guó)天氣網(wǎng)”。（3）進(jìn)入index.wxml，進(jìn)行當(dāng)天天氣情況的界面布局，包括溫度、最低溫度和最高溫度、天氣情況、城市、星期、風(fēng)向情況，代碼如下：（4）進(jìn)入index.js，在data里提供天氣的數(shù)據(jù)，讓這些數(shù)據(jù)在界面里顯示出

42、來，代碼如下：Page(data:temp:4,low:-1,high:10,type:晴,city:北京,week:星期二,weather:無持續(xù)風(fēng)向微風(fēng)級(jí))（5）進(jìn)入index.wxml，將data里提供的天氣數(shù)據(jù)綁定到頁面里，代碼如下：templow/hightypecityweekweather 界面效果如圖2.21所示。圖2.21天氣界面（6）進(jìn)入index.wxss，為index.wxml添加樣式，美化頁面。 添加樣式后界面效果如圖2.22所示。圖2.22添加樣式2.5.1wx:if判斷單個(gè)組件 在微信小程序框架里，使用wx:if=condition來判斷是否需要渲染該代碼塊，示例

43、代碼如下：True使用wx:elif和wx:else來添加一個(gè)else塊：512232.5微信小程序條件渲染 wx:if是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。但是如果我們想一次性判斷多個(gè)組件標(biāo)簽，就可以使用一個(gè)標(biāo)簽將多個(gè)組件包裝起來，并在上面使用wx:if控制屬性，示例代碼如下：view1view2 不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性。2.5.2block wx:if 判斷多個(gè)組件2.6.1wx:for 列表渲染單個(gè)組件 在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。 數(shù)組當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)

44、組當(dāng)前項(xiàng)的變量名默認(rèn)為item。2.6微信小程序列表渲染 wx:for應(yīng)用在某一個(gè)組件上，如果想渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊，這時(shí)wx:for需要應(yīng)用在標(biāo)簽上，示例代碼如下：index:item2.6.2block wx:for 列表渲染多個(gè)組件 如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如中的輸入內(nèi)容，的選中狀態(tài)），需要使用wx:key來指定列表中項(xiàng)目的唯一標(biāo)識(shí)符。 wx:key的值以以下兩種形式提供。2.6.3wx:key 指定唯一標(biāo)識(shí)符（1）字符串：代表在for循環(huán)的array中item的某個(gè)property，該property的值

45、需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。（2）保留關(guān)鍵字：*this代表在for循環(huán)中的item本身，這種表示需要item本身是一個(gè)唯一的字符串或者數(shù)字，當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有key的組件，框架會(huì)確保它們被重新排序，而不是重新創(chuàng)建，以確保組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。 WXML提供模板（template）功能，可以把一些共用的、復(fù)用的代碼，在模板中定義代碼片段，然后在不同的地方調(diào)用，以達(dá)到一次編寫，多次直接使用的效果。2.7微信小程序定義模板 在內(nèi)定義代碼片段，使用name屬性，作為模板的名字，示例代碼如下：index:msgTime:time2

46、.7.1定義模板 在WXML文件里，使用is屬性，聲明需要使用的模板，然后將模板所需要的data傳入，示例代碼如下：Page(data:item:index:0,msg:this is a template,time:2018-06-13)2.7.2使用模板 WXML提供兩種文件引用方式：import和include。 兩者的區(qū)別在于：import引用模板文件，include將引用整個(gè)除了文件。2.8微信小程序的引用功能2.8.1import引用 import可以在該文件中使用目標(biāo)文件定義的template。2.8.2include引用 include可以將目標(biāo)文件除了的整個(gè)代碼引入，相當(dāng)于是

47、復(fù)制到include位置。 WXS（WeiXin?Script）是小程序的一套腳本語言，結(jié)合WXML頁面文件，可以構(gòu)建出頁面的結(jié)構(gòu)。它是把原來放在js文件里進(jìn)行處理的邏輯，直接放在WXML頁面文件里進(jìn)行處理。 它有兩種使用方式：一種是將WXS腳本語言嵌入到WXML頁面文件里，在wxml文件中的標(biāo)簽內(nèi)來處理相關(guān)邏輯；另一種是以.wxs后綴結(jié)尾的文件獨(dú)立存在，然后再引入到WXML頁面文件里使用。2.9WXS小程序腳本語言第一種方式：var msg=hello world;module.exports.message=msg;m1.message第二種方式： 在指定的項(xiàng)目目錄上單擊鼠標(biāo)右鍵可以創(chuàng)建.

48、wxs文件，如圖2.23所示。圖2.23創(chuàng)建.wxs腳本語言文件 WXS小程序腳本語言是以模塊化的形式存在的，是一個(gè)單獨(dú)的模塊。在一個(gè)模塊里面定義的變量與函數(shù)，默認(rèn)為私有的，對(duì)其他模塊不可見；一個(gè)模塊要想對(duì)外暴露其內(nèi)部的私有變量與函數(shù)，只能通過module.exports實(shí)現(xiàn)。 在.wxs模塊中引用其他wxs文件模塊，可以使用require函數(shù)。 在wxs文件里只能引用.wxs文件模塊，且必須使用相對(duì)路徑。wxs模塊均為單例，多個(gè)頁面、多個(gè)地方、多次引用，使用的都是同一個(gè)wxs模塊對(duì)象。如果一個(gè)wxs模塊在定義之后，一直沒有被引用，則該模塊不會(huì)被解析與運(yùn)行。2.9.1模塊化1變量使用 WXS中

49、的變量均為值的引用，如果只聲明變量而不賦值，則默認(rèn)值為undefined。 變量名命名規(guī)則：（1）首字符必須是字母（a-z，A-Z）、下畫線（_）；（2）剩余字符可以是字母（a-z，A-Z）、下畫線（_）、數(shù)字（0-9）；2.9.2變量與數(shù)據(jù)類型（3）保留標(biāo)識(shí)符不能作為變量名，如delete、void、typeof、null、undefined、NaN、Infinity、var、if、else、true、false、require、this、function、arguments、return、for、while、do、break、continue、switch、case、default。2數(shù)據(jù)

50、類型 WXS支持的數(shù)據(jù)類型有：number數(shù)值類型、string字符串類型、boolean布爾值類型、object對(duì)象類型、function函數(shù)類型、array數(shù)組類型、date日期類型、regexp正則類型。（1）number數(shù)值類型。 number包括兩種數(shù)值：整數(shù)、小數(shù)。（2）string字符串類型。 string有兩種寫法：hello world;“hello world”;（3）boolean布爾值類型。 布爾值只有兩個(gè)特定的值：true和false。（4）object對(duì)象類型。 object是一種無序的鍵值對(duì)。（5）function函數(shù)類型。（6）array數(shù)組類型。（7）date

51、日期類型。 生成date對(duì)象需要使用getDate函數(shù),返回一個(gè)當(dāng)前時(shí)間的對(duì)象。（8）regexp正則類型。 生成regexp對(duì)象需要使用getRegExp函數(shù)。 WXS注釋有3種方式：?jiǎn)涡凶⑨?、多行注釋、結(jié)尾注釋。2.9.3注釋 WXS里，可以使用if條件語句、switch條件語句、for循環(huán)語句和while循環(huán)語句。1if條件語句 在WXS中，可以使用以下格式的if語句：if.else if.else statement N。通過該句型，可以在statement1statement N之間選其中一個(gè)執(zhí)行。2.9.4語句2switch條件語句 switch語句根據(jù)表達(dá)式的值與case變量值做

52、比較，哪個(gè)case變量值與表達(dá)式值相等就執(zhí)行哪個(gè)case語句。 default分支可以省略不寫，case關(guān)鍵詞后面只能使用變量、數(shù)字或字符串。 如果不寫break結(jié)束語句，程序就會(huì)向下繼續(xù)執(zhí)行其他滿足條件的case語句。3for循環(huán)語句 for循環(huán)語句，用來遍歷集合，支持使用break、continue關(guān)鍵詞。4while 循環(huán)語句 示例語法：while(表達(dá)式)代碼塊;do?代碼塊;while(表達(dá)式) 當(dāng)表達(dá)式為true時(shí)，循環(huán)執(zhí)行語句或代碼塊。 支持使用break、continue關(guān)鍵詞。 香哈菜譜是圍繞美食而做的一款小程序，在這里可以查看各式各樣的菜譜。 對(duì)于菜譜類App軟件，用戶使用

53、的頻率不高。 當(dāng)碰到不會(huì)做的菜式或者想做一些新的菜式時(shí)，用戶才會(huì)去App軟件查看，而微信小程序就可以滿足這種低頻率使用的場(chǎng)景，如圖2.24、圖2.25所示。2.10沙場(chǎng)大練兵：仿香哈菜譜微信小程序圖2.24學(xué)做菜 圖2.25頭條 仿香哈菜譜微信小程序，底部有5個(gè)導(dǎo)航標(biāo)簽：學(xué)做菜、頭條、美食圈、消息、我的。 標(biāo)簽導(dǎo)航選中時(shí)，導(dǎo)航圖標(biāo)會(huì)變?yōu)榧t色，導(dǎo)航文字也會(huì)變?yōu)榧t色，如圖2.26所示。2.10.1底部標(biāo)簽導(dǎo)航設(shè)計(jì)圖2.26底部標(biāo)簽導(dǎo)航選中效果（1）新建一個(gè)香哈菜譜xhcp項(xiàng)目，如圖2.27所示。圖2.27添加項(xiàng)目（2）將準(zhǔn)備好的底部標(biāo)簽導(dǎo)航圖標(biāo)、美食輪播圖片、宮格導(dǎo)航圖標(biāo)、香哈頭條美食圖片復(fù)制到p

54、ages文件夾下。（3）打開app.json配置文件，在pages數(shù)組里添加5個(gè)頁面路徑“pages/ cook/cook”“pages/headline/headline”“pages/food/food”“pages/ message/message”“pages/me/me”，保存后會(huì)自動(dòng)生成相應(yīng)的頁面文件夾；刪除“pages/index/index”“pages/logs/logs”頁面路徑以及對(duì)應(yīng)的文件夾，如圖2.28所示。圖2.28配置頁面路徑（4）在window數(shù)組里配置窗口導(dǎo)航背景顏色為灰色（#494949），導(dǎo)航欄文字為“學(xué)做菜”，字體顏色設(shè)置為白色（#ffffff），具體配

55、置如圖2.29所示。圖2.29窗口及導(dǎo)航欄配置（5）在tabBar對(duì)象里配置底部標(biāo)簽導(dǎo)航背景色為白色（#ffffff），文字默認(rèn)顏色為灰色（#999999），選中時(shí)為紅色（#CC1004），在list數(shù)組里配置底部標(biāo)簽導(dǎo)航對(duì)應(yīng)的頁面、導(dǎo)航名稱、默認(rèn)時(shí)圖標(biāo)、選中時(shí)圖標(biāo)，具體配置如圖2.30所示。 這樣就完成了仿菜譜微信小程序的底部標(biāo)簽導(dǎo)航配置，單擊不同的導(dǎo)航標(biāo)簽，可以切換顯示不同的頁面，同時(shí)導(dǎo)航圖標(biāo)和導(dǎo)航文字會(huì)呈現(xiàn)為選中狀態(tài)，如圖2.31所示。圖2.30底部標(biāo)簽導(dǎo)航配置圖2.31學(xué)做菜界面 在學(xué)做菜這個(gè)界面里，有海報(bào)輪播的圖片（在微信小程序里有專門的swiper滑塊視圖組件實(shí)現(xiàn)這個(gè)效果，在3.1

56、.3節(jié)中會(huì)詳細(xì)講解），還有4個(gè)宮格導(dǎo)航：菜譜分類、視頻、美食養(yǎng)生和閃購，如圖2.32所示。2.10.2宮格導(dǎo)航設(shè)計(jì)圖2.32海報(bào)圖片和宮格導(dǎo)航（1）進(jìn)入到pages/cook/cook.wxml文件，先設(shè)計(jì)海報(bào)輪播區(qū)域，使用一張圖片來進(jìn)行布局，圖片的寬度設(shè)置為100%，高度設(shè)置為230px。 界面效果如圖2.33所示。圖2.33海報(bào)圖片（2）設(shè)計(jì)宮格導(dǎo)航，分為4個(gè)導(dǎo)航：菜譜分類、視頻、美食養(yǎng)生、閃購。每個(gè)導(dǎo)航對(duì)應(yīng)一個(gè)圖標(biāo)，在導(dǎo)航的下面是灰色的間隔線。（3）進(jìn)入到pages/cook/cook.wxss文件里，針對(duì)宮格導(dǎo)航，添加樣式。 界面效果如圖2.34所示。圖2.34宮格導(dǎo)航 微信小程序作為

57、客戶端，它的數(shù)據(jù)來源于服務(wù)端。 下面模擬一下服務(wù)端提供的香哈頭條列表的數(shù)據(jù)，有了數(shù)據(jù)，頁面才能動(dòng)態(tài)地進(jìn)行渲染。 進(jìn)入到pages/cook/cook.js文件里，添加initData函數(shù)，在data頁面初始化數(shù)據(jù)里添加array數(shù)組，然后將initData定義的數(shù)據(jù)通過setData設(shè)值函數(shù)賦值給array數(shù)組。2.10.3香哈頭條初始化數(shù)據(jù) 香哈頭條里有菜譜的圖片、美食名稱、分類、瀏覽數(shù)量以及評(píng)論數(shù)量，如圖2.35所示。2.10.4香哈頭條列表渲染及綁定數(shù)據(jù)圖2.35香哈頭條列表（1）進(jìn)入到pages/cook/cook.wxml文件里，進(jìn)行香哈頭條列表信息界面布局。 （2）進(jìn)入到pages

58、/cook/cook.wxss文件里，針對(duì)香哈頭條列表信息添加樣式。 界面效果如圖2.36所示。圖2.36香哈頭條列表界面效果（3）現(xiàn)在香哈頭條列表數(shù)據(jù)直接寫在界面里，下面通過數(shù)據(jù)綁定和wx:for循環(huán)的方式動(dòng)態(tài)加載數(shù)據(jù)。 界面效果如圖2.37所示。圖2.37香哈頭條列表展現(xiàn) 在完成香哈頭條列表展現(xiàn)時(shí)，首先進(jìn)行列表的界面布局，可以把數(shù)據(jù)寫在頁面里。 頁面布局完成后通過數(shù)據(jù)綁定的方式，將js里的data數(shù)據(jù)和WXML界面進(jìn)行綁定，達(dá)到一種動(dòng)態(tài)獲取數(shù)據(jù)的效果。 很多頁面都采用香哈頭條列表信息這樣的展現(xiàn)方式，因此就可以把它制作成模板，達(dá)到一次制作、多次使用的效果。（1）在pages添加一個(gè)templ

59、ate目錄，再添加一個(gè)template.wxml文件，在這個(gè)文件里制作一個(gè)香哈頭條列表的模板，模板名稱為cooks，將列表循環(huán)的內(nèi)容放置在這個(gè)文件里，如圖2.38所示。2.10.5香哈頭條模板引用圖2.38香哈頭條列表模板（2）將cooks模板引入到cook.wxml里，將列表信息展現(xiàn)出來。 界面效果如圖2.39所示。圖2.39香哈頭條模板使用 本章講解了微信小程序的框架，涉及很多內(nèi)容，應(yīng)重點(diǎn)掌握如下內(nèi)容：（1）了解微信小程序目錄結(jié)構(gòu)，理解框架全局文件、工具類文件、框架頁面文件的使用；（2）會(huì)配置窗口導(dǎo)航欄以及底部標(biāo)簽導(dǎo)航；（3）了解微信小程序注冊(cè)程序應(yīng)用以及生命周期函數(shù)的意義和使用；2.11

60、小結(jié)（4）掌握微信小程序注冊(cè)頁面的使用，包括頁面初始化數(shù)據(jù)、生命周期函數(shù)的使用、頁面相關(guān)事件處理函數(shù)的使用、頁面路由管理和setData設(shè)置函數(shù)的使用；（5）學(xué)會(huì)微信小程序如何綁定數(shù)據(jù)；（6）學(xué)會(huì)微信小程序條件判斷和列表渲染的使用；（7）學(xué)會(huì)微信小程序模板的定義和引用。微信小程序開發(fā)圖解案例教程視圖容器組件 基礎(chǔ)內(nèi)容組件 豐富的表單組件 導(dǎo)航組件 媒體組件 地圖組件 畫布組件 沙場(chǎng)大練兵：表單登錄注冊(cè)微信小程序 小結(jié) 第3章 用微信小程序組件構(gòu)建UI界面 視圖容器組件共有5種：view視圖容器、scroll-view可滾動(dòng)視圖區(qū)域、swiper滑塊視圖容器、movable-view可移動(dòng)視圖容