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

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

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

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

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

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

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

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

小程序特點有哪些？1.2小程序特點

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

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

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

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

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

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

了解微信小程序的JSON配置

掌握微信小程序的

WXML模板

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

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

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

小程序代碼由配置代碼JSON文件、模板代碼WXML文件、樣式代碼WXSS文件、邏輯代碼JavaScript文件組成以及WXS腳本文件組成。本章主要講解微信小程序配置代碼JSON文件的常用配置、WXML語法（包括數(shù)據(jù)綁定、列表渲染、條件渲染、模板及引用）等。目錄|Contents010203JSON配置WXML模板JavaScript邏輯交互目錄|Contents040506事件WXSS樣式其他一、JSON配置1.1什么是JSON配置什么是JSON配置1.1什么是JSON配置JSON對象是一個無序的“鍵/值”（也叫名“名稱/值”、“key/value”）對組成的集合。一個JSON對象以“{”（左括號）開始，“}”（右括號）結(jié)束，每個“鍵”后跟一個“:”（冒號），“鍵/值”對之間使用“，”（逗號）分隔。1.1什么是JSON配置2.在JSON中，鍵值對中值的數(shù)據(jù)類型是有限制的，必須是以下數(shù)據(jù)類型之一：<1>、字符串<2>、數(shù)字<3>、對象（僅限JSON對象，嵌套效果）<4>、數(shù)組（數(shù)組的內(nèi)容可以為JSON對象）<5>、布爾<6>、null1.JSON語法衍生于JavaScript對象表示法語，是JavaScript對象表示語法的一個子集，其語法規(guī)則如下：<1>、數(shù)據(jù)在名稱/值對中；<2>、數(shù)據(jù)由逗號分隔；<3>、{}容納對象<4>、[]容納數(shù)組1.1什么是JSON配置JSON舉例1、簡單JSON代碼示例3-1簡單的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":"省級三等獎"},{"name":"全國職業(yè)院校技能大賽云安全技術(shù)應(yīng)用","level":"國家級三等獎"}]}1.1什么是JSON配置JSON舉例了解JavaScript對象、JSON對象與JSON字符串1.2JavaScript對象、JSON對象與JSON字符串

先定一個小目標(biāo)！1.2JavaScript對象、JSON對象與JSON字符串JavaScript對象、JSON對象與JSON字符串異同區(qū)別JavaScript對象JSON對象JSON字符串含義類的實例類的實例僅僅是一種數(shù)據(jù)格式傳輸不能傳輸不能傳輸可以跨平臺數(shù)據(jù)傳輸，速度快表現(xiàn)鍵值對方式，屬性不加引號、值可以是函數(shù)、對象、字符串、數(shù)字、boolean等鍵值對的方式，屬性必須加雙引號、值不可以是方法函數(shù)、undefined以及NAN鍵值對的方式，屬性必須加雙引號值不可以是方法函數(shù)、undefined以及NAN舉例letp;="王興";p.gender="女";p.age=27letp={"name":"王興","gender":"女","age":27}letp='{"name":"王興","gender":"女","age":27}'相互轉(zhuǎn)換JS對象轉(zhuǎn)換為JSON字符串JSON.stringify(obj)JSON對象轉(zhuǎn)字符串JSON.stringify(obj)JSON字符串轉(zhuǎn)換為JS對象JSON.parse(str)1.3JSON配置文件JSON除了以JSON數(shù)據(jù)格式或JSON對象的形式參與微信小程序開發(fā)，JOSN還可以是配置文件。JSON作為配置文件與JSON數(shù)據(jù)格式或JSON對象是完全不同的事物，JSON數(shù)據(jù)格式是JavaScript的對象表達(dá)方式，而JSON文件是采用JSON數(shù)據(jù)格式的文件，雖然看起來相似，但是有所不同。1.4項目配置文件字段名類型說明miniprogramRootPathString指定小程序源碼的目錄(需為相對路徑)qcloudRootPathString指定騰訊云項目的目錄(需為相對路徑)pluginRootPathString指定插件項目的目錄(需為相對路徑)cloudbaseRootPathString云開發(fā)代碼根目錄compileTypeString編譯類型settingObject項目設(shè)置libVersionString基礎(chǔ)庫版本appidString項目的appid，只在新建項目時讀取projectnameString項目名字，只在新建項目時讀取packOptionsObject打包配置選項debugOptionsObject調(diào)試配置選項watchOptionsObject文件監(jiān)聽配置設(shè)置scriptsObject自定義預(yù)處理項目配置文件project.config.json一級配置項1.5索引配置文件索引配置文件sitemap.json是具體設(shè)置微信頁面索引的地方。索引配置文件sitemap.json典型配置{"rules":[{"action":"allow","page":"index/index"},{"action":"disallow","page":"*"}]}配置index/index頁面被索引，而其余頁面不被索引。1.6全局配置文件app.json是整個小程序app的全局配置文件，該文件位于工程的根目錄里，該文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。小程序全局配置文件app.json內(nèi)容{"pages":["pages/index/index","pages/logs/index"],"window":{"navigationBarTitleText":"Demo"},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首頁"},{"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的常用配置項如下屬性類型默認(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在非首頁、非頁面棧最底層頁面或非tabbar內(nèi)頁面中的導(dǎo)航欄展示home鍵backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉loading的樣式，僅支持dark/lightbackgroundColorTopstring#ffffff頂部窗口的背景色，僅iOS支持backgroundColorBottomstring#ffffff底部窗口的背景色，僅iOS支持enablePullDownRefreshbooleanfalse是否開啟全局的下拉刷新。onReachBottomDistancenumber50頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。小程序全局配置文件app.json部分內(nèi)容{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}1.6全局配置文件window配置項作用區(qū)域小程序接口權(quán)限相關(guān)設(shè)置。字段類型為對象，該對象屬性較多，結(jié)構(gòu)如下1.6全局配置文件permission屬性對象scope結(jié)構(gòu)scope對應(yīng)接口描述scope.userLocationwx.getLocation,wx.chooseLocation,wx.startLocationUpdate地理位置scope.userLocationBackgroundwx.startLocationUpdateBackground后臺定位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添加到相冊scope.addPhoneContactwx.wx.addPhoneContact添加到聯(lián)系人scope.addPhoneCalendarwx.addPhoneRepeatCalendar,wx.addPhoneCalendar添加到日歷scope.werunwx.getWeRunData微信運動步數(shù)1.7頁面配置文件一個完整的小程序視圖頁面通常由4個文件組成，分別是wxml、wxss、js、json，其中json文件（其文件名形式為“頁面名稱.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)前頁面下拉刷新。onReachBottomDistancenumber50頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置，支持auto/portrait/landscapedisableScrollbooleanFALSE設(shè)置為true則頁面整體不能上下滾動。只在頁面配置中有效，無法在app.json中設(shè)置usingComponentsObject否initialRenderingCachestring

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

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

wx:if條件渲染<!--WXML文件--><viewwx:if="{{condition}}">{{condition}}</view>//JS文件Page({data:{condition:false,}})二、blockwx:ifblockwx:if實現(xiàn)多個組件同時條件渲染<!--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實現(xiàn)多個組件同時條件渲染<!--WXML文件--><viewwx:if="{{condition}}">viewA</view><viewhidden="{{!condition}}">viewB</view>//JS文件Page({data:{condition:false,}})2.5列表渲染一、wx:for

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

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

wx:for嵌套實現(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嵌套實現(xiàn)九九乘法表效果截圖（不完整）四、blockwx:for2.5列表渲染類似blockwx:if，也可以將控制屬性wx:for用在<block/>標(biāo)簽上，實現(xiàn)重復(fù)渲染一個包含多節(jié)點的結(jié)構(gòu)塊，顯然很多情況下，我們用的更多的是viewwx:for，但是特殊情況下blockwx:for有其價值，至少這種特性