微信小程序開(kāi)發(fā)圖解案例教程PPT完整全套教學(xué)課件

第1章認(rèn)識(shí)微信小程序微信小程序開(kāi)發(fā)圖解案例教程（第3版）全套PPT課件2016年1月9日，騰訊公司啟動(dòng)了微信小程序產(chǎn)品的研發(fā)，并于2017年1月9日正式發(fā)布。截至2019年8月，微信小程序總量達(dá)240萬(wàn)左右，微信小程序累積用戶量已達(dá)8.4億，月活用戶更是突破6.8億，占微信平臺(tái)月活用戶的62%，用戶使用習(xí)慣基本形成。不同于微信訂閱號(hào)或公眾號(hào)，微信小程序被賦予了應(yīng)用程序的能力，它是一種無(wú)須安裝即可使用的應(yīng)用，實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。它也體現(xiàn)了“用完即走”的理念，用戶不再需要關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)隨地可用，無(wú)須卸載。經(jīng)過(guò)幾年的發(fā)展，現(xiàn)如今各類(lèi)微信小程序已然呈井噴式發(fā)展，各行各業(yè)的小程序都開(kāi)始運(yùn)作，成為各大企業(yè)引流的入口，同時(shí)也降低了企業(yè)發(fā)布App應(yīng)用產(chǎn)品的成本。下面就讓我們一起來(lái)認(rèn)識(shí)一下微信小程序吧！本章導(dǎo)讀Thechapter’sintroduction目錄導(dǎo)航1.1微信小程序介紹1.2微信小程序開(kāi)發(fā)準(zhǔn)備1.3微信小程序開(kāi)發(fā)工具的使用1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建1.5小結(jié)1.1.1初識(shí)微信小程序微信小程序（簡(jiǎn)稱(chēng)小程序）是一個(gè)基于去中心化而存在的平臺(tái)，它沒(méi)有聚合的入口，核心場(chǎng)景入口不斷豐富，流量入口已經(jīng)超過(guò)60多個(gè)，例如，在微信中的“發(fā)現(xiàn)”界面可以找到小程序的入口，如圖1.1所示。圖1.1微信小程序入口用戶需要下載、安裝才可以使用App，安裝時(shí)還要考慮App占用多大存儲(chǔ)空間，如果存儲(chǔ)空間不夠使用，就需要卸載不用的App以釋放空間，在安裝App時(shí)還需要考慮是否耗用手機(jī)流量等問(wèn)題。微信小程序則無(wú)須安裝，可以直接使用，不占用存儲(chǔ)空間，不需要考慮安裝應(yīng)用時(shí)耗用手機(jī)流量，并且在使用微信小程序后，可以用完即走。APP與微信小程序的區(qū)別：1.1.2微信小程序的功能小程序提供的功能如下。分享頁(yè)功能。分享對(duì)話功能。線下掃碼進(jìn)入微信小程序功能。掛起狀態(tài)功能。消息實(shí)時(shí)音視頻錄制播放功能。硬件連接功能。小游戲功能。公眾號(hào)關(guān)聯(lián)功能。搜索查找功能。識(shí)別二維碼功能。1.1.3微信小程序的使用場(chǎng)景從微信小程序上線開(kāi)始，各種小程序如雨后春筍般出現(xiàn)。那么小程序有哪些適合的使用場(chǎng)景呢？在發(fā)布小程序的時(shí)候，要選擇服務(wù)類(lèi)目，通過(guò)這些服務(wù)類(lèi)目，能知道小程序的使用場(chǎng)景。服務(wù)類(lèi)目分為個(gè)人服務(wù)類(lèi)目和企業(yè)服務(wù)類(lèi)目。個(gè)人服務(wù)類(lèi)目是以個(gè)人為開(kāi)發(fā)主體的小程序，服務(wù)范圍少；企業(yè)服務(wù)類(lèi)目是以企業(yè)為開(kāi)發(fā)主體的小程序，服務(wù)范圍大。具體使用場(chǎng)景可在“微信官方文檔”——“子程序”。1.1.4微信小程序能取代App嗎除了微信小程序，企業(yè)巨頭也紛紛推出小程序。例如，阿里巴巴公司推出了支付寶小程序，支付寶小程序整合了阿里巴巴豐富的運(yùn)營(yíng)工具，憑借強(qiáng)大的開(kāi)放能力，幫助B端商戶更好地運(yùn)營(yíng)；百度公司推出了百度智能小程序，憑借“搜索+信息流+AI”三駕馬車(chē)的強(qiáng)力拉動(dòng)，讓其有能力扮演好百度實(shí)現(xiàn)新連接的“管道工”角色；抖音平臺(tái)也推出了抖音小程序，抖音豐富的短視頻內(nèi)容和聚集紅人的超強(qiáng)能力，天然契合游戲、泛娛樂(lè)和電商類(lèi)小程序，抖音基于用戶興趣標(biāo)簽的內(nèi)容推薦機(jī)制，又能保證這類(lèi)小程序的分發(fā)和變現(xiàn)效率。原生App一般要同時(shí)開(kāi)發(fā)iOS和Android兩版，而小程序只需要做一版。毫無(wú)疑問(wèn)，這點(diǎn)是小程序最大的優(yōu)勢(shì)。從這個(gè)角度來(lái)看，小程序是“跨平臺(tái)”的。小程序經(jīng)過(guò)幾年的發(fā)展，逐漸成為與iOS、Android、公眾號(hào)、網(wǎng)站并行的流量入口。各個(gè)企業(yè)在發(fā)布自己的產(chǎn)品的時(shí)候，往往會(huì)發(fā)布iOS版、Android版、H5版、網(wǎng)站PC版、公眾號(hào)版、微信小程序版，都是作為產(chǎn)品流量的入口，并沒(méi)有出現(xiàn)誰(shuí)取代誰(shuí)的現(xiàn)象。但是小程序可以快速構(gòu)建出一個(gè)產(chǎn)品應(yīng)用，門(mén)檻低、成本低、發(fā)布快是各大企業(yè)制作小程序的原因。1.1.5微信小程序的發(fā)展歷程2016年1月9日，微信團(tuán)隊(duì)首次提出應(yīng)用號(hào)的概念。2016年9月22日，微信公眾平臺(tái)對(duì)外內(nèi)測(cè)。2016年11月3日，微信小程序?qū)ν夤珳y(cè)。2016年12月28日，張小龍?jiān)谖⑿殴_(kāi)課中解答外界對(duì)微信小程序的幾大疑惑，包括沒(méi)有應(yīng)用商店、沒(méi)有推送消息等。2016年12月30日，微信公眾平臺(tái)對(duì)外公告，上線的微信小程序最多可生成10000個(gè)帶參數(shù)的二維碼。2017年1月9日，微信小程序正式上線。2017年3月27日，個(gè)人開(kāi)發(fā)者可以申請(qǐng)小程序開(kāi)發(fā)和發(fā)布。2017年4月17日，小程序代碼包大小限制擴(kuò)大到2MB。2017年4月20日，騰訊公司發(fā)布公眾號(hào)關(guān)聯(lián)小程序新規(guī)則。2017年5月12日，騰訊公司發(fā)布“小程序數(shù)據(jù)助手”。2017年12月28日，微信更新的6.6.1版本開(kāi)放了小游戲。1.1.5微信小程序的發(fā)展歷程2018年1月18日，微信提供了電子化的侵權(quán)投訴渠道。2018年1月25日，微信團(tuán)隊(duì)在“微信公眾平臺(tái)”發(fā)布公告稱(chēng)“從移動(dòng)應(yīng)用分享至微信的小程序頁(yè)面，用戶訪問(wèn)時(shí)支持打開(kāi)來(lái)源應(yīng)用”。2018年3月，微信正式宣布小程序廣告組件啟動(dòng)內(nèi)測(cè)。2018年4月，通過(guò)公眾號(hào)文章可以打開(kāi)小程序、開(kāi)放微信小程序游戲接口。2018年5月，支持App打開(kāi)小程序。2018年6月，小程序支持打開(kāi)公眾號(hào)（關(guān)聯(lián)的公眾號(hào)）文章。2018年7月，品牌搜索開(kāi)放，推出品牌官方區(qū)和微主頁(yè)，任務(wù)欄出現(xiàn)“我的小程序”入口。2018年8月，微信小程序云開(kāi)發(fā)上線。2018年9月，微信“功能直達(dá)”功能正式開(kāi)放。2018年10月，小程序支持主體遷移。2019年8月，微信向開(kāi)發(fā)者發(fā)布新能力公測(cè)與更新公告。1.1.6微信小程序帶來(lái)的機(jī)會(huì)學(xué)會(huì)微信小程序開(kāi)發(fā)，就可以成為一名“小程序員”。例如，設(shè)計(jì)師、學(xué)生、創(chuàng)業(yè)者、待業(yè)青年、“網(wǎng)蟲(chóng)”、策劃人員、編輯、“草根”站長(zhǎng)等都可以轉(zhuǎn)作程序員。微信小程序給企業(yè)提供了流量入口，企業(yè)可以通過(guò)小程序推廣自己的產(chǎn)品。經(jīng)過(guò)騰訊公司的大力扶持，小程序已經(jīng)成為各個(gè)企業(yè)非?？粗氐牧髁咳肟?。目錄導(dǎo)航1.1微信小程序介紹1.2微信小程序開(kāi)發(fā)準(zhǔn)備1.3微信小程序開(kāi)發(fā)工具的使用1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建1.5小結(jié)1.2.1基礎(chǔ)技術(shù)準(zhǔn)備微信小程序自定義了一套語(yǔ)言，稱(chēng)為WXML微信標(biāo)記語(yǔ)言，它的使用方法類(lèi)似于HTML語(yǔ)言。另外，微信小程序還定義了自己的樣式語(yǔ)言WXSS，它兼容CSS樣式，并在CSS樣式的基礎(chǔ)上做了擴(kuò)展；使用JavaScript來(lái)進(jìn)行業(yè)務(wù)處理，兼容了大部分JavaScript功能，但仍有一些功能無(wú)法使用。所以有一定HTML、CSS、JavaScript技術(shù)功底的人學(xué)習(xí)微信小程序開(kāi)發(fā)會(huì)容易很多。1.2.2開(kāi)發(fā)準(zhǔn)備在微信公眾平臺(tái)中，選擇“小程序”→“小程序開(kāi)發(fā)文檔”，如圖所示，可以打開(kāi)幫助文檔界面，如圖所示。（1）在“微信公眾平臺(tái)”注冊(cè)微信開(kāi)發(fā)者賬號(hào)。1.2.2開(kāi)發(fā)準(zhǔn)備根據(jù)自己的操作系統(tǒng)，下載微信小程序的開(kāi)發(fā)工具，如圖所示（因?yàn)殚_(kāi)發(fā)工具版本更新很快，實(shí)際版本以讀者操作為準(zhǔn)）。（2）在文檔工具里1.2.2開(kāi)發(fā)準(zhǔn)備安裝完成后用微信掃描二維碼登錄。開(kāi)發(fā)工具提供了小程序項(xiàng)目和公眾號(hào)網(wǎng)頁(yè)項(xiàng)目?jī)蓚€(gè)調(diào)試類(lèi)型，如圖所示。（3）按照提示完成開(kāi)發(fā)工具的安裝目錄導(dǎo)航1.1微信小程序介紹1.2微信小程序開(kāi)發(fā)準(zhǔn)備1.3微信小程序開(kāi)發(fā)工具的使用1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建1.5小結(jié)1.3.1創(chuàng)建項(xiàng)目在開(kāi)發(fā)工具里單擊小程序圖標(biāo)，進(jìn)入小程序“新建項(xiàng)目”界面，可以添加一個(gè)新的項(xiàng)目。在這個(gè)界面里需要填寫(xiě)項(xiàng)目名稱(chēng)、目錄、AppID，如圖所示。1.3.1創(chuàng)建項(xiàng)目獲取微信小程序AppID，需要在“微信公眾平臺(tái)”中登錄1.2.2小節(jié)中注冊(cè)的賬戶，在“設(shè)置”→“開(kāi)發(fā)設(shè)置”中，查看微信小程序的AppID，如圖所示。注意：不可直接使用服務(wù)號(hào)或訂閱號(hào)的AppID，只能使用微信小程序的AppID。1.3.1創(chuàng)建項(xiàng)目獲取微信小程序AppID，需要在“微信公眾平臺(tái)”中登錄1.2.2小節(jié)中注冊(cè)的賬戶，在“設(shè)置”→“開(kāi)發(fā)設(shè)置”中，查看微信小程序的AppID，如圖所示。注意：不可直接使用服務(wù)號(hào)或訂閱號(hào)的AppID，只能使用微信小程序的AppID。注意：如果要以非管理員微信號(hào)在手機(jī)上體驗(yàn)該小程序，還需要綁定開(kāi)發(fā)者。即在“用戶身份”→“開(kāi)發(fā)者”模塊，綁定需要體驗(yàn)該小程序的微信號(hào)。1.3.1創(chuàng)建項(xiàng)目輸入AppID后，建立一個(gè)“demo”文件夾，并選擇為項(xiàng)目目錄，項(xiàng)目名稱(chēng)輸入“demo”，開(kāi)發(fā)模式選擇“小程序”，后端服務(wù)可以選擇“小程序·云開(kāi)發(fā)”或者“不使用云服務(wù)”，單擊“創(chuàng)建”按鈕即可，如圖所示。1.3.1創(chuàng)建項(xiàng)目“小程序·云開(kāi)發(fā)”和“不使用云服務(wù)”區(qū)別如下。（1）開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)須搭建服務(wù)器即可使用云端能力。（2）云開(kāi)發(fā)提供云函數(shù)、數(shù)據(jù)庫(kù)、存儲(chǔ)、云調(diào)用四大基礎(chǔ)功能。（3）如果沒(méi)有一個(gè)已經(jīng)備案過(guò)的域名和一臺(tái)云服務(wù)器，又想使項(xiàng)目快速上線，且對(duì)云存儲(chǔ)、云數(shù)據(jù)庫(kù)的要求不高，那么小程序云開(kāi)發(fā)非常適合，零開(kāi)發(fā)成本即可發(fā)布一款微信小程序。（4）如果日活用戶非常多，云開(kāi)發(fā)提供的云服務(wù)配置不夠用，又不想花費(fèi)過(guò)多進(jìn)行升級(jí)，那么使用小程序云開(kāi)發(fā)并不太合適。（5）創(chuàng)建項(xiàng)目的時(shí)候如果需要騰訊公司的小程序云開(kāi)發(fā)，就選擇“小程序·云開(kāi)發(fā)”選項(xiàng)，如果需要自己搭建服務(wù)器，可以選擇“不使用云服務(wù)”選項(xiàng)。1.3.2開(kāi)發(fā)者工具界面創(chuàng)建項(xiàng)目后，進(jìn)入微信開(kāi)發(fā)者工具界面。如圖所示。開(kāi)發(fā)者工具界面大致可以分為6個(gè)區(qū)域：1菜單欄區(qū)域；2模擬器、編輯器、調(diào)試器顯示與隱藏區(qū)域；3模擬器區(qū)域；4編輯器區(qū)域；5工具欄區(qū)域；6調(diào)試器區(qū)域。1.3.3菜單欄菜單欄中的菜單項(xiàng)集成了軟件的一些常規(guī)操作和功能使用?！绊?xiàng)目”菜單：包括新建項(xiàng)目、導(dǎo)入項(xiàng)目、打開(kāi)最近項(xiàng)目、新建代碼片段、導(dǎo)入代碼片段、查看所有項(xiàng)目、關(guān)閉當(dāng)前項(xiàng)目。這些命令都是對(duì)小程序項(xiàng)目或者代碼片段進(jìn)行管理使用的?！拔募辈藛危喊ㄐ陆ㄎ募⒈４?、保存所有、關(guān)閉文件。這些命令可以新建文件、關(guān)閉文件、保存文件?！熬庉嫛辈藛危菏菍?duì)代碼進(jìn)行管理的一個(gè)菜單，具有格式化代碼等功能?！肮ぞ摺辈藛危喊ň幾g、刷新、預(yù)覽、清除緩存等功能?！敖缑妗辈藛危河糜陲@示或者隱藏工具欄、模擬器、編輯器、目錄樹(shù)、調(diào)試器區(qū)域。“設(shè)置”菜單：包括通用設(shè)置、外觀設(shè)置、快捷鍵設(shè)置、編輯設(shè)置、代理設(shè)置、安全設(shè)置、項(xiàng)目設(shè)置?！皫椭辈藛危喊ㄎ臋n搜索、開(kāi)發(fā)者社區(qū)、開(kāi)發(fā)者文檔。“微信開(kāi)發(fā)者工具”菜單：包括對(duì)開(kāi)發(fā)者工具進(jìn)行升級(jí)、回退、退出等功能。1.3.4模擬器區(qū)域模擬器區(qū)域用來(lái)顯示小程序界面。在小程序開(kāi)發(fā)過(guò)程中，小程序界面隨著代碼編寫(xiě)可以實(shí)時(shí)變化，方便小程序的開(kāi)發(fā)和調(diào)試。同時(shí)模擬器可以模擬小程序在各個(gè)終端設(shè)備上的操作效果；可以設(shè)置小程序運(yùn)行的終端設(shè)備，如iPhone5、iPhone6等；可以設(shè)置模擬器區(qū)域的百分比大小；可以模擬設(shè)置Wi-Fi、2G、3G、4G等網(wǎng)絡(luò)情況，如圖所示。1.3.5編輯器區(qū)域編輯器區(qū)域分為兩部分：一部分用來(lái)展示項(xiàng)目文件目錄和文件結(jié)構(gòu)，另一部分用來(lái)進(jìn)行代碼編輯，如圖1.13所示。在項(xiàng)目目錄上單擊鼠標(biāo)右鍵可以新建目錄、Page、Component、JS、TS、JSON、WXML、WXSS、WXS文件，對(duì)文件目錄及文件進(jìn)行重命名、刪除、查找、硬盤(pán)打開(kāi)、在終端中打開(kāi)等操作，如圖1.13所示。01OPTION圖1.12編輯器區(qū)域圖1.13文件操作1.3.5編輯器區(qū)域在代碼編輯區(qū)域里編寫(xiě)代碼，可以通過(guò)模擬器區(qū)域?qū)崟r(shí)預(yù)覽編輯的情況，如右圖所示。02OPTION1.3.5編輯器區(qū)域在代碼編寫(xiě)過(guò)程中，開(kāi)發(fā)工具提供自動(dòng)補(bǔ)全功能，如右圖所示。03OPTION開(kāi)發(fā)工具提供自動(dòng)保存功能。04OPTION1.3.6調(diào)試器區(qū)域用來(lái)顯示小程序的錯(cuò)誤輸出信息和調(diào)試代碼，除了可以輸出錯(cuò)誤信息，還可以進(jìn)行代碼編寫(xiě)和調(diào)試，如圖所示。（1）“Console”窗口小程序的常用調(diào)試工具有Console、Sources、Network、Storage、AppData、Wxml。（2）“Sources”窗口用于顯示當(dāng)前項(xiàng)目的腳本文件。在Sources中開(kāi)發(fā)者看到的文件是經(jīng)過(guò)處理之后的腳本文件，開(kāi)發(fā)者的代碼都會(huì)被包裹在define函數(shù)中，并且對(duì)于Page代碼，有require的主動(dòng)調(diào)用，如圖1.17所示。1.3.6調(diào)試器區(qū)域用來(lái)觀察發(fā)送的請(qǐng)求和調(diào)用文件的信息，包括文件名稱(chēng)、調(diào)用的狀態(tài)、大小、時(shí)間等，如圖1.18所示。（3）“Network”窗口用于顯示當(dāng)前項(xiàng)目使用wx.setStorage或者wx.setStorageSync后的數(shù)據(jù)存儲(chǔ)情況，如圖1.19所示。（4）“Storage”窗口1.3.6調(diào)試器區(qū)域用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻的具體數(shù)據(jù)，實(shí)時(shí)地反饋?lái)?xiàng)目數(shù)據(jù)情況。用戶可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖1.20所示。（5）“AppData”窗口用于幫助開(kāi)發(fā)者開(kāi)發(fā)Wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁(yè)面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的WXSS屬性，同時(shí)可以修改對(duì)應(yīng)的WXSS屬性，如圖1.21所示。（6）“Wxml”窗口1.3.7工具欄區(qū)域通過(guò)“編譯”按鈕組合鍵Ctrl+B編譯當(dāng)前小程序代碼，并自動(dòng)刷新模擬器。為了方便調(diào)試，開(kāi)發(fā)者還可以添加或選擇已有的自定義編譯條件進(jìn)行編譯和代碼預(yù)覽，如圖所示。1.編譯操作單擊“預(yù)覽”按鈕，可以將小程序上傳，生成二維碼，通過(guò)掃描二維碼可以在手機(jī)上預(yù)覽小程序，如圖所示。2.預(yù)覽1.3.7工具欄區(qū)域單擊“真機(jī)調(diào)試”按鈕，生成二維碼，可以在手機(jī)上進(jìn)行代碼調(diào)試，手機(jī)界面如圖1.24所示。也可以查看頁(yè)面布局及請(qǐng)求情況，如圖1.25所示。3.真機(jī)調(diào)試圖1.25查看頁(yè)面布局及請(qǐng)求圖1.24手機(jī)界面1.3.7工具欄區(qū)域工具欄中的“切前/后臺(tái)”按鈕可以幫助開(kāi)發(fā)者模擬一些客戶端的環(huán)境操作。例如，突然進(jìn)來(lái)電話，如果接電話，小程序就會(huì)從前臺(tái)進(jìn)入后臺(tái)，重新訪問(wèn)小程序時(shí)，又會(huì)從后臺(tái)進(jìn)入前臺(tái)，如圖所示。4.前后臺(tái)切換清緩存包括清除數(shù)據(jù)緩存、清除文件緩存、清除編譯緩存、清除授權(quán)數(shù)據(jù)、清除網(wǎng)絡(luò)緩存、清除登錄狀態(tài)、全部清除7個(gè)功能，如圖1.27所示。5.清緩存1.3.7工具欄區(qū)域小程序開(kāi)發(fā)完成后，需要上傳到騰訊服務(wù)器進(jìn)行版本發(fā)布，如圖1.28所示。6.上傳1.3.8常用快捷鍵Ctrl+S：保存文件。Ctrl+[，Ctrl+]：代碼行往左、往右縮進(jìn)。Ctrl+Shift+[，Ctrl+Shift+]：折疊、打開(kāi)代碼塊。Ctrl+C，Ctrl+V：復(fù)制、粘貼。如果沒(méi)有選中任何文字，則復(fù)制、粘貼一行。Shift+Alt+F：代碼格式化。Alt+Up，Alt+Down：向上或向下移動(dòng)一行。Shift+Alt+Up，Shift+Alt+Down：向上或向下復(fù)制一行。Ctrl+Shift+Enter：在當(dāng)前行上方插入一行。Ctrl+Shift+F：全局搜索。Ctrl+B：可以編譯當(dāng)前代碼，并自動(dòng)刷新模擬器。1.格式調(diào)整快捷鍵Ctrl+End：移動(dòng)到文件結(jié)尾。Ctrl+Home：移動(dòng)到文件開(kāi)頭。Ctrl+I：選中當(dāng)前行。Shift+End：選擇從光標(biāo)到行尾。Shift+Home：選擇從行首到光標(biāo)處。Ctrl+Shift+L：選中所有匹配。Ctrl+D：選中匹配。Ctrl+U：光標(biāo)回退。2.光標(biāo)相關(guān)快捷鍵Ctrl+\：隱藏側(cè)邊欄。Ctrl+m：打開(kāi)或者隱藏模擬器。3.界面相關(guān)快捷鍵目錄導(dǎo)航1.1微信小程序介紹1.2微信小程序開(kāi)發(fā)準(zhǔn)備1.3微信小程序開(kāi)發(fā)工具的使用1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建1.5小結(jié)1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建在創(chuàng)建項(xiàng)目之后，開(kāi)發(fā)工具會(huì)添加默認(rèn)的目錄和頁(yè)面。在默認(rèn)的頁(yè)面上，可以看到有“HelloWorld”文字，如圖1.29所示。圖1.29

HelloWorld界面在pages/index/index.js文件里，Page的data里提供了數(shù)據(jù)源motto，data的數(shù)據(jù)可以動(dòng)態(tài)地綁定到WXML頁(yè)面中，如圖1.30所示。步驟一：圖1.30

motto數(shù)據(jù)源1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建在pages/index/index.wxml文件里，通過(guò)雙大括號(hào)（{{}}）的方式，將motto綁定到頁(yè)面里，如圖1.31所示，motto對(duì)應(yīng)的值就可以在頁(yè)面里顯示出來(lái)。步驟二：圖1.31綁定motto在pages/index/index.wxss文件里，通過(guò)class的方式給HelloWorld添加樣式，距頂部的高度為200px，如圖1.32所示。步驟三：圖1.32添加樣式目錄導(dǎo)航1.1微信小程序介紹1.2微信小程序開(kāi)發(fā)準(zhǔn)備1.3微信小程序開(kāi)發(fā)工具的使用1.4沙場(chǎng)大練兵：HelloWorld的創(chuàng)建1.5小結(jié)小結(jié)本章主要介紹了微信小程序和開(kāi)發(fā)工具的使用，學(xué)習(xí)者應(yīng)重點(diǎn)掌握以下內(nèi)容。briefsummary（1）了解微信小程序是什么，其功能、使用場(chǎng)景、發(fā)展歷程及帶來(lái)的機(jī)會(huì)。（2）做好微信小程序開(kāi)發(fā)前的準(zhǔn)備工作，包括基礎(chǔ)技術(shù)準(zhǔn)備和開(kāi)發(fā)賬號(hào)、文檔、開(kāi)發(fā)工具的準(zhǔn)備。（3）學(xué)會(huì)微信小程序開(kāi)發(fā)工具的使用，會(huì)添加項(xiàng)目，了解開(kāi)發(fā)者工具界面，會(huì)使用菜單欄、模擬器區(qū)域、編輯器區(qū)域、調(diào)試器區(qū)域、工具欄區(qū)域等。（4）記住微信小程序常用的一些快捷鍵，以提高開(kāi)發(fā)效率。（5）熟悉微信小程序的開(kāi)發(fā)流程。單元1站點(diǎn)創(chuàng)建與制作商品簡(jiǎn)介頁(yè)面HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程學(xué)習(xí)快樂(lè)！第2章微信小程序框架分析微信小程序開(kāi)發(fā)圖解案例教程（第3版）微信小程序框架，是我們?cè)谶M(jìn)行微信小程序開(kāi)發(fā)前必須理解的內(nèi)容。微信小程序框架可以讓開(kāi)發(fā)者在微信中通過(guò)簡(jiǎn)單、高效的方式開(kāi)發(fā)具有原生App體驗(yàn)的服務(wù)。微信小程序框架分為邏輯層和視圖層，邏輯層用來(lái)處理業(yè)務(wù)邏輯，而視圖層用來(lái)渲染頁(yè)面。視圖層描述語(yǔ)言WXML和視圖樣式WXSS，再加上JavaScript邏輯層語(yǔ)言和JSON配置文件，一同構(gòu)筑起了微信小程序框架。本章我們一起來(lái)分析微信小程序的框架。本章導(dǎo)讀Thechapter’sintroduction目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.1.1框架全局文件框架全局文件必須放在項(xiàng)目的根目錄中?？蚣苋治募?duì)所有頁(yè)面都有效，如表2.1所示。表2.1框架全局文件文件是否必填作用app.js是裝載小程序邏輯app.json是裝載小程序公共設(shè)置app.wxss否裝載小程序公共樣式project.config.json是裝載小程序項(xiàng)目個(gè)性化配置sitemap.json是配置小程序及其頁(yè)面是否允許被微信索引2.1.1框架全局文件1.app.js小程序邏輯文件app.js文件用來(lái)定義全局?jǐn)?shù)據(jù)和函數(shù)的使用，可以指定微信小程序的生命周期函數(shù)。生命周期函數(shù)可以理解為微信小程序自己定義的函數(shù)，如onLaunch（監(jiān)聽(tīng)小程序初始化）、onShow（監(jiān)聽(tīng)小程序顯示）、onHide（監(jiān)聽(tīng)小程序隱藏）等。不同階段不同場(chǎng)景可以使用不同的生命周期函數(shù)。app.js文件中還可以定義一些全局函數(shù)和數(shù)據(jù)，其他頁(yè)面引用app.js文件后就可以直接使用，如圖所示。2.1.1框架全局文件2.app.json小程序公共設(shè)置文件app.json文件可以對(duì)常用的功能進(jìn)行設(shè)置：配置頁(yè)面路徑、配置窗口表現(xiàn)、配置標(biāo)簽導(dǎo)航、配置網(wǎng)絡(luò)超時(shí)、啟用新版組件樣式、配置debug模式、配置跳轉(zhuǎn)的小程序列表。具體如圖所示。2.1.1框架全局文件3.app.wxss小程序公共樣式表app.wxss文件對(duì)CSS樣式進(jìn)行了擴(kuò)展。它和CSS的使用方式一樣，寫(xiě)法兼容大部分CSS樣式。app.wxss文件還形成了自己的風(fēng)格，即對(duì)所有頁(yè)面定義的一個(gè)全局樣式。只要頁(yè)面有全局樣式里的class，就可以渲染全局樣式里的效果；但如果頁(yè)面又重新定義了這個(gè)class樣式，則會(huì)把全局樣式覆蓋掉，使用自己的樣式。小程序公共樣式表如圖2.10所示。2.1.1框架全局文件4.project.config.json小程序項(xiàng)目個(gè)性化配置重新安裝工具或者換計(jì)算機(jī)工作時(shí)，用戶只要載入同一個(gè)項(xiàng)目的代碼包，開(kāi)發(fā)者工具就會(huì)自動(dòng)恢復(fù)到當(dāng)時(shí)開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等一系列選項(xiàng)。配置如下。{"description":"項(xiàng)目配置文件","packOptions":{"ignore":[]},"setting":{"urlCheck":true,"es6":true,"postcss":true,"minified":true,"compileType":"miniprogram","libVersion":"2.9.4","appid":"wxa7730e0596be9404","projectname":"demo","newFeature":true,"autoAudits":false,"coverView":true,"showShadowRootInWxmlPanel":true,"scopeDataCheck":false},2.1.1框架全局文件"debugOptions":{"hidedInDevtools":[]},"isGameTourist":false,"simulatorType":"wechat","simulatorPluginLibVersion":{},"condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}2.1.1框架全局文件5.sitemap.json小程序及其頁(yè)面是否允許被微信索引小程序根目錄下的sitemap.json文件用于配置小程序及其頁(yè)面是否允許被微信索引，文件內(nèi)容為一個(gè)JSON對(duì)象。如果沒(méi)有sitemap.json文件，則默認(rèn)為所有頁(yè)面都允許被索引。配置示例如下。{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exact"},{"action":"disallow","page":"path/to/page"}]}matching匹配規(guī)則說(shuō)明如下。（1）exact：當(dāng)小程序頁(yè)面的參數(shù)列表等于params時(shí)，規(guī)則命中索引。（2）inclusive：當(dāng)小程序頁(yè)面的參數(shù)列表包含params時(shí)，規(guī)則命中索引。（3）exclusive：當(dāng)小程序頁(yè)面的參數(shù)列表與params交集為空時(shí)，規(guī)則命中索引。（4）partial：當(dāng)小程序頁(yè)面的參數(shù)列表與params交集不為空時(shí)，規(guī)則命中索引。（1）path/to/page?a=1&b=2→優(yōu)先索引。（2）path/to/page→不被索引。（3）path/to/page?a=1→不被索引。（4）path/to/page?a=1&b=2&c=3→不被索引。（5）其他頁(yè)面都會(huì)被索引。2.1.2工具類(lèi)文件在微信小程序框架目錄里有一個(gè)utils文件夾，它用來(lái)存放工具欄的JavaScript函數(shù)。圖2.11所示為時(shí)間格式化工具類(lèi)。圖2.11時(shí)間格式化工具類(lèi)2.1.3框架頁(yè)面文件微信小程序的框架頁(yè)面文件都放置在pages文件夾下面，如圖2.12所示。表2.2框架頁(yè)面文件文件類(lèi)型是否必填作用JS是頁(yè)面邏輯JSON否頁(yè)面配置WXML是頁(yè)面結(jié)構(gòu)WXS否小程序腳本語(yǔ)言WXSS否頁(yè)面樣式表圖2.12頁(yè)面文件2.1.4小試牛刀：制作“貓眼電影”底部標(biāo)簽導(dǎo)航“貓眼電影”底部標(biāo)簽導(dǎo)航有4個(gè)標(biāo)簽：電影、影院、發(fā)現(xiàn)、我的，如左圖所示（實(shí)例位置：源碼\第2章\movie）。新建一個(gè)“movie”項(xiàng)目，后端服務(wù)選擇“不使用云服務(wù)”，如圖所示。步驟一：添加項(xiàng)目2.1.4小試牛刀：制作“貓眼電影”底部標(biāo)簽導(dǎo)航打開(kāi)app.json配置文件，在pages數(shù)組里添加4個(gè)頁(yè)面路徑——電影“pages/movie/movie”、影院“pages/cinema/cinema”、發(fā)現(xiàn)“pages/find/find”、我的“pages/me/me”，保存后會(huì)自動(dòng)生成相應(yīng)的頁(yè)面文件夾；刪除“pages/index/index”“pages/logs/logs”頁(yè)面路徑及對(duì)應(yīng)的文件夾，如圖所示。步驟二：將準(zhǔn)備好的底部標(biāo)簽導(dǎo)航圖標(biāo)復(fù)制到“movie”項(xiàng)目下面。步驟三：配置頁(yè)面路徑2.1.4小試牛刀：制作“貓眼電影”底部標(biāo)簽導(dǎo)航在window數(shù)組里配置窗口導(dǎo)航背景顏色為紅色（#D53E37），導(dǎo)航欄文字為“電影”，文字顏色為白色（white）。具體配置如圖所示。步驟四：窗口及導(dǎo)航欄配置步驟五：底部標(biāo)簽導(dǎo)航配置在tabBar對(duì)象里配置底部標(biāo)簽導(dǎo)航背景色為灰色（#f5f5f5），文字默認(rèn)顏色為白色（white），選中時(shí)為紅色（#D53E37）；在list數(shù)組里配置底部標(biāo)簽導(dǎo)航對(duì)應(yīng)的頁(yè)面、導(dǎo)航名稱(chēng)、默認(rèn)時(shí)的圖標(biāo)、選中時(shí)的圖標(biāo)。具體配置如圖所示。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.2微信小程序注冊(cè)程序的應(yīng)用app.js文件不光可以定義全局函數(shù)和數(shù)據(jù)，還可以注冊(cè)小程序。用戶可以在App()函數(shù)里完成小程序的注冊(cè)并指定其生命周期函數(shù)。表2.3所示為生命周期函數(shù)的屬性。屬性類(lèi)型描述觸發(fā)時(shí)機(jī)onLaunchfunction監(jiān)聽(tīng)小程序初始當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā)onLaunch（全局只觸發(fā)一次）onShowfunction監(jiān)聽(tīng)小程序顯示當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)，會(huì)觸發(fā)onShowonHidefunction監(jiān)聽(tīng)小程序隱藏當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)，會(huì)觸發(fā)onHideonErrorfunction錯(cuò)誤監(jiān)聽(tīng)函數(shù)當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者API調(diào)用失敗時(shí)，會(huì)觸發(fā)onError并附帶錯(cuò)誤信息onPageNotFoundfunction頁(yè)面不存在監(jiān)聽(tīng)函數(shù)當(dāng)小程序中出現(xiàn)要打開(kāi)的頁(yè)面不存在的情況時(shí)，會(huì)附帶頁(yè)面信息回調(diào)該函數(shù)其他any

開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中。用this可以使用表2.3生命周期函數(shù)的屬性2.2微信小程序注冊(cè)程序的應(yīng)用onLaunch生命周期函數(shù)，用來(lái)監(jiān)聽(tīng)小程序初始化。onShow生命周期函數(shù)，用來(lái)監(jiān)聽(tīng)小程序顯示。onHide生命周期函數(shù)，用來(lái)監(jiān)聽(tīng)小程序隱藏。onError生命周期函數(shù)，用來(lái)監(jiān)聽(tīng)小程序腳本或者API是否發(fā)生錯(cuò)誤。onPageNotFound生命周期函數(shù)，當(dāng)要打開(kāi)的頁(yè)面不存在時(shí)，會(huì)回調(diào)這個(gè)監(jiān)聽(tīng)函數(shù)。示例代碼如下。App({onLaunch:function(){//當(dāng)小程序顯示時(shí)做一些事情

},onShow:function(){//當(dāng)小程序顯示時(shí)做一些事情

},onHide:function(){//當(dāng)小程序隱藏時(shí)做一些事情

},onError:function(msg){console.log(msg)},globalData:'Iamglobaldata'})2.2微信小程序注冊(cè)程序的應(yīng)用可以在頁(yè)面里調(diào)用app.js文件全局?jǐn)?shù)據(jù)。在頁(yè)面的JS文件里，按如下方法就可以調(diào)用全局?jǐn)?shù)據(jù)globalData。varAppInstance=getApp()console.log(AppInstance.globalData)小程序不僅可以調(diào)用全局?jǐn)?shù)據(jù)，還可以調(diào)用用戶自定義的全局函數(shù)，但是不能調(diào)用生命周期函數(shù)。注意：（1）App()必須在app.js文件中注冊(cè)，且不能注冊(cè)多個(gè)。（2）不要在定義于App()內(nèi)的函數(shù)中調(diào)用getApp()，使用this就可以獲取App實(shí)例。（3）不要在onLaunch小程序初始化完成時(shí)調(diào)用getCurrentPage()，此時(shí)頁(yè)面還沒(méi)有生成。（4）通過(guò)getApp()獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.3.1頁(yè)面初始化數(shù)據(jù)data為頁(yè)面初始化數(shù)據(jù)。初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data將會(huì)以JSON的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串、數(shù)字、布爾值、對(duì)象或數(shù)組。渲染界面可以通過(guò)WXML對(duì)數(shù)據(jù)進(jìn)行綁定。<textclass="user-motto">{{motto}}</text>Page({data:{motto:'HelloWorld',userInfo:{}}})示例代碼如下。2.3.2生命周期函數(shù)微信小程序在JS文件里定義了生命周期函數(shù)，不同的生命周期函數(shù)有不同的使用效果。onLoad（頁(yè)面加載）：一個(gè)頁(yè)面只會(huì)調(diào)用一次，接收頁(yè)面參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的query。onShow（頁(yè)面顯示）：每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。onReady（頁(yè)面初次渲染完成）：一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。對(duì)界面的設(shè)置（如wx.setNavigationBarTitle）請(qǐng)?jiān)趏nReady之后進(jìn)行。onHide（頁(yè)面隱藏）：當(dāng)調(diào)用navigateTo或底部tab切換時(shí)調(diào)用。onUnload（頁(yè)面卸載）：當(dāng)調(diào)用redirectTo或navigateBack的時(shí)候調(diào)用。2.3.3頁(yè)面相關(guān)事件處理函數(shù)onPullDownRefresh（下拉刷新事件）：監(jiān)聽(tīng)用戶下拉刷新事件。onReachBottom（上拉觸底事件）：可以在app.json文件的window選項(xiàng)中或頁(yè)面配置中設(shè)置觸發(fā)距離onReachBottomDistance。onPageScroll（頁(yè)面滾動(dòng)事件）：監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件。onResize（頁(yè)面尺寸事件）：頁(yè)面尺寸發(fā)生改變的事件。微信小程序定義了以下常用的事件處理函數(shù)。Page({onResize(res){res.size.windowWidth //新的顯示區(qū)域?qū)挾?/p>

res.size.windowHeight //新的顯示區(qū)域高度

}})示例代碼如下。2.3.3頁(yè)面相關(guān)事件處理函數(shù)onShareAppMessage（用戶分享轉(zhuǎn)發(fā)）：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕。用戶點(diǎn)擊“轉(zhuǎn)發(fā)”按鈕的時(shí)候會(huì)調(diào)用此函數(shù)。此事件需要返回一個(gè)object參數(shù)，用于自定義分享轉(zhuǎn)發(fā)內(nèi)容。object參數(shù)的說(shuō)明如表2.5所示。字段說(shuō)明默認(rèn)值title轉(zhuǎn)發(fā)標(biāo)題當(dāng)前小程序名稱(chēng)imageUrl自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑。支持PNG及JPG。顯示圖片長(zhǎng)寬比是5

:

4使用默認(rèn)截圖path轉(zhuǎn)發(fā)路徑當(dāng)前頁(yè)面路徑。必須是以/開(kāi)頭的完整路徑表2.5用戶分享object參數(shù)2.3.3頁(yè)面相關(guān)事件處理函數(shù)示例代碼如下。Page({onShareAppMessage:function(res){return{title:'自定義分享標(biāo)題',imageUrl:'自定義圖片路徑',path:'/page/user?id=123'}}})onTabItemTap（點(diǎn)擊tab頁(yè)事件）：當(dāng)前是tab頁(yè)時(shí)，用戶點(diǎn)擊tab時(shí)觸發(fā)。object參數(shù)的說(shuō)明如表2.6所示。2.3.3頁(yè)面相關(guān)事件處理函數(shù)表2.6點(diǎn)擊tab頁(yè)object參數(shù)字段類(lèi)型說(shuō)明indexstring被點(diǎn)擊的底部標(biāo)簽導(dǎo)航菜單的序號(hào)，從0開(kāi)始pagePathstring被點(diǎn)擊的底部標(biāo)簽導(dǎo)航菜單的頁(yè)面路徑textstring被點(diǎn)擊的底部標(biāo)簽導(dǎo)航菜單的按鈕文字Page({onTabItemTap(item){console.log(item.index)console.log(item.pagePath)console.log(item.text)}})示例代碼如下。2.3.4頁(yè)面路由管理路由的觸發(fā)方式及頁(yè)面生命周期函數(shù)如表2.7所示。頁(yè)面路由方式觸發(fā)時(shí)機(jī)路由后頁(yè)面路由前頁(yè)面初始化小程序打開(kāi)的第一個(gè)頁(yè)面onLoad，onShow

打開(kāi)新頁(yè)面調(diào)用APIwx.navigateTo或使用組件<navigatoropen-type="navigate"/>onLoad，onShowonHide頁(yè)面重定向調(diào)用APIwx.redirectTo或使用組件<navigatoropen-type="redirect"/>onLoad，onShowonUnload頁(yè)面返回調(diào)用APIwx.navigateBack或用戶按左上角返回按鈕onShowonUnload（多層頁(yè)面返回時(shí)每個(gè)頁(yè)面都會(huì)按順序觸發(fā)onUnload）tab切換調(diào)用APIwx.switchTab或使用組件<navigatoropen-type="switchTab"/>或用戶切換Tab

重啟動(dòng)調(diào)用APIwx.reLaunch或使用組件<navigatoropen-type="reLaunch"/>OnLoad，onShowonUnload2.3.5自定義函數(shù)除了初始化數(shù)據(jù)和生命周期函數(shù)，在Page中還可以定義一些特殊的函數(shù)，如事件處理函數(shù)。在渲染層的組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行Page中定義的事件處理函數(shù)。<viewbindtap="clickMe">clickme</view>Page({clickMe:function(){console.log('viewtap')}})示例代碼如下。2.3.6

setData設(shè)值函數(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。示例代碼如下。<!--index.wxml--><view>{{text}}</view><buttonbindtap="changeText">Changenormaldata</button><view>{{array[0].text}}</view><buttonbindtap="changeItemInArray">ChangeArraydata</button><view>{{object.text}}</view><buttonbindtap="changeItemInObject">ChangeObjectdata</button><view>{{newField.text}}</view><buttonbindtap="addNewField">Addnewdata</button>//index.jsPage({data:{text:'initdata',array:[{text:'initdata'}],object:{text:'initdata'}},2.3.6

setData設(shè)值函數(shù)changeText:function(){//this.data.text='changeddata'這種方式賦值不起作用

this.setData({text:'changeddata'})},changeItemInArray:function(){//可以用這種方式動(dòng)態(tài)修改數(shù)據(jù)

this.setData({'array[0].text':'changeddata'})},changeItemInObject:function(){this.setData({'object.text':'changeddata'});},addNewField:function(){this.setData({'newField.text':'newdata'})}})注意：直接修改this.data無(wú)效，不僅無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。單次設(shè)置的數(shù)據(jù)不能超過(guò)1MB。請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。不要把data中任何一項(xiàng)的value設(shè)為undefined，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問(wèn)題（僅支持設(shè)置可JSON化的數(shù)據(jù)）。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.4.1組件屬性綁定組件屬性綁定是將data里的數(shù)據(jù)綁定到微信小程序的組件上<viewid="item-{{id}}"></view>Page({data:{id:0}})示例代碼如下。2.4.2控制屬性綁定控制屬性綁定用來(lái)進(jìn)行if語(yǔ)句條件判斷，如果滿足條件，則執(zhí)行；否則不執(zhí)行。<viewwx:if="{{condition}}"></view>Page({data:{condition:true}})示例代碼如下。2.4.3關(guān)鍵字綁定關(guān)鍵字綁定常用于組件的一些關(guān)鍵字。如復(fù)選框組件，checked關(guān)鍵字如果等于true，則代表選中復(fù)選框；如果等于false，則代表不選中復(fù)選框。<checkboxchecked="{{false}}"></checkbox>示例代碼如下。不要直接寫(xiě)checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類(lèi)型后代表真值。2.4.4運(yùn)算可以在{{}}內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，小程序支持以如下幾種方式進(jìn)行運(yùn)算。<viewhidden="{{flag?true:false}}">Hidden</view>1.三元運(yùn)算<view>{{a+b}}+{{c}}+d</view>Page({data:{a:1,b:2,c:3}})2.數(shù)學(xué)運(yùn)算view中的內(nèi)容為3+3+d。2.4.4運(yùn)算<viewwx:if="{{length>5}}"></view>3.邏輯判斷<view>{{"hello"+name}}</view>Page({data:{name:'MINA'}})4.字符串運(yùn)算<view>{{object.key}}{{array[0]}}</view>Page({data:{object:{key:'Hello'},array:['MINA']}})5.數(shù)據(jù)路徑運(yùn)算2.4.5小試牛刀：天氣微信小程序創(chuàng)建一個(gè)天氣“weather”項(xiàng)目，如左圖所示。步驟一：創(chuàng)建“weather”項(xiàng)目天氣微信小程序，用來(lái)顯示溫度、最低溫度、最高溫度及其他天氣情況，如右圖所示。下面我們通過(guò)數(shù)據(jù)綁定的方式來(lái)顯示天氣情況（實(shí)例位置：源碼\第2章\weather）。2.4.5小試牛刀：天氣微信小程序進(jìn)入index.wxml、index.js、index.wxss文件，清空所有的內(nèi)容，進(jìn)入app.json文件，修改導(dǎo)航欄標(biāo)題為“中國(guó)天氣網(wǎng)”。步驟二：進(jìn)入index.wxml文件，進(jìn)行當(dāng)天天氣情況的界面布局，包括溫度、最低溫和最高溫、天氣情況、城市、星期、風(fēng)向情況。代碼如下。步驟三：<viewclass="content"><viewclass="today"><viewclass="info"><viewclass="temp">℃</view><viewclass="lowhigh"></view><viewclass="type"></view><viewclass="city"></view><viewclass="week"></view><viewclass="weather"></view></view></view></view>2.4.5小試牛刀：天氣微信小程序進(jìn)入index.js文件，在data里提供天氣的數(shù)據(jù)，讓這些數(shù)據(jù)在界面里顯示出來(lái)。

代碼如下。步驟四：Page({data:{temp:"4",low:"-1℃",high:"10℃",type:"晴",city:"北京",week:"星期二",weather:"無(wú)持續(xù)風(fēng)向微風(fēng)級(jí)"}})進(jìn)入index.wxml文件，將data里提供天氣情況的數(shù)據(jù)綁定到頁(yè)面里。步驟五：2.4.5小試牛刀：天氣微信小程序代碼如下。<viewclass="content"><viewclass="today"><viewclass="info"><viewclass="temp">{{temp}}℃</view><viewclass="lowhigh">{{low}}/{{high}}</view><viewclass="type">{{type}}</view><viewclass="city">{{city}}</view><viewclass="week">{{week}}</view><viewclass="weather">{{weather}}</view></view></view></view>天氣情況界面效果如圖2.21所示。2.4.5小試牛刀：天氣微信小程序.content{font-family:微軟雅黑,宋體;font-size:14px;background-size:cover;height:100%;width:100%;color:#333333;}.today{padding-top:70rpx;height:50%;}.temp{font-size:80px;text-align:center;}進(jìn)入index.wxss文件，為index.wxml文件添加樣式，美化頁(yè)面。代碼如下。步驟六：.city{font-size:20px;text-align:center;margin-top:20rpx;margin-right:10rpx;}.lowhigh{font-size:12px;text-align:center;margin-top:30rpx;}.type{font-size:16px;text-align:center;margin-top:30rpx;}.week{font-size:12px;text-align:center;margin-top:30rpx;}.weather{font-size:12px;text-align:center;margin-top:20rpx;}添加樣式后的界面效果如圖2.22所示。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.5.1

wx:if判斷單個(gè)組件在微信小程序框架里，使用wx:if="{{condition}}"來(lái)判斷是否需要渲染該代碼塊。示例代碼如下。<viewwx:if="{{condition}}">True</view>使用wx:elif和wx:else來(lái)添加一個(gè)else塊。<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>2.5.2

blockwx:if判斷多個(gè)組件wx:if是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。但是如果我們想一次性判斷多個(gè)組件標(biāo)簽，就可以使用一個(gè)<block/>標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上面使用wx:if控制屬性。示例代碼如下。<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block><block/>并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.6.1

wx:for列表渲染單個(gè)組件在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。數(shù)組當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item。示例代碼如下。<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view><viewwx:for="{{array}}">{{index}}:{{item.message}}</view>Page({data:{使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名。示例代碼如下。array:[{message:'foo',},{message:'bar'}]}})2.6.2

blockwx:for列表渲染多個(gè)組件wx:for應(yīng)用在某一個(gè)組件上，如果想渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊，wx:for需要應(yīng)用在<block/>標(biāo)簽上。示例代碼如下。<blockwx:for="{{[1,2,3]}}"><view>{{index}}:</view><view>{{item}}</view></block>2.6.3

wx:key指定唯一標(biāo)識(shí)符如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如<input/>中的輸入內(nèi)容，<switch/>的選中狀態(tài)），需要使用wx:key來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。wx:key的值以如下兩種形式提供。字符串保留關(guān)鍵字示例代碼如下。<switchwx:for="{{objectArray}}"wx:key="unique"style="display:block;">{{item.id}}</switch>Page({data:{objectArray:[{id:5,unique:'unique_5'}, {id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},]}}2.6.3

wx:key指定唯一標(biāo)識(shí)符如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如<input/>中的輸入內(nèi)容，<switch/>的選中狀態(tài)），需要使用wx:key來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。wx:key的值以如下兩種形式提供。字符串保留關(guān)鍵字示例代碼如下。<switchwx:for="{{objectArray}}"wx:key="unique"style="display:block;">{{item.id}}</switch>Page({data:{objectArray:[{id:5,unique:'unique_5'},{id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},]}}注意：如不提供wx:key，會(huì)報(bào)一個(gè)warning。如果明確知道該列表是靜態(tài)的，或者不必關(guān)注其順序，可以選擇忽略。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.7.1定義模板在<template/>內(nèi)定義代碼片段，使用name屬性作為模板的名字。示例代碼如下。<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>2.7.2使用模板在WXML文件里，使用is屬性聲明需要使用的模板，然后將模板所需要的data傳入。示例代碼如下。<templateis="msgItem"data="{{item}}"/>Page({data:{item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})<templatename="odd"><view>odd</view></template><templatename="even"><view>even</view></template><blockwx:for="{{[1,2,3,4,5]}}"><templateis="{{item%2==0?'even':'odd'}}"/></block>is屬性可以使用三元運(yùn)算語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.8.1

import引用<!--item.wxml--><templatename="item"><text>{{text}}</text></template>import可以在該文件中使用目標(biāo)文件定義的template。例如在item.wxml文件中定義了一個(gè)叫item的template，示例代碼如下。在index.wxml文件中引用了item.wxml文件，就可以使用item模板。示例代碼如下。<importsrc="item.wxml"/><templateis="item"data="{{text:'forbar'}}"/>2.8.2

include引用<!--index.wxml--><includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/><!--header.wxml--><view>header</view><!--footer.wxml--><view>footer</view>include可以將目標(biāo)文件除<template/>之外的整個(gè)代碼引入，相當(dāng)于是復(fù)制到include位置。示例代碼如下。目錄導(dǎo)航2.1微信小程序目錄結(jié)構(gòu)介紹2.3微信小程序注冊(cè)頁(yè)面的使用2.5微信小程序條件渲染2.6微信小程序列表渲染2.2微信小程序注冊(cè)程序的應(yīng)用2.4微信小程序如何綁定數(shù)據(jù)2.7微信小程序定義模板2.8微信小程序的引用功能2.9

WXS小程序腳本語(yǔ)言2.10微信小程序WXSS樣式渲染2.11沙場(chǎng)大練兵：仿“香哈菜譜”微信小程序2.12小結(jié)2.9.1模塊化WXS小程序腳本語(yǔ)言是以模塊化的形式存在的。在一個(gè)模塊里面定義的變量與函數(shù)，默認(rèn)為私有的，對(duì)其他模塊不可見(jiàn)。一個(gè)模塊要想對(duì)外暴露其內(nèi)部的私有變量與函數(shù)，只能通過(guò)module.exports實(shí)現(xiàn)。///pages/comm.wxsvarfoo="'helloworld'fromcomm.wxs";varbar=function(d){returnd;}module.exports={foo:foo,bar:bar};在.wxs文件模塊中引用其他.wxs文件模塊，可以使用require函數(shù)。在.wxs文件里只能引用.wxs文件模塊，且必須使用相對(duì)路徑。.wxs文件模塊均為單例，多個(gè)地方、多個(gè)頁(yè)面、多次引用，使用的都是同一個(gè).wxs文件模塊對(duì)象。如果一個(gè).wxs文件模塊在定義之后，一直沒(méi)有被引用，則該模塊不會(huì)被解析與運(yùn)行。///pages/tools.wxsvarfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="somemsg";///pages/logic.wxsvartools=require("./tools.wxs");console.log(tools.FOO);console.log(tools.bar("logic.wxs"));console.log(tools.msg);<!--/page/index/index.wxml--><wxssrc="./../logic.wxs"module="logic"/>2.9.2變量與數(shù)據(jù)類(lèi)型varfoo=1;varbar="helloworld";vari;//i===undefined1.變量的使用WXS中的變量均為值的引用，如果只聲明變量而不賦值，則默認(rèn)值為undefined。變量名命名規(guī)則如下。首字符必須是字母（a～z、A～Z）、下劃線（_）。剩余字符可以是字母（a～z、A～Z）、下劃線（_）、數(shù)字（0~9）。保留標(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.9.2變量與數(shù)據(jù)類(lèi)型vara=10;varPI=3.141592653589793;2.數(shù)據(jù)類(lèi)型number包括兩種數(shù)值：整數(shù)、小數(shù)。string有如下兩種寫(xiě)法。（1）number數(shù)值類(lèi)型。（2）string字符串類(lèi)型。'helloworld';"helloworld";（3）boolean布爾值類(lèi)型。布爾值只有兩個(gè)特定的值：True和False。object是一種無(wú)序的鍵值對(duì)。使用方法如下所示。（4）object對(duì)象類(lèi)型。2