《微信小程序開發(fā)-從入門到項(xiàng)目實(shí)戰(zhàn)》高職全套教學(xué)課件

《微信小程序開發(fā)——從入門到項(xiàng)目實(shí)戰(zhàn)》01-初識(shí)微信小程序02-小程序開發(fā)準(zhǔn)備03-小程序框架04-基礎(chǔ)組件05-自定義組件06-API07-項(xiàng)目實(shí)戰(zhàn)全套可編輯PPT課件

第1章初識(shí)微信小程序《微信小程序開發(fā)——從入門到項(xiàng)目實(shí)戰(zhàn)》全套可編輯PPT課件

學(xué)習(xí)目標(biāo)|Target了解小程序誕生背景，發(fā)展歷程，以及小程序的超群的影響力理解小程序特點(diǎn)，懂得并利用微信小程序的優(yōu)勢(shì)領(lǐng)會(huì)小程序現(xiàn)狀，并學(xué)會(huì)運(yùn)用優(yōu)秀的集成開發(fā)環(huán)境熟悉小程序MINA框架，并明白MINA框架工作原理章節(jié)概述|Summary微信小程序簡(jiǎn)稱小程序（本書后面如無(wú)特別說(shuō)明，小程序均指微信小程序），英語(yǔ)名稱為MiniProgram。它最早由微信教父張小龍2016年1月11日提出。當(dāng)時(shí)微信已經(jīng)普及，很多傳統(tǒng)Web產(chǎn)品和業(yè)務(wù)都在向微信公眾號(hào)遷移，微信作為人口，可以降低用戶獲取成本和開發(fā)成本。但是當(dāng)時(shí)的微信公眾號(hào)、服務(wù)號(hào)都不能很好的滿足這種需求。微信內(nèi)部研究新的應(yīng)用形態(tài)，叫微信小程序。隨后2016年9月21日，微信小程序正式開啟內(nèi)測(cè)，2016年11月3日，微信小程序正式開發(fā)公測(cè)，2017年1月9日，張小龍?jiān)谖⑿殴_課上正式宣布微信小程序上線。

2017年12月28日，微信開放了著名小游戲——跳一跳，幾乎所有微信用戶都在“跳一跳”。目錄|Contents010203微信小程序誕生背景微信小程序特點(diǎn)微信小程序現(xiàn)狀04微信小程序MINA框架1.1小程序誕生背景2013年8月，百度全球開發(fā)者大會(huì)上百度首先提出了“輕應(yīng)用”的概念。1.1.1先驅(qū)者百度“輕應(yīng)用”

“輕應(yīng)用”的概念是誰(shuí)提出來(lái)的？1.1.1先驅(qū)者百度“輕應(yīng)用”什么是“輕應(yīng)用”？1.1.1先驅(qū)者百度“輕應(yīng)用”百度對(duì)輕應(yīng)用的描述為“百度輕應(yīng)用是無(wú)需下載、即搜即用的全功能應(yīng)用，既有媲美甚至超越NativeApp的用戶體驗(yàn)，又具備WebApp的可被檢索與智能分發(fā)的特征，可以有效解決優(yōu)質(zhì)應(yīng)用和服務(wù)與移動(dòng)用戶需求對(duì)接的問(wèn)題。”了解移動(dòng)互聯(lián)網(wǎng)界的背景，知道微信小程序出現(xiàn)的天時(shí)地利人和。1.1.2生逢其時(shí)的微信小程序“輕應(yīng)用”發(fā)布后3年，移動(dòng)互聯(lián)網(wǎng)界發(fā)生了什么變化呢？

1.1.2生逢其時(shí)的微信小程序01020405根據(jù)工信部的數(shù)據(jù)，2016年底僅3年時(shí)間，我國(guó)4G用戶數(shù)量已經(jīng)超過(guò)7億。出現(xiàn)了不限量套餐，間接使得4G智能手機(jī)的大范圍普及2013年微信APP用戶數(shù)為3.55億，而2016年微信APP用戶數(shù)則為7.68億。在多個(gè)移動(dòng)處理芯片廠商努力下，智能手機(jī)的芯片變量越來(lái)越強(qiáng)、且能耗越來(lái)越低。微信憑借其用戶粘性和搶紅包游戲，爭(zhēng)奪移動(dòng)支付的主導(dǎo)地位。4G網(wǎng)絡(luò)的全面普及4G資費(fèi)的親民微信超級(jí)APP智能手機(jī)性能的提升移動(dòng)支付的普及了解微信小程序之父——微信，明白微信小程序的優(yōu)勢(shì)1.1.3“富二代”微信小程序

為何稱“富二代”？1.1.3“富二代”微信小程序2016年，微信日均活躍用戶數(shù)量達(dá)7.68億，過(guò)半用戶日均使用時(shí)間達(dá)90分鐘，而且還有進(jìn)一步突破的趨勢(shì)。擁有如此群眾基礎(chǔ)的微信可謂宇宙第一APP，那么作為微信親兒子的微信小程序可謂不折不扣的富二代。小程序之父——微信“富二代”微信小程序從一出生就備受矚目。微信小程序具有眾多光環(huán)：使用微信團(tuán)隊(duì)開發(fā)的MINA框架（使用了MVVM模型）；可以使用騰訊云開發(fā)技術(shù)（英語(yǔ)全稱為TencentCloudBase，簡(jiǎn)稱TCB，包括云數(shù)據(jù)庫(kù)，云函數(shù)等功能）作為服務(wù)端；統(tǒng)一的WeUI用戶界面；微信登陸免鑒權(quán)。MINA框架“富二代”微信小程序1.2小程序特點(diǎn)熟練微信小程序特點(diǎn)，掌握小程序發(fā)展優(yōu)勢(shì)。1.2小程序特點(diǎn)

小程序特點(diǎn)有哪些？1.2小程序特點(diǎn)

特點(diǎn)1特點(diǎn)2特點(diǎn)3特點(diǎn)4微信小程序特點(diǎn)目前，微信小程序在食品、購(gòu)物、旅游、酒店、教育、生活、醫(yī)療、金融、公共服務(wù)等多個(gè)行業(yè)具有一定的影響力，對(duì)傳統(tǒng)應(yīng)用產(chǎn)生了很大的影響，迫使許多企業(yè)放棄“客戶至上”的理念，轉(zhuǎn)而將技術(shù)和資金投入到微信小程序中。在營(yíng)銷方面，微信小程序簡(jiǎn)化了推廣流程。覆蓋面廣自2017年1月9日微信小程序推出以來(lái)，官方公布的《個(gè)人/非個(gè)人主體小程序開放的服務(wù)類目》的條目越來(lái)越豐富。經(jīng)過(guò)兩年多的開發(fā)，小程序的用戶界面經(jīng)過(guò)多次調(diào)整，最終將主要類別項(xiàng)設(shè)置為2個(gè)。1.2小程序特點(diǎn)無(wú)需安裝和卸載微信小程序最大的特點(diǎn)就是可以即刻打開，用戶只需掃描商家二維碼即可以瀏覽網(wǎng)頁(yè)的形式使用，小程序可簡(jiǎn)化為手機(jī)桌面的快捷方式圖標(biāo)，而且不會(huì)像其他軟件一樣在后臺(tái)占用過(guò)多的內(nèi)存和流量。用戶還可以方便地使用小程序的分享功能，將小程序直接轉(zhuǎn)發(fā)給他人，因此越來(lái)越多的人開始接受這種新的程序使用方式。隨著小程序的大規(guī)模普及，未來(lái)幾年將有80%的應(yīng)用被取代。特點(diǎn)2特點(diǎn)1特點(diǎn)3特點(diǎn)4微信小程序特點(diǎn)1.2小程序特點(diǎn)生產(chǎn)和維護(hù)成本低對(duì)于很多大眾創(chuàng)業(yè)者和線下零售商來(lái)說(shuō)，選擇使用微信小程序進(jìn)行運(yùn)營(yíng)和推廣，可以大大減少資金投入。小程序后端服務(wù)器無(wú)需商家購(gòu)買自建，可節(jié)省運(yùn)維成本。在開發(fā)過(guò)程中，小程序類似于簡(jiǎn)易的網(wǎng)站開發(fā)。小程序官網(wǎng)上已經(jīng)有很多現(xiàn)成的模板，相比開發(fā)同款A(yù)PP可以節(jié)省不少成本。微信小程序主頁(yè)右上角有一個(gè)搜索按鈕，可以進(jìn)行高效推廣，讓所有微信用戶都可以搜索到自己感興趣的小程序。我們相信，隨著微信小程序的不斷發(fā)展，手機(jī)上安裝的應(yīng)用數(shù)量會(huì)越來(lái)越少，生活場(chǎng)景會(huì)越來(lái)越便捷。特點(diǎn)3特點(diǎn)2特點(diǎn)1特點(diǎn)4微信小程序特點(diǎn)1.2小程序特點(diǎn)特點(diǎn)4特點(diǎn)2特點(diǎn)1特點(diǎn)3微信小程序特點(diǎn)支持微信云開發(fā)技術(shù)。微信云開發(fā)是微信團(tuán)隊(duì)聯(lián)合騰訊云推出的專業(yè)的小程序開發(fā)服務(wù)。開發(fā)者可以使用云開發(fā)快速開發(fā)小程序、小游戲、公眾號(hào)網(wǎng)頁(yè)等，并且原生打通微信開放能力。開發(fā)者無(wú)需搭建服務(wù)器，只需使用平臺(tái)提供的各項(xiàng)能力，即可快速開發(fā)業(yè)務(wù)；免登錄、免鑒權(quán)調(diào)用微信開放服務(wù)，無(wú)需管理證書、簽名、秘鑰，直接調(diào)用微信API。復(fù)用微信私有協(xié)議及鏈路，保證業(yè)務(wù)安全性；統(tǒng)一開發(fā)多端應(yīng)用，支持環(huán)境共享，一個(gè)后端環(huán)境可開發(fā)多個(gè)小程序、公眾號(hào)、網(wǎng)頁(yè)等，便捷復(fù)用業(yè)務(wù)代碼與數(shù)據(jù)；按量計(jì)費(fèi)，成本更低，支持按量計(jì)費(fèi)模式，后端資源根據(jù)業(yè)務(wù)流量自動(dòng)擴(kuò)容，先使用后付費(fèi)，無(wú)需支付閑置成本。1.3小程序現(xiàn)狀1.3.1小程序發(fā)展現(xiàn)狀2021年1月19日微信公開課PRO在廣州開講主論壇現(xiàn)場(chǎng)，微信小程序負(fù)責(zé)人表示，微信小程序日均活躍用戶突破4億，人均使用小程序個(gè)數(shù)較2019年增長(zhǎng)25%，人均小程序交易金額較2019年增長(zhǎng)67%。微信小程序全年累計(jì)交易額同比增長(zhǎng)100%。而據(jù)騰訊2019年財(cái)報(bào)中，小程序8000億的全年交易額計(jì)算，2020年微信小程序的全年交易額約為1.6萬(wàn)億。具體應(yīng)用上，在政務(wù)民生領(lǐng)域，小程序健康碼累計(jì)服務(wù)用戶超過(guò)8億，累計(jì)展示碼量超200億次；社保繳費(fèi)小程序幫助1.59億人不出門在線完成參保。在商業(yè)化領(lǐng)域，到2020年底，全年累計(jì)有超過(guò)1億人次在購(gòu)物中心和百貨小程序購(gòu)物；借助小程序預(yù)售+線下自提等模式，累計(jì)超過(guò)3億用戶在微信內(nèi)購(gòu)買生鮮蔬果。在我國(guó)移動(dòng)互聯(lián)網(wǎng)已經(jīng)普及的情況下，移動(dòng)互聯(lián)網(wǎng)領(lǐng)域巨頭阿里系、騰訊系、頭條系內(nèi)卷嚴(yán)重，移動(dòng)App獲取新用戶成本越來(lái)越高。微信小程序獲得如此高速增強(qiáng)趨勢(shì)實(shí)屬難得。微信小程序——發(fā)展現(xiàn)狀1.3.2小程序開發(fā)現(xiàn)狀微信小程序——開發(fā)現(xiàn)狀（一）總體而言，微信小程序開發(fā)難度低、效率高，這主要得益于微信小程序開發(fā)團(tuán)隊(duì)全新設(shè)計(jì)的MINA框架。與傳統(tǒng)的原生AndroidApp開發(fā)相比，微信小程序開發(fā)可以使用主流Web前端開發(fā)框架的特性，完整的頁(yè)面視圖生命周期、數(shù)據(jù)綁定、條件渲染、列表渲染、響應(yīng)事件等。優(yōu)秀的集成開發(fā)環(huán)境。目前微信小程序官方開發(fā)工具是“微信開發(fā)者工具”，其界面如右圖1-1所示。該工具除了可以開發(fā)微信小程序外，還可以開發(fā)微信小游戲、公眾號(hào)網(wǎng)頁(yè)等。該工具整合了編輯器、模擬器、調(diào)試器、可視化、云開發(fā)等眾多模塊，同時(shí)支持真機(jī)調(diào)試。微信團(tuán)隊(duì)對(duì)開發(fā)工具進(jìn)行著長(zhǎng)期持續(xù)更新和維護(hù)，目前最新版本是1.05.2108150（2021.08.15更新），該工具的用戶體驗(yàn)較好，運(yùn)行流暢，從不崩潰，亦無(wú)Bug。1.3.2小程序開發(fā)現(xiàn)狀微信小程序——開發(fā)現(xiàn)狀（二）完善的技術(shù)文檔。除了優(yōu)秀的開發(fā)工具外，微信小程序的配套技術(shù)文檔也是非常齊全，可以說(shuō)《微信官方文檔·小程序》（又名“微信開放文檔”）就是微信小程序的百科全書，亦是優(yōu)秀的教程，如下圖1-2所示。該文檔不但系統(tǒng)的講解了微信小程序開發(fā)全部知識(shí)，而且提供了很多代碼示例，并且是代碼片段的形式，可以通過(guò)點(diǎn)擊鏈接跳轉(zhuǎn)到微信開發(fā)者工具直接將該代碼片段導(dǎo)入到微信開發(fā)工具中進(jìn)行運(yùn)行調(diào)試，開發(fā)者文檔代碼的導(dǎo)入如右圖1-3所示。1.3.2小程序開發(fā)現(xiàn)狀微信小程序——開發(fā)現(xiàn)狀（三）眾多框架支持。目前已經(jīng)有一些比較被廣泛使用的框架了，比如WeUI、WePY、Taro、mpvue等。其中WeUI是微信團(tuán)隊(duì)專門針對(duì)微信開發(fā)的樣式框架，讓開發(fā)者可以快速使用微信官方的推薦的UI風(fēng)格。WePY是小程序最早的框架之一，是一款讓小程序支持組件化開發(fā)的框架，通過(guò)預(yù)編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風(fēng)格去開發(fā)小程序?？蚣艿募?xì)節(jié)優(yōu)化，Promise，AsyncFunctions的引入都是為了能讓開發(fā)小程序項(xiàng)目變得更加簡(jiǎn)單，高效。Taro是一個(gè)開放式跨端跨框架解決方案，支持使用React/Vue/Nerv等框架來(lái)開發(fā)微信/京東/百度/支付寶/字節(jié)跳動(dòng)/QQ小程序/H5/RN等應(yīng)用。mpvue是美團(tuán)點(diǎn)評(píng)開源的一個(gè)使用Vue.js開發(fā)小程序的前端框架。框架基于Vue.js核心，mpvue修改了Vue.js的runtime和compiler實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套Vue.js開發(fā)體驗(yàn)。強(qiáng)大的微信開放社區(qū)。微信小程序社區(qū)非?；钴S，里面不但有眾多的開發(fā)者討論各種問(wèn)題，另外還有騰訊的官方工作人員參與，他們可以對(duì)各種“疑難雜癥”進(jìn)行診斷，必要的時(shí)候他們還會(huì)主動(dòng)向我們索取問(wèn)題代碼。1.4小程序MINA框架1.4小程序MINA框架MINA是騰訊給微信小程序框架的命名。MINA框架通過(guò)封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理、數(shù)據(jù)安全等基礎(chǔ)功能，對(duì)上層提供一整套JavaScriptAPI，讓開發(fā)者能夠非常方便地使用微信客戶端提供的各種基礎(chǔ)功能與能力，快速構(gòu)建一個(gè)應(yīng)用。小程序開發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP體驗(yàn)的服務(wù)。MINA不但性能優(yōu)異，而且開發(fā)簡(jiǎn)單，對(duì)開發(fā)人員極其友好，非常適合新手學(xué)習(xí)，深受廣大開發(fā)者喜愛(ài)。

什么是MINA框架？1.4.1MVVM模型簡(jiǎn)介MVVM是Model-View-ViewModel的縮寫。MVVM是一種架構(gòu)模式，是一種思想，是一種組織和管理代碼的藝術(shù)，而并非一種框架。它利用數(shù)據(jù)綁定、屬性依賴、路由事件、命令等特性實(shí)現(xiàn)高效靈活的架構(gòu)。MVVM源于著名的MVC(Model-View-Controller)模式，期間還演化出MVP(Model-View-Presenter)模式。MVVM的出現(xiàn)直接促進(jìn)了現(xiàn)代GUI前端開發(fā)和后端開發(fā)邏輯的分離，提高了前端開發(fā)效率。1.4.1MVVM模型簡(jiǎn)介MVVM框架的示意圖如右圖1-4所示，MVVM的核心是數(shù)據(jù)驅(qū)動(dòng)即ViewModel，ViewModel是View和Model的關(guān)系映射。在MVVM中View和Model是不可以直接進(jìn)行通信的，它們之間存在著ViewModel這個(gè)中介。ViewModel類似中轉(zhuǎn)站(ValueConverter)，負(fù)責(zé)轉(zhuǎn)換Model中的數(shù)據(jù)對(duì)象，使得數(shù)據(jù)變得更加易于管理和使用。MVVM本質(zhì)就是基于操作數(shù)據(jù)來(lái)操作視圖進(jìn)而操作DOM，借助于MVVM無(wú)需直接操作DOM，開發(fā)者只需完成包含聲明綁定的視圖模板，編寫ViewModel中有業(yè)務(wù)，使得View完全實(shí)現(xiàn)自動(dòng)化。當(dāng)用戶操作View，ViewModel感知到變化，然后通知Model發(fā)生相應(yīng)改變，反之亦然。ViewModel向上與視圖層View進(jìn)行雙向數(shù)據(jù)綁定，向下與Model通過(guò)接口請(qǐng)求進(jìn)行數(shù)據(jù)交互，起到承上啟下的作用。目前有主流Web前端框架都有MVVM模型的身影，Vue、React、Angular，甚至Android原生App開發(fā)中也出現(xiàn)了MVVM框架。原因很簡(jiǎn)單，就是MVVM可以大大提高開發(fā)效率。1.4.2小程序MINA框架簡(jiǎn)介其實(shí)MINA使用上述的MVVM架構(gòu)模式。MINA的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP體驗(yàn)的服務(wù)。MINA提供了自己的視圖層描述語(yǔ)言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。MINA的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。整個(gè)系統(tǒng)分為兩個(gè)部分，即視圖層(View)、邏輯層(AppService)，另外還有相關(guān)的Native層。view層對(duì)應(yīng)渲染層，model層對(duì)應(yīng)邏輯層，viewmodel層對(duì)應(yīng)Native層。1.4.2小程序MINA框架簡(jiǎn)介MINA框架的工作原理如右圖所示，邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。視圖層將邏輯層的數(shù)據(jù)反映成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。Native層主要做了兩件事情：數(shù)據(jù)綁定和事件監(jiān)聽。邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)。MINA框架為頁(yè)面組件提供了bindtap、bindtouchstart等事件監(jiān)聽相關(guān)的屬性，來(lái)與AppService中的事件處理函數(shù)綁定在一起，實(shí)現(xiàn)也面向AppService層同步用戶交互數(shù)據(jù)。MINA框架同時(shí)提供了很多方法將AppService中的數(shù)據(jù)與頁(yè)面進(jìn)行單向綁定，當(dāng)AppService中的數(shù)據(jù)變更時(shí)，會(huì)主動(dòng)觸發(fā)對(duì)應(yīng)頁(yè)面組件的重新渲染。MINA使用virtualdom技術(shù)，加快了頁(yè)面的渲染效率。第1章初識(shí)微信小程序（完結(jié)）第2章小程序開發(fā)準(zhǔn)備《微信小程序開發(fā)——從入門到項(xiàng)目實(shí)戰(zhàn)》學(xué)習(xí)目標(biāo)|Target成為微信開發(fā)者，擁有自己獨(dú)立的賬號(hào)，創(chuàng)造自己獨(dú)立的小程序下載及安裝微信開發(fā)者工具，新建自己的第一個(gè)小程序項(xiàng)目通過(guò)本章學(xué)習(xí)，能夠獨(dú)立編寫第一個(gè)“HelloWord”

掌握基本小程序基本概念，能夠熟練運(yùn)用小程序相關(guān)資料章節(jié)概述|Summary本章的終極目標(biāo)為引導(dǎo)大家完成小程序版的HelloWorld。HelloWorld中文意思是“你好，世界”。最早起源于《TheCProgrammingLanguage》中使用它做為第一個(gè)演示程序，非常著名，所以后來(lái)的程序員在學(xué)習(xí)編程或進(jìn)行設(shè)備調(diào)試時(shí)延續(xù)了這一習(xí)慣，HelloWorld的成功意味著開發(fā)環(huán)境準(zhǔn)備就緒，可以開始正式學(xué)習(xí)某種新技術(shù)了。相信很多小伙伴已經(jīng)按捺不住了，讓我們一起來(lái)快速完成微信小程序版的HelloWorld吧！目錄|Contents010203成為微信開發(fā)者微信開發(fā)者工具簡(jiǎn)介小程序HelloWorld目錄|Contents040506小程序基本概念小程序相關(guān)學(xué)習(xí)資料章節(jié)測(cè)試2.1成為微信開發(fā)者了解微信小程序開發(fā)工具，以及熟練運(yùn)用小程序相關(guān)資料。2.1成為微信開發(fā)者

勵(lì)志成為微信開發(fā)者！2.1成為微信開發(fā)者如何成為微信開發(fā)者？2.1成為微信開發(fā)者盡管學(xué)習(xí)微信小程序開發(fā)不是必須要去注冊(cè)小程序AppID（亦可使用測(cè)試號(hào)），但這里還是強(qiáng)烈推薦花點(diǎn)時(shí)間去注冊(cè)微信小程序賬號(hào)、獲取AppID，因?yàn)槲覀冮_發(fā)小程序的終極目的是正式上線使用。除此之外，具有正式AppID的微信小程序我們才有官方的小程序管理后臺(tái)，可以設(shè)置Logo、體驗(yàn)成員，具有一定免費(fèi)額度騰訊云開發(fā)資源，開發(fā)過(guò)程具有微信小程序的完整功能。搜索“微信公眾平臺(tái)”，注冊(cè)創(chuàng)建一個(gè)屬于自己的小程序2.1.1注冊(cè)小程序

先創(chuàng)建一個(gè)屬于自己的賬號(hào)！2.1.1注冊(cè)小程序01020405首先我們可以通過(guò)百度搜索引擎搜索“微信公眾平臺(tái)”，網(wǎng)址為“/”。微信公眾平臺(tái)是管理服務(wù)號(hào)、訂閱號(hào)、小程序、企業(yè)微信的地方。這里我們需要注冊(cè)一個(gè)微信小程序賬號(hào)，所以選擇“小程序”。然后我們就跳轉(zhuǎn)到了微信小程序的簡(jiǎn)要介紹頁(yè)面，網(wǎng)址為“/cgi-bin/wx?token=&lang=zh_CN”，主要介紹了開放注冊(cè)范圍、開發(fā)支持、接入流程等，并且都有相應(yīng)的跳轉(zhuǎn)鏈接。在接入流程部分，有“前往注冊(cè)”鏈接，這就是微信小程序的注冊(cè)入口了，網(wǎng)址為“/wxopen/waregister?action=step1”。注冊(cè)過(guò)程主要分為三個(gè)步驟，填寫賬號(hào)信息、郵箱激活、信息登記，其中信息登記包含用戶信息登記和主體信息登記。用戶需要提前準(zhǔn)備好的內(nèi)容有：電子郵箱（未曾注冊(cè)過(guò)微信公眾平臺(tái)）；主體信息（賬號(hào)所有人的姓名、身份證號(hào)碼）；最高管理員的電話號(hào)碼、微信。2.1.1注冊(cè)小程序賬號(hào)信息比較簡(jiǎn)單，需要輸入電子郵箱和密碼，如下圖2-1所示。2.1.1注冊(cè)小程序在賬號(hào)信息填寫完成后，微信團(tuán)隊(duì)會(huì)向該郵箱發(fā)送激活郵箱（如下圖2-2所示）。進(jìn)入郵箱激活環(huán)節(jié)，需要登錄該電子郵箱，查看微信團(tuán)隊(duì)發(fā)送的電子郵箱，點(diǎn)擊激活鏈接，完成賬號(hào)激活，如下圖2-3所示。2.1.1注冊(cè)小程序點(diǎn)擊激活鏈接后，就可以使用上面設(shè)置的用戶名和密碼登錄微信公眾平臺(tái)，繼續(xù)完成信息登記環(huán)節(jié)。該環(huán)節(jié)首先需要完成用戶信息登記，主要是確定賬號(hào)主體的類型及所有人信息，需要根據(jù)實(shí)際情況填寫，其中個(gè)人類型不能使用微信支付功能，如下圖2-4所示。2.1.1注冊(cè)小程序除了用戶信息之外，我們還需要完成主體信息登記，這個(gè)主體其實(shí)就是賬號(hào)使用人員，也即最高管理員，如下圖2-5所示。2.1.1注冊(cè)小程序需要特別強(qiáng)調(diào)的是，一個(gè)郵箱只能用于“服務(wù)號(hào)、訂閱號(hào)、小程序、企業(yè)微信”中的一種，而不能重復(fù)使用。正是確定的對(duì)應(yīng)關(guān)系，所以后面登錄微信公眾平臺(tái)的時(shí)候可以直接根據(jù)郵箱地址確定賬號(hào)類型，從而進(jìn)入相應(yīng)的管理頁(yè)面。另外對(duì)于個(gè)人類型，一個(gè)身份證號(hào)最多只能注冊(cè)5個(gè)微信小程序，一個(gè)微信用戶也只能作為5個(gè)微信小程序的管理員。2.1.2登錄微信公眾平臺(tái)登錄有兩種方式，既可以使用管理員微信掃碼登錄（注冊(cè)小程序，主體信息登記時(shí)設(shè)置的管理員微信），也可以使用賬號(hào)密碼登錄（注冊(cè)郵箱）。登錄后可以實(shí)現(xiàn)全部的管理功能，其中目前最緊迫的是獲取AppID（也叫小程序ID），因?yàn)槲覀冊(cè)谛陆üこ痰臅r(shí)候需要填寫。在微信公眾平臺(tái)里右側(cè)的管理菜單里依次選擇開發(fā)、開發(fā)管理、開發(fā)設(shè)置、開發(fā)者ID、AppID，如下圖2-6所示。這里強(qiáng)烈建議大家將AppID復(fù)制出來(lái)，以便后期使用的時(shí)候能更快的找到。2.2微信開發(fā)者工具簡(jiǎn)介2.2微信開發(fā)者工具簡(jiǎn)介微信開發(fā)者工具最開始時(shí)名字叫“微信web開發(fā)者工具”，起初的定位是公眾號(hào)網(wǎng)頁(yè)調(diào)試工具，隨著微信小程序的誕生，微信web開發(fā)者工具升級(jí)為微信開發(fā)者工具。其后發(fā)展幾乎完全是伴隨微信小程序的成長(zhǎng)過(guò)程，微信開發(fā)者工具默默為微信小程序提供了強(qiáng)大的支持，是微信小程序的堅(jiān)實(shí)后盾。雖然微信開發(fā)者工具主要是為微信小程序的開發(fā)服務(wù)，但是微信開發(fā)者工具的定位卻是開發(fā)全部的微信App衍生出來(lái)的全部應(yīng)用，包括微信小程序、小游戲和公眾號(hào)網(wǎng)頁(yè)。早期微信開發(fā)者工具確實(shí)有bug不斷、用戶體驗(yàn)不佳等問(wèn)題，歷時(shí)4余年，經(jīng)過(guò)微信團(tuán)隊(duì)的努力、微信小程序生態(tài)圈的完善，微信開發(fā)者工具現(xiàn)在可以說(shuō)是一款非常優(yōu)秀的IDE（IntegratedDevelopmentEnvironment，即集成開發(fā)環(huán)境）。流暢的手機(jī)模擬器、高效的編輯器、準(zhǔn)確無(wú)誤的調(diào)試器、集成云開發(fā)環(huán)境、集成版本管理功能、支持第三方插件、支持真機(jī)調(diào)試、快速高效的編譯體驗(yàn)、強(qiáng)大的官方團(tuán)隊(duì)支持，完美滿足各層次開發(fā)者的需求，微信開發(fā)者工具是一個(gè)精品IDE。2.2.1下載及安裝微信開發(fā)者工具的下載推薦直接到官方網(wǎng)址下載最新的版本?？梢酝ㄟ^(guò)百度搜索引擎使用關(guān)鍵詞“微信開發(fā)者工具”，即可找到相應(yīng)的官方鏈接，具體網(wǎng)址為/miniprogram/dev/devtools/download.html。也可以在《微信官方文檔·小程序》的工具模塊里下載。具體版本的話，推薦使用最新的穩(wěn)定版，當(dāng)前最新的穩(wěn)定版是1.05.2108150，更新時(shí)間為2021.08.15。微信開發(fā)者工具的安裝比較簡(jiǎn)單，一般沒(méi)有任何軟件沖突和錯(cuò)誤，也沒(méi)有需要破解的煩惱，幾乎就是點(diǎn)擊集成下一步即可完成，最好的軟件用戶體驗(yàn)不就是讓用戶覺(jué)得很簡(jiǎn)單嗎？從這個(gè)角度講，微信開發(fā)者工具已經(jīng)成功了一半。2.2.2啟動(dòng)頁(yè)如果是首次使用或者登錄信息過(guò)期，那么啟動(dòng)后會(huì)進(jìn)入登錄頁(yè)，需要使用開發(fā)人員的微信進(jìn)行掃碼登錄，開發(fā)者工具將使用這個(gè)微信帳號(hào)的信息進(jìn)行小程序的開發(fā)和調(diào)試，如下圖2-7所示。2.2.2啟動(dòng)頁(yè)如果已經(jīng)登錄或登錄成功后會(huì)進(jìn)入項(xiàng)目列表頁(yè)，會(huì)看到當(dāng)前環(huán)境已經(jīng)存在的項(xiàng)目列表和代碼片段列表。在項(xiàng)目列表可以選擇公眾號(hào)網(wǎng)頁(yè)調(diào)試，進(jìn)入到公眾號(hào)網(wǎng)頁(yè)調(diào)試模式，而且還可以新建項(xiàng)目、導(dǎo)入項(xiàng)目或?qū)σ延械捻?xiàng)目進(jìn)行管理，如下圖2-8所示。2.2.3新建項(xiàng)目點(diǎn)擊項(xiàng)目列表頁(yè)的“+”圖標(biāo)可以進(jìn)入新建項(xiàng)目頁(yè)，如下圖2-9所示，在該頁(yè)面里可以選擇要?jiǎng)?chuàng)建的項(xiàng)目類型。如果是要?jiǎng)?chuàng)建小程序項(xiàng)目的話，需要填寫項(xiàng)目名稱（可以為中文）、目錄（即工程文件夾路徑，最初應(yīng)該為空）、AppID（詳見本書2.1.2小節(jié)），開發(fā)模式通常選“小程序”，后端服務(wù)選“不使用云開發(fā)”（使用云開發(fā)的話，工程會(huì)添加云開發(fā)的相關(guān)資源），最后點(diǎn)確定。微信開發(fā)工具在創(chuàng)建好工程后進(jìn)入主界面。2.2.3導(dǎo)入項(xiàng)目我們經(jīng)常會(huì)遇到這種情況，比如從網(wǎng)絡(luò)上下載的開源項(xiàng)目，我們?cè)趺纯焖偈褂媚兀?.2.3導(dǎo)入項(xiàng)目我們可以使用導(dǎo)入功能，即使用微信開發(fā)者工具打開這個(gè)工程。第一步，解壓項(xiàng)目。通常網(wǎng)絡(luò)下載的項(xiàng)目是壓縮文件，我們需要把它解壓縮，這樣微信開發(fā)者工具才能正常識(shí)別。為了更集中的管理，建議將解壓后的文件夾要移動(dòng)到我們微信項(xiàng)目專用目錄中。第二步，選擇導(dǎo)入項(xiàng)目。如果微信開發(fā)者工具已經(jīng)啟動(dòng)，并默認(rèn)進(jìn)入上次的項(xiàng)目話，那么我們可以依次點(diǎn)擊菜單“項(xiàng)目”>“導(dǎo)入項(xiàng)目”，如果啟動(dòng)微信開發(fā)工具后打開的是啟動(dòng)對(duì)話框，那么我們可以點(diǎn)擊右上角的“導(dǎo)入”。然后在彈出的文件夾選擇對(duì)話框中選擇第一步中我們準(zhǔn)備好的項(xiàng)目目錄。第三步，修改AppID。第二步完成后，微信開發(fā)者工具就會(huì)顯示“導(dǎo)入項(xiàng)目對(duì)”戶框，這個(gè)對(duì)話框和“新建項(xiàng)目”對(duì)話框類似，在“導(dǎo)入項(xiàng)目”對(duì)話框中我們可以重命名項(xiàng)目名稱，也可以重新選擇導(dǎo)入的項(xiàng)目路徑，但是最關(guān)鍵的是修改AppID，因?yàn)榫W(wǎng)上下載他人的項(xiàng)目，其AppID我們肯定不可以使用，我們必須修改成自己的，才能正常的開發(fā)使用，不然會(huì)提示該AppID不可用。2.2.4主界面開發(fā)者工具主界面，從上到下，從左到右，分別為：菜單欄、工具欄、模擬器、目錄樹、編輯器、調(diào)試器六大部分，如下圖。其中模擬器、目錄樹、編輯器、調(diào)試器均可以實(shí)現(xiàn)隱藏，從而讓用戶專注于某一項(xiàng)事物。2.2.4主界面其中菜單主要情況如下表2-1所示。一級(jí)菜單二級(jí)菜單項(xiàng)目新建項(xiàng)目：快速新建項(xiàng)目打開最近：可以查看最近打開的項(xiàng)目列表，并選擇是否進(jìn)入對(duì)應(yīng)項(xiàng)目查看所有項(xiàng)目：新窗口打開啟動(dòng)頁(yè)的項(xiàng)目列表頁(yè)關(guān)閉當(dāng)前項(xiàng)目：關(guān)閉當(dāng)前項(xiàng)目，回到啟動(dòng)頁(yè)的項(xiàng)目列表頁(yè)文件新建文件保存保存所有關(guān)閉文件編輯：可以查看編輯相關(guān)的操作和快捷鍵工具編譯：編譯當(dāng)前小程序項(xiàng)目刷新：與編譯的功能一致，由于歷史原因保留對(duì)應(yīng)的快捷鍵ctrl(?)+R編譯配置：可以選擇普通編譯或自定義編譯條件前后臺(tái)切換：模擬客戶端小程序進(jìn)入后臺(tái)運(yùn)行和返回前臺(tái)的操作清除緩存：清除文件緩存、數(shù)據(jù)緩存、以及授權(quán)數(shù)據(jù)界面：控制主界面窗口模塊的顯示與隱藏設(shè)置外觀設(shè)置：控制編輯器的配色主題、字體、字號(hào)、行距編輯設(shè)置：控制文件保存的行為，編輯器的表現(xiàn)代理設(shè)置：選擇直連網(wǎng)絡(luò)、系統(tǒng)代理和手動(dòng)設(shè)置代理通知設(shè)置：設(shè)置是否接受某種類型的通知微信開發(fā)者工具切換帳號(hào)：快速切換登錄用戶關(guān)于：關(guān)于開發(fā)者工具檢查更新：檢查版本更新開發(fā)者論壇：前往開發(fā)者論壇開發(fā)者文檔：前往開發(fā)者文檔調(diào)試：調(diào)試開發(fā)者工具、調(diào)試編輯器更換開發(fā)模式：快速切換公眾號(hào)網(wǎng)頁(yè)調(diào)試和小程序調(diào)試退出：退出開發(fā)者工具2.2.4主界面在工具欄中，點(diǎn)擊用戶頭像可以打開個(gè)人中心，在這里可以便捷的切換用戶和查看開發(fā)者工具收到的消息。點(diǎn)擊模擬器、編輯器、調(diào)試器、可視化、云開發(fā)按鈕可以顯示或隱藏相應(yīng)的區(qū)域。工具欄中間，有編譯選項(xiàng)，可以選擇普通編譯，也可以自定義條件進(jìn)行編譯。另外具欄上提供了清緩存的快速入口，可以便捷的清除工具上的文件緩存、數(shù)據(jù)緩存、授權(quán)數(shù)據(jù)等，方便開發(fā)者調(diào)試。工具欄最右側(cè)是開發(fā)輔助功能的區(qū)域，在這里可以上傳代碼、版本管理、查看項(xiàng)目詳情。2.2.5模擬器模擬器可以模擬小程序在微信客戶端的表現(xiàn)。小程序的代碼通過(guò)編譯后可以在模擬器上直接運(yùn)行。開發(fā)者可以選擇不同的設(shè)備，也可以添加自定義設(shè)備來(lái)調(diào)試小程序在不同尺寸機(jī)型上的適配問(wèn)題，也可以設(shè)置不同的手機(jī)字號(hào)，也可以切換各種網(wǎng)絡(luò)狀態(tài)，還可以模擬各種手機(jī)操作（Home鍵、返回鍵等）。在模擬器底部的狀態(tài)欄，可以直觀地看到當(dāng)前運(yùn)行小程序的場(chǎng)景值，頁(yè)面路徑及頁(yè)面參數(shù)，如下圖2-11所示。在每次主動(dòng)保存代碼后，微信開發(fā)者工具會(huì)重新編譯，模擬器會(huì)自動(dòng)刷新。如果覺(jué)得模擬器調(diào)試還不夠的話，可以使用真機(jī)調(diào)試，點(diǎn)擊工具欄的“真機(jī)調(diào)試”按鈕，可以使用微信掃碼調(diào)試或自動(dòng)真機(jī)調(diào)試。2.2.6調(diào)試器調(diào)試器應(yīng)該說(shuō)是微信開發(fā)工具的亮點(diǎn)，功能十分強(qiáng)大，對(duì)開發(fā)者的幫助非常大，特別是初學(xué)者。代碼調(diào)試是開發(fā)者工具的最主要的功能之一，包括界面調(diào)試和邏輯調(diào)試。nw.js對(duì)<webview/>提供打開ChromeDevtools調(diào)試界面的接口，使得開發(fā)者工具具備對(duì)小程序的邏輯層和渲染層進(jìn)行調(diào)試的能力。也就是說(shuō)微信小程序的調(diào)試器是在Google的ChromeDevtools基礎(chǔ)上進(jìn)行擴(kuò)展和定制。調(diào)試器面板眾多，包括七大模塊：Wxml、Console、Sources、Network、Memory、AppData、Storage、Security、Sensor。2.2.6調(diào)試器Wxml面板用于幫助開發(fā)者開發(fā)wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁(yè)面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的wxss屬性，同時(shí)可以通過(guò)修改對(duì)應(yīng)wxss屬性，在模擬器中實(shí)時(shí)看到修改的情況（僅為實(shí)時(shí)預(yù)覽，無(wú)法保存到文件）。通過(guò)調(diào)試模塊左上角的選擇器，還可以快速定位頁(yè)面中組件對(duì)應(yīng)的wxml代碼，如下圖2-12所示。由于是基于ChromeDevtools的拓展，所有界面和ChromeDevtools高度相似，對(duì)于有初步Web前端開發(fā)基礎(chǔ)的學(xué)習(xí)者而言是非常友好的。Console面板主要有兩大功能，一是開發(fā)者可以在此輸入和調(diào)試代碼，二是小程序的錯(cuò)誤輸出，會(huì)顯示在此處。Console支持如下命令：build，編譯小程序；Preview，預(yù)覽；Upload，上傳代碼；openVendor，打開基礎(chǔ)庫(kù)所在目錄；openToolsLog，打開工具日志目錄；heckProxy(url)，檢查指定url的代理使用情況。2.2.6調(diào)試器Sources面板用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會(huì)對(duì)腳本文件進(jìn)行編譯的工作，所以在Sources面板中開發(fā)者看到的文件是經(jīng)過(guò)處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在define函數(shù)中，并且對(duì)于Page代碼，在尾部會(huì)有require的主動(dòng)調(diào)用。斷點(diǎn)調(diào)試的時(shí)候，首先需要在面板的Page模塊里選擇需要調(diào)試的JS文件（在第二個(gè)instanceframe的目錄里面，類型，帶sm提示的類型），然后可以在對(duì)應(yīng)行號(hào)的左邊單擊打斷點(diǎn)，被斷點(diǎn)的行號(hào)處于深藍(lán)色背景，運(yùn)行時(shí)可以觀察運(yùn)行時(shí)堆棧（CallStack）里面的變量，如下圖2-13所示。需要特別注意的一點(diǎn)是，當(dāng)代碼運(yùn)行到斷點(diǎn)的時(shí)候，整個(gè)小程序都停止了，所以模擬器會(huì)出現(xiàn)白屏或者無(wú)法操作的情況。2.2.6調(diào)試器Network面板，NetworkPanel用于觀察和顯示request和socket的請(qǐng)求情況，包括但不限于使用wx.request()、WebSocket、騰訊云函數(shù)等。需要特別注意的是uploadFile和downloadFile暫時(shí)不支持在Network面板中查看，雖然他們也是典型的網(wǎng)絡(luò)請(qǐng)求。Network面板可以過(guò)濾不同類型的網(wǎng)絡(luò)請(qǐng)求，包括Cloud（騰訊云服務(wù)）、XHR（Ajax異步請(qǐng)求）、JS、CSS、Img、Media、Font等。選擇某個(gè)網(wǎng)絡(luò)請(qǐng)求后，可以查看的信息包括Headers、Preview、Response、Initiator、Timing。如圖2-14所示。2.2.6調(diào)試器Storage面板用于顯示當(dāng)前小程序?qū)τ赟torage的使用情況，也就是使用wx.setStorage或者wx.setStorageSync后的數(shù)據(jù)存儲(chǔ)情況。Storage是基于key-value形式的，可以直接在Storagepanel上對(duì)數(shù)據(jù)進(jìn)行刪除（按delete鍵）、新增、修改，如下圖2-15所示。2.3小程序HelloWorld2.3小程序HelloWorld按照本書2.2.3小節(jié)的介紹，在創(chuàng)建好項(xiàng)目以后，項(xiàng)目中會(huì)有一些默認(rèn)文件，包含了一個(gè)默認(rèn)頁(yè)面，頁(yè)面代碼、工程目錄樹頁(yè)面和模擬器效果如下圖2-16所示。2.3小程序HelloWorld雖然小程序項(xiàng)目一創(chuàng)建成功就有HelloWorld（默認(rèn)頁(yè)面中包含了HelloWorld），但是這個(gè)HelloWorld未免來(lái)得也太容易了，并且頁(yè)面代碼過(guò)于復(fù)雜，初學(xué)者很難看懂，我們還是自己動(dòng)手寫一個(gè)HelloWorld吧！

自創(chuàng)一個(gè)HelloWorld！2.3小程序HelloWorldstep1：創(chuàng)建新頁(yè)面hello。打開app.json配置文件，在pages屬性中增加一項(xiàng)“pages/hello/hello”，并且放在數(shù)組的首位，如代碼片段2-1所示。保存后會(huì)發(fā)現(xiàn)項(xiàng)目的pages目錄中多了一個(gè)hello目錄，如圖2-17所示。代碼示例2-1在app.json增加頁(yè)面hello{"pages":["pages/hello/hello","pages/index/index","pages/logs/logs"],/*其他代碼省略*/}2.3小程序HelloWorldstep2：編碼HelloWorld。打開hello頁(yè)面目錄中的hello.wxml文件，刪除原有的內(nèi)容，增加一行代碼內(nèi)容為“<view>HelloWorld</view>”。step3：編譯。在項(xiàng)目中代碼文件修改并保存以后，微信開發(fā)工具會(huì)自動(dòng)重新編譯項(xiàng)目，也可以通過(guò)點(diǎn)擊工具欄的編譯按鈕進(jìn)行，編譯完成后，模擬器會(huì)自動(dòng)更新。最終效果如下圖2-18所示。2.4小程序基本概念2.4小程序基本概念微信客戶端給小程序所提供的運(yùn)行環(huán)境，我稱之為宿主或者宿主環(huán)境，這頁(yè)體現(xiàn)了小程序?qū)ξ⑿趴蛻舳说囊蕾囆?，沒(méi)有微信客戶端這個(gè)“宿主”，那么小程序這個(gè)“寄生蟲”也就不能獨(dú)立生存了。微信小程序可以調(diào)用宿主環(huán)境提供的微信客戶端的能力，這就使得微信小程序比普通網(wǎng)頁(yè)擁有更多的“超能力”。從用戶的使用邏輯來(lái)說(shuō)，一個(gè)小程序是由多個(gè)“頁(yè)面”（界面）組成的復(fù)雜“程序”。這里要區(qū)別一下“小程序”和“程序”的概念，我們經(jīng)常需要在“程序”onLoad（啟動(dòng)）或者onUnload（退出）的時(shí)候存儲(chǔ)數(shù)據(jù)或者在“頁(yè)面”onShow（顯示）或者onHide（隱藏）的時(shí)候做一些邏輯處理，了解程序和頁(yè)面的概念以及它們的生命周期是非常重要的。另外使用微信開發(fā)者工具建立的小程序項(xiàng)目的工程目錄結(jié)構(gòu)業(yè)務(wù)圍繞“程序”和“頁(yè)面”展開。2.4.1程序一般而言，“小程序”指的是產(chǎn)品層面的程序，而“程序”指的是代碼層面的運(yùn)行著的程序?qū)嵗?，為了避免誤解，后面統(tǒng)一采用App來(lái)代替代碼層面的“程序”概念。宿主環(huán)境提供了App()構(gòu)造器方法用來(lái)注冊(cè)一個(gè)運(yùn)行App，需要特別注意的是App()構(gòu)造器方法必須寫在項(xiàng)目根目錄的app.js文件中，App()構(gòu)造器方法運(yùn)行的結(jié)果是構(gòu)造了一個(gè)App程序?qū)嵗龑?duì)象，它是單例對(duì)象，在其他JS腳本中可以使用宿主環(huán)境提供的getApp()全局方法來(lái)獲取App程序?qū)嵗龑?duì)象。App()的調(diào)用方式比較簡(jiǎn)單直接在app.js文件中運(yùn)行即可，這些微信開發(fā)者工具在創(chuàng)建工程時(shí)幫我們完成。我們只需要完善App()方法的參數(shù)配置項(xiàng)，具體我們將在3.3.1小節(jié)展開。2.4.2頁(yè)面一、頁(yè)面的組成微信小程序中一個(gè)頁(yè)面由三部分組成：界面、配置和邏輯。界面由WXML文件和WXSS文件構(gòu)成，其中WXML文件負(fù)責(zé)內(nèi)容，WXSS文件負(fù)責(zé)內(nèi)容的顯示樣式，配置由JSON文件進(jìn)行描述，頁(yè)面邏輯則是由JS腳本文件復(fù)雜運(yùn)行。一個(gè)頁(yè)面的全部文件需要放置在同一個(gè)目錄下，其中WXML文件和JS文件是必須存在的，JSON和WXSS文件是可選的。2.4.2頁(yè)面二、頁(yè)面的配置另外，頁(yè)面文件所在的目錄路徑必須在小程序工程的根目錄文件app.json中的pages字段聲明，否則這個(gè)頁(yè)面不會(huì)被注冊(cè)到宿主環(huán)境中，這一過(guò)程又叫頁(yè)面注冊(cè)。例如兩個(gè)頁(yè)面的文件所在目錄的相對(duì)路徑分別為pages/index/page和pages/log/log，則pages配置如代碼示例2-2所示。pages的值為一數(shù)組，數(shù)組的第一項(xiàng)路徑對(duì)應(yīng)的頁(yè)面為小程序的默認(rèn)啟動(dòng)首頁(yè)。代碼示例2-2app.json文件{"pages":["pages/index/page", //第一項(xiàng)默認(rèn)為首頁(yè)"pages/log/log"]}2.4.2頁(yè)面三、頁(yè)面的新建1、通過(guò)pages配置項(xiàng)新建新建頁(yè)面也可以直接操作pages完成，就像“2.3小程序HelloWorld”的例子一樣，我們可以直接在pages中增加一個(gè)路徑，而達(dá)到新建頁(yè)面的效果。2、逐個(gè)新建文件根據(jù)頁(yè)面的構(gòu)成和配置，我們可以通過(guò)微信開發(fā)者工具的資源管理器來(lái)逐個(gè)創(chuàng)建好頁(yè)面目錄、wxml、wxss、js、json文件，然后在相應(yīng)的位置右鍵選擇相應(yīng)的新建菜單。最后在app.json文件的pages配置項(xiàng)中增加頁(yè)面路徑即可。2.4.3工程目錄結(jié)構(gòu)微信小程序代碼有著科學(xué)合理的項(xiàng)目結(jié)構(gòu)，完整小程序目錄結(jié)構(gòu)包含一個(gè)描述整體程序的app、配置文件和多個(gè)描述各自頁(yè)面的page，如下圖2-19所示。|──app.js|──app.json|──app.wxss|──pages││──index││|──index.wxml││|──index.js││|──index.json││└──index.wxss│└──logs│|──logs.wxml│└──logs.js└──utils2.4.3工程目錄結(jié)構(gòu)一個(gè)小程序主體部分由三個(gè)文件組成，分別是app.js、app.json、app.wxss，它們必須放在項(xiàng)目的根目錄，如下表2-2所示。另外還有兩個(gè)項(xiàng)目配置文件，project.config.json是項(xiàng)目配置文件，sitemap.json是配置小程序及其頁(yè)面是否允許被微信索引（即爬蟲配置文件）。pages目錄是按照約定保存頁(yè)面文件的位置。文件必需作用app.js是小程序全局邏輯腳本文件，主要是提供了整個(gè)小程序的生命周期方法。app.json是小程序全局配置文件，該配置文件極其重要app.wxss否小程序樣式全局配置，2.4.3工程目錄結(jié)構(gòu)一個(gè)頁(yè)面由四個(gè)文件組成，為了方便開發(fā)者減少配置項(xiàng)。描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名，四個(gè)文件類型分別如下表2-3所示。文件類型必需作用js是頁(yè)面邏輯，生命周期方法，自定義方法wxml是頁(yè)面結(jié)構(gòu)，類型HTMLjson否頁(yè)面配置wxss否頁(yè)面樣式表，類型CSS2.5小程序相關(guān)學(xué)習(xí)資料2.5小程序相關(guān)學(xué)習(xí)資料雖然只有短短4年歷史，但是小程序的學(xué)習(xí)資料已經(jīng)非常豐富。微信團(tuán)隊(duì)官方推出的文檔類資料有《微信官方文檔·小程序》和《小程序開發(fā)指南》，社區(qū)談?wù)擃惥W(wǎng)址有微信開放社區(qū)。非官方的資料也非常豐富，比如B站上豐富的視頻資料教程、行家能手出版的技術(shù)書籍等，不一而足。眾多學(xué)習(xí)資料中首推《微信官方文檔·小程序》（又名微信開放文檔），再配合官方的“小程序示例”，可以進(jìn)行高效快速的學(xué)習(xí)。2.5.1微信官方文檔·小程序應(yīng)該說(shuō)《微信官方文檔·小程序》是微信小程序?qū)W習(xí)的最好教材。該文檔一級(jí)模塊有六個(gè)，分別是開發(fā)、介紹、設(shè)計(jì)、運(yùn)營(yíng)、數(shù)據(jù)、社區(qū)，涉及小程序從開發(fā)到運(yùn)營(yíng)的方方面面。作為技術(shù)開發(fā)者主要關(guān)注的就是其中的開發(fā)模塊，開發(fā)模塊下面設(shè)了十個(gè)二級(jí)模塊，分別是指南、框架、組件、API、平臺(tái)能力、服務(wù)端、工具、云開發(fā)、云托管、更新日志，雖然信息量非常大，但組織的卻井井有條，如下圖2-20所示。文檔全文都提供了代碼片段或完整的代碼，可以直接導(dǎo)入到微信開發(fā)者工具中（詳見1.2.2）。另外文檔還提供了全文搜索功能2.5.1微信官方文檔·小程序指南主要是讓開發(fā)人員對(duì)微信小程序快速上手，有總體大概的認(rèn)知，而不糾結(jié)于技術(shù)細(xì)節(jié)。框架模塊主要講解了MINA框架的基礎(chǔ)語(yǔ)法，主要是WXML語(yǔ)法，包括數(shù)據(jù)綁定、列表渲染、條件渲染、模板、引用等。組件模塊主要講解了微信小程序內(nèi)置的視圖組件，主要包括視圖容器、基礎(chǔ)內(nèi)容組件、表單組件、導(dǎo)航組件、媒體組件、map組件、cavans組件等。API模塊主要講解了微信小程序客戶端全部API接口，主要包括基礎(chǔ)、路由、跳轉(zhuǎn)、轉(zhuǎn)發(fā)、界面、網(wǎng)絡(luò)、支付、緩存等。服務(wù)端模塊主要講解了使用傳統(tǒng)Web服務(wù)端程序（相對(duì)騰訊云開發(fā)而言）與微信交互的API，主要包括登錄、用戶信息、接口調(diào)用憑證、數(shù)據(jù)分析等服務(wù)端API。工具模塊主要講解了微信開發(fā)者工具的使用的方方面面。云開發(fā)模塊講解了使用騰訊云開發(fā)技術(shù)作為微信小程序服務(wù)端的情況，這是值得大書特書的內(nèi)容，因?yàn)閷?duì)比傳統(tǒng)Web服務(wù)端程序，使用騰訊云開發(fā)作為微信小程序服務(wù)端程序可以大大降低服務(wù)端難度、減少總體開發(fā)周期、提高程序的安全性。云托管模塊主要講解了使用騰訊云原生全托管的容器后端云服務(wù)，支持托管任意語(yǔ)言及框架的容器化應(yīng)用，創(chuàng)建環(huán)境后即可享受能自動(dòng)擴(kuò)縮容的容器資源，用戶可面向代碼/鏡像等多種方式使用，免服務(wù)器免運(yùn)維，可更專注于自身的業(yè)務(wù)。2.5.2小程序示例光有文檔和代碼當(dāng)然是不夠的，微信團(tuán)隊(duì)還開發(fā)了“小程序示例”這個(gè)小程序，其二維碼如下圖2-21所示。2.5.2小程序示例這個(gè)示例講微信小程序的主要的組件、API、擴(kuò)展、云開發(fā)等易于展示的特性，如下圖2-22所示，并且微信團(tuán)隊(duì)還在github上對(duì)其源代碼進(jìn)行了開源，源碼地址是/wechat-miniprogram/miniprogram-demo。2.5.2小程序示例小程序示例正確學(xué)習(xí)和使用姿勢(shì)是怎樣的呢？比如我們現(xiàn)在需要實(shí)現(xiàn)表單提交操作，特別提交按鈕對(duì)應(yīng)的事件。怎么結(jié)合小程序示例和源代碼快速學(xué)習(xí)呢？2.5.2小程序示例step1，下載并導(dǎo)入源代碼。我們首先在github上把整個(gè)項(xiàng)目的源代碼下載下來(lái)，如圖2-23所示步驟。2.5.2小程序示例下載完成后會(huì)得到一個(gè)壓縮文件miniprogram-demo-master.zip，解壓該壓縮文件，使用微信開發(fā)工具的導(dǎo)入功能導(dǎo)入解壓后的源代碼（需要修改AppID）。step2，在小程序示例找到相應(yīng)的頁(yè)面。在微信小程序示例里面選擇“組件”選項(xiàng)，再選擇“表單組件”，然后選擇“form”，然后進(jìn)入了form頁(yè)面，如下圖2-24所示?？梢钥吹接刑峤唬⊿ubmit）按鈕。2.5.2小程序示例step3，查看form頁(yè)面的源文件。使用微信開發(fā)者工具，打開step1中導(dǎo)入的項(xiàng)目。由于該項(xiàng)目是使用了云開發(fā)技術(shù)，所有目錄結(jié)構(gòu)有異于普通的小程序項(xiàng)目結(jié)構(gòu)，目前我們僅需要關(guān)注的是miniprogram里面的page目錄。page目錄有四個(gè)子目錄，分別是API、cloud、common、component、weui，它們與小程序示例的4個(gè)底部導(dǎo)航對(duì)應(yīng)，即API對(duì)應(yīng)接口、cloud對(duì)應(yīng)云開發(fā)、component對(duì)應(yīng)組件、weui對(duì)應(yīng)擴(kuò)展能力。表單屬于組件，所以我們這里需要在component目錄里查找。我們可以發(fā)現(xiàn)在component的pages目錄中form頁(yè)面，查看其wxml文件可以確定form頁(yè)面文件就是我們要找的頁(yè)面源代碼了。第2章小程序開發(fā)準(zhǔn)備（完結(jié)）第3章小程序框架《微信小程序開發(fā)——從入門到項(xiàng)目實(shí)戰(zhàn)》學(xué)習(xí)目標(biāo)|Target

了解微信小程序的JSON配置

掌握微信小程序的

WXML模板

掌握獲取微信小程序JavaScript邏輯交互

掌握事件、WXSS樣式以及模塊化、wx對(duì)象、console對(duì)象、斷點(diǎn)調(diào)試小程序開發(fā)框架概述

小程序開發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP體驗(yàn)的服務(wù)。整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（AppService）和視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

小程序代碼由配置代碼JSON文件、模板代碼WXML文件、樣式代碼WXSS文件、邏輯代碼JavaScript文件組成以及WXS腳本文件組成。本章主要講解微信小程序配置代碼JSON文件的常用配置、WXML語(yǔ)法（包括數(shù)據(jù)綁定、列表渲染、條件渲染、模板及引用）等。目錄|Contents010203JSON配置WXML模板JavaScript邏輯交互目錄|Contents040506事件WXSS樣式其他一、JSON配置1.1什么是JSON配置什么是JSON配置1.1什么是JSON配置JSON對(duì)象是一個(gè)無(wú)序的“鍵/值”（也叫名“名稱/值”、“key/value”）對(duì)組成的集合。一個(gè)JSON對(duì)象以“{”（左括號(hào)）開始，“}”（右括號(hào)）結(jié)束，每個(gè)“鍵”后跟一個(gè)“:”（冒號(hào)），“鍵/值”對(duì)之間使用“，”（逗號(hào)）分隔。1.1什么是JSON配置2.在JSON中，鍵值對(duì)中值的數(shù)據(jù)類型是有限制的，必須是以下數(shù)據(jù)類型之一：<1>、字符串<2>、數(shù)字<3>、對(duì)象（僅限JSON對(duì)象，嵌套效果）<4>、數(shù)組（數(shù)組的內(nèi)容可以為JSON對(duì)象）<5>、布爾<6>、null1.JSON語(yǔ)法衍生于JavaScript對(duì)象表示法語(yǔ)，是JavaScript對(duì)象表示語(yǔ)法的一個(gè)子集，其語(yǔ)法規(guī)則如下：<1>、數(shù)據(jù)在名稱/值對(duì)中；<2>、數(shù)據(jù)由逗號(hào)分隔；<3>、{}容納對(duì)象<4>、[]容納數(shù)組1.1什么是JSON配置JSON舉例1、簡(jiǎn)單JSON代碼示例3-1簡(jiǎn)單的JSON{"name":"王興","gender":"女","age":27}1.1什么是JSON配置JSON舉例2、復(fù)雜的JSON{"name":"王興","gender":"女","age":27,"parents":{"mother":{"name":"李絨","gender":"女","age":49},"father":{"name":"王全","gender":"男","age":50}},

1.1什么是JSON配置"hornor":[{"name":"微信小程序應(yīng)用開發(fā)賽","level":"省級(jí)三等獎(jiǎng)"},{"name":"全國(guó)職業(yè)院校技能大賽云安全技術(shù)應(yīng)用","level":"國(guó)家級(jí)三等獎(jiǎng)"}]}1.1什么是JSON配置JSON舉例了解JavaScript對(duì)象、JSON對(duì)象與JSON字符串1.2JavaScript對(duì)象、JSON對(duì)象與JSON字符串

先定一個(gè)小目標(biāo)！1.2JavaScript對(duì)象、JSON對(duì)象與JSON字符串JavaScript對(duì)象、JSON對(duì)象與JSON字符串異同區(qū)別JavaScript對(duì)象JSON對(duì)象JSON字符串含義類的實(shí)例類的實(shí)例僅僅是一種數(shù)據(jù)格式傳輸不能傳輸不能傳輸可以跨平臺(tái)數(shù)據(jù)傳輸，速度快表現(xiàn)鍵值對(duì)方式，屬性不加引號(hào)、值可以是函數(shù)、對(duì)象、字符串、數(shù)字、boolean等鍵值對(duì)的方式，屬性必須加雙引號(hào)、值不可以是方法函數(shù)、undefined以及NAN鍵值對(duì)的方式，屬性必須加雙引號(hào)值不可以是方法函數(shù)、undefined以及NAN舉例letp;="王興";p.gender="女";p.age=27letp={"name":"王興","gender":"女","age":27}letp='{"name":"王興","gender":"女","age":27}'相互轉(zhuǎn)換JS對(duì)象轉(zhuǎn)換為JSON字符串JSON.stringify(obj)JSON對(duì)象轉(zhuǎn)字符串JSON.stringify(obj)JSON字符串轉(zhuǎn)換為JS對(duì)象JSON.parse(str)1.3JSON配置文件JSON除了以JSON數(shù)據(jù)格式或JSON對(duì)象的形式參與微信小程序開發(fā)，JOSN還可以是配置文件。JSON作為配置文件與JSON數(shù)據(jù)格式或JSON對(duì)象是完全不同的事物，JSON數(shù)據(jù)格式是JavaScript的對(duì)象表達(dá)方式，而JSON文件是采用JSON數(shù)據(jù)格式的文件，雖然看起來(lái)相似，但是有所不同。1.4項(xiàng)目配置文件字段名類型說(shuō)明miniprogramRootPathString指定小程序源碼的目錄(需為相對(duì)路徑)qcloudRootPathString指定騰訊云項(xiàng)目的目錄(需為相對(duì)路徑)pluginRootPathString指定插件項(xiàng)目的目錄(需為相對(duì)路徑)cloudbaseRootPathString云開發(fā)代碼根目錄compileTypeString編譯類型settingObject項(xiàng)目設(shè)置libVersionString基礎(chǔ)庫(kù)版本appidString項(xiàng)目的appid，只在新建項(xiàng)目時(shí)讀取projectnameString項(xiàng)目名字，只在新建項(xiàng)目時(shí)讀取packOptionsObject打包配置選項(xiàng)debugOptionsObject調(diào)試配置選項(xiàng)watchOptionsObject文件監(jiān)聽配置設(shè)置scriptsObject自定義預(yù)處理項(xiàng)目配置文件project.config.json一級(jí)配置項(xiàng)1.5索引配置文件索引配置文件sitemap.json是具體設(shè)置微信頁(yè)面索引的地方。索引配置文件sitemap.json典型配置{"rules":[{"action":"allow","page":"index/index"},{"action":"disallow","page":"*"}]}配置index/index頁(yè)面被索引，而其余頁(yè)面不被索引。1.6全局配置文件app.json是整個(gè)小程序app的全局配置文件，該文件位于工程的根目錄里，該文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。小程序全局配置文件app.json內(nèi)容{"pages":["pages/index/index","pages/logs/index"],"window":{"navigationBarTitleText":"Demo"},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首頁(yè)"},{"pagePath":"pages/logs/index","text":"日志"}]},

"networkTimeout":{"request":10000,"downloadFile":10000},"debug":true}1.6全局配置文件1.6全局配置文件window屬性用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。windows的常用配置項(xiàng)如下屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如#000000navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色，僅支持black/whitenavigationBarTitleTextstring

導(dǎo)航欄標(biāo)題文字內(nèi)容navigationStylestringdefault導(dǎo)航欄樣式，僅支持以下值：default默認(rèn)樣式；custom自定義導(dǎo)航欄，只保留右上角膠囊按鈕homeButtonbooleandefault在非首頁(yè)、非頁(yè)面棧最底層頁(yè)面或非tabbar內(nèi)頁(yè)面中的導(dǎo)航欄展示home鍵backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉loading的樣式，僅支持dark/lightbackgroundColorTopstring#ffffff頂部窗口的背景色，僅iOS支持backgroundColorBottomstring#ffffff底部窗口的背景色，僅iOS支持enablePullDownRefreshbooleanfalse是否開啟全局的下拉刷新。onReachBottomDistancenumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。小程序全局配置文件app.json部分內(nèi)容{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}1.6全局配置文件window配置項(xiàng)作用區(qū)域小程序接口權(quán)限相關(guān)設(shè)置。字段類型為對(duì)象，該對(duì)象屬性較多，結(jié)構(gòu)如下1.6全局配置文件permission屬性對(duì)象scope結(jié)構(gòu)scope對(duì)應(yīng)接口描述scope.userLocationwx.getLocation,wx.chooseLocation,wx.startLocationUpdate地理位置scope.userLocationBackgroundwx.startLocationUpdateBackground后臺(tái)定位scope.recordlive-pusher組件,wx.startRecord,wx.joinVoIPChat,RecorderManager.start麥克風(fēng)scope.cameracamera組件,live-pusher組件,wx.createVKSession攝像頭scope.bluetoothwx.openBluetoothAdapter,wx.createBLEPeripheralServer藍(lán)牙scope.writePhotosAlbumwx.saveImageToPhotosAlbum,wx.saveVideoToPhotosAlbum添加到相冊(cè)scope.addPhoneContactwx.wx.addPhoneContact添加到聯(lián)系人scope.addPhoneCalendarwx.addPhoneRepeatCalendar,wx.addPhoneCalendar添加到日歷scope.werunwx.getWeRunData微信運(yùn)動(dòng)步數(shù)1.7頁(yè)面配置文件一個(gè)完整的小程序視圖頁(yè)面通常由4個(gè)文件組成，分別是wxml、wxss、js、json，其中json文件（其文件名形式為“頁(yè)面名稱.json”屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如#000000navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色，僅支持black/whitenavigationBarTitleTextstring

導(dǎo)航欄標(biāo)題文字內(nèi)容navigationStylestringdefault導(dǎo)航欄樣式，僅支持以下值：default默認(rèn)樣式；custom自定義導(dǎo)航欄，只保留右上角膠囊按鈕。backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉loading的樣式，僅支持dark/lightbackgroundColorTopstring#ffffff頂部窗口的背景色，僅iOS支持backgroundColorBottomstring#ffffff底部窗口的背景色，僅iOS支持enablePullDownRefreshbooleanFALSE是否開啟當(dāng)前頁(yè)面下拉刷新。onReachBottomDistancenumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置，支持auto/portrait/landscapedisableScrollbooleanFALSE設(shè)置為true則頁(yè)面整體不能上下滾動(dòng)。只在頁(yè)面配置中有效，無(wú)法在app.json中設(shè)置usingComponentsObject否initialRenderingCachestring

stylestringdefault啟用新版的組件樣式Object否單頁(yè)模式相關(guān)配置stringhomePage重新啟動(dòng)策略配置屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如#000000二、WXML模板簡(jiǎn)單WXML文件內(nèi)容<!--pages/hello/hello.wxml--><text>hello</text><!---->表示注釋，這和HTML的注釋方式一致。<text></text>表示text文本標(biāo)簽，中間書寫text標(biāo)簽的內(nèi)容。不帶有任何邏輯功能的WXML基本語(yǔ)法如下：<!--在此處寫注釋--><標(biāo)簽名屬性名1="屬性值1"屬性名2="屬性值2"...>...</標(biāo)簽名>2.1WXML簡(jiǎn)介

WXML文件后綴名是.wxml，有過(guò)HTML的學(xué)習(xí)經(jīng)驗(yàn)的朋友應(yīng)該會(huì)很熟悉這種代碼的書寫方式，簡(jiǎn)單的WXML語(yǔ)句在語(yǔ)法上同HTML非常相似2.2數(shù)據(jù)綁定一、簡(jiǎn)單綁定1、綁定內(nèi)容2、綁定屬性（1）組件屬性（2）控制屬性（3）關(guān)鍵字3、簡(jiǎn)單運(yùn)算（1）三目運(yùn)算（2）算術(shù)運(yùn)算（3）邏輯判斷（4）字符串運(yùn)算（5）數(shù)據(jù)路徑運(yùn)算二、組合1、數(shù)組2、對(duì)象（1）在組合對(duì)象中綁定基本數(shù)據(jù)類型（2）在組合對(duì)象中綁定對(duì)象三、特別注意事項(xiàng)1、大小敏感2、變量未定義、undefined和null的情況2.3簡(jiǎn)易雙向綁定在前面講解中，普通的屬性的綁定是單向的。例如：<inputvalue="{{value}}"/>如果使用this.setData({value:'leaf'})來(lái)更新value，this.data.value和輸入框的中顯示的值都會(huì)被更新為leaf；但如果用戶修改了輸入框里的值，卻不會(huì)同時(shí)改變this.data.value。如果需要在用戶輸入的同時(shí)改變his.data.value，需要借助簡(jiǎn)易雙向綁定機(jī)制。此時(shí)，可以在對(duì)應(yīng)項(xiàng)目之前加入“model:”前綴：<inputmodel:value="{{value}}"/>這樣，如果輸入框的值被改變了，this.data.value也會(huì)同時(shí)改變。同時(shí)，WXML中所有綁定了value的位置也會(huì)被一同更新，數(shù)據(jù)監(jiān)聽器也會(huì)被正常觸發(fā)。但用于雙向綁定的表達(dá)式有如下限制，即只能是一個(gè)單一字段的綁定，如：<inputmodel:value="值為{{value}}"/><inputmodel:value="{{a+b}}"/>這些都是非法的，另外簡(jiǎn)易雙向綁定也不能使用data層級(jí)路徑，如：<inputmodel:value="{{a.b}}"/>這個(gè)表達(dá)式也是非法的。2.4條件渲染一、wx:if

wx:if條件渲染<!--WXML文件--><viewwx:if="{{condition}}">{{condition}}</view>//JS文件Page({data:{condition:false,}})二、blockwx:ifblockwx:if實(shí)現(xiàn)多個(gè)組件同時(shí)條件渲染<!--WXML文件--><blockwx:if="{{condition}}"><view>viewA</view><view>viewB</view><view>viewB</view></block>//JS文件Page({data:{condition:true,}})2.4條件渲染三、wx:if和hidden異同blockwx:if實(shí)現(xiàn)多個(gè)組件同時(shí)條件渲染<!--WXML文件--><viewwx:if="{{condition}}">viewA</view><viewhidden="{{!condition}}">viewB</view>//JS文件Page({data:{condition:false,}})2.5列表渲染一、wx:for

wx:for控制屬性實(shí)現(xiàn)列表渲染<!--WXML文件--><viewwx:for="{{search}}">{{index+1}}.{{item.keyword}}——{{item.count}}</view>//JS文件Page({data:{search:[{keyword:'航天員太空過(guò)年吃啥餡餃子?',count:"497萬(wàn)"},{keyword:'南北方將迎下半年來(lái)最冷清晨新',count:"485萬(wàn)"},{keyword:'嫌銀行態(tài)度差男子取500萬(wàn)現(xiàn)金',count:"470萬(wàn)"}]}})wx:for控制屬性實(shí)現(xiàn)列表渲染調(diào)試器WXML內(nèi)容二、修改索引和數(shù)組項(xiàng)的名稱2.5列表渲染

wx:for控制屬性實(shí)現(xiàn)列表渲染<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itm">{{idx}}:{{itm.message}}</view>三、wx:for嵌套

wx:for嵌套實(shí)現(xiàn)九九乘法表<viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="m"><viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="n"><viewwx:if="{{n>=m}}">{{m}}×{{n}}={{m*n}}</view></view></view>wx:for嵌套實(shí)現(xiàn)九九乘法表效果截圖（不完整）四、blockwx:for2.5列表渲染類似blockwx:if，也可以將控制屬性wx:for用在<block/>標(biāo)簽上，實(shí)現(xiàn)重復(fù)渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊，顯然很多情況下，我們用的更多的是viewwx:for，但是特殊情況下blockwx:for有其價(jià)值，至少這種特性