微信小程序開發(fā)PPT完整全套教學(xué)課件

第一章

微信小程序入門

微信小程序開發(fā)課件的附件-程序源代碼請(qǐng)聯(lián)系索取CONTENT目錄1.1微信小程序概述1.2注冊(cè)小程序賬號(hào)1.3小程序信息的完善1.4小程序AppID1.5小程序的開發(fā)工具1.6開發(fā)者工具界面的使用1.7創(chuàng)建第一個(gè)微信小程序微信小程序概述1.1chapter一、小程序簡(jiǎn)介

現(xiàn)在，生活中隨處都應(yīng)用到微信小程序。打開不同的微信小程序，如圖1.1所示，點(diǎn)擊右上角“…”可以進(jìn)行轉(zhuǎn)發(fā)、添加到我的小程序、取消等。點(diǎn)擊右上角“⊙”，則可以關(guān)閉微信小程序。

只要通過(guò)掃一掃或搜一搜，或者附近的小程序，你就可以看到5公里內(nèi)所有的小程序。同時(shí)，小程序完全不需要下載安裝，也不需要卸載，更不會(huì)占用手機(jī)內(nèi)存。

微信小程序也被簡(jiǎn)稱為小程序，其英文名稱是MiniProgram。它是一種存在于微信內(nèi)部的輕量級(jí)應(yīng)用程序。微信研發(fā)團(tuán)隊(duì)在其官方網(wǎng)站上有一段關(guān)于微信小程序的介紹:“小程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個(gè)小程序。小程序可以在微信內(nèi)部被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。”一、小程序簡(jiǎn)介二、小程序的誕生微信創(chuàng)始人張小龍選擇在2017年1月9日發(fā)布了小程序。2017年1月9日是iPhone誕生的十周年，為了向喬布斯致敬，張小龍選在這天發(fā)布了“小程序”，自發(fā)布伊始小程序就備受矚目，贊賞與唱衰的聲音不絕于耳。二、小程序的誕生

微信一開始對(duì)小程序的解釋：小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用觸手可及的夢(mèng)想，用戶掃一掃或搜一搜就可以打開應(yīng)用，也體現(xiàn)了用完即走的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)須安裝卸載。二、小程序的誕生2018微信公開課上，張小龍為小程序做了更精準(zhǔn)的定義。小程序作為一個(gè)信息載體，是萬(wàn)事萬(wàn)物的表達(dá)方式和訪問(wèn)方式，最終用戶在應(yīng)用場(chǎng)景中通過(guò)小程序立即觸達(dá)。簡(jiǎn)單地說(shuō)，微信小程序就是把你的店開到微信上去，不管是飯店、KTV、酒店，還是網(wǎng)店、裝修等服務(wù)，都可以搬到小程序上，微信小程序入口如圖所示。二、小程序的誕生小程序適合開發(fā)輕量級(jí)的應(yīng)用，比H5能承載得更多，但比APP又更少。比如：（1）工具類：滴滴打車、美團(tuán)、小打卡等。（2）資訊類：網(wǎng)易新聞、微博、豆瓣等。（3）電商：京東、網(wǎng)易嚴(yán)選、拼多多等。（4）游戲：跳一跳、頭腦風(fēng)暴、斗地主等。

但有些程序是不適合做成小程序的。比如：原神、王者榮耀、和平精英、PUBG等游戲APP。三、小程序的優(yōu)點(diǎn)在互聯(lián)網(wǎng)發(fā)展迅速的時(shí)代中，APP早已是人們?nèi)粘Ｉ钪惺殖Ｒ姷模〕绦虻恼Q生也更便捷了人們使用的方式。小程序發(fā)展得如此迅猛，下面來(lái)說(shuō)說(shuō)它的優(yōu)點(diǎn)。（1）因?yàn)樾〕绦蚴羌显谖⑿派系墓δ?，所以并不需要安裝或下載，與此同時(shí)對(duì)于許多用戶來(lái)說(shuō)，小程序不占用手機(jī)的內(nèi)存，且也不受手機(jī)系統(tǒng)的限制，使用起來(lái)特別快捷。（2）小程序的開發(fā)成本比較低，周期也較短，像開發(fā)其他一個(gè)APP需要大量的資金，小程序的成本一般情況下在幾千元至幾萬(wàn)元之間，因此小程序幾乎人人都用得起，使用效果和APP也差不多。（3）公眾號(hào)與小程序的嫁接，看似公眾號(hào)與小程序是關(guān)聯(lián)關(guān)系，但是公眾號(hào)的功能早已經(jīng)停止了更新，相反小程序的功能還在不斷發(fā)展，不難看出小程序在將來(lái)的某一天必將取代公眾號(hào)。四、小程序的發(fā)展前景

在未來(lái)的發(fā)展中，小程序?qū)?huì)更加方便、快捷，注冊(cè)申請(qǐng)的渠道也更加快捷、方便，與此同時(shí)，還會(huì)進(jìn)一步加強(qiáng)第三方平臺(tái)的合作，如果能夠開放第三方開發(fā)平臺(tái)，那么它將為小程序的開發(fā)提供更大的后方支援。并且隨著小程序的日臻完善，小程序的開發(fā)者將能夠獲得更大的權(quán)限支持，由此可見，小程序在未來(lái)的發(fā)展空間中是相當(dāng)巨大的，并且對(duì)于企業(yè)進(jìn)行小程序制作的優(yōu)勢(shì)也將會(huì)進(jìn)一步凸顯出來(lái)。小程序傳統(tǒng)產(chǎn)業(yè)的代表，如圖所示。四、小程序的發(fā)展前景

小程序可以使企業(yè)和用戶更好地交流，也能夠?qū)崿F(xiàn)用戶更好的轉(zhuǎn)化，所以對(duì)企業(yè)來(lái)說(shuō)小程序可以帶來(lái)可觀的利潤(rùn)和流量。隨著微信開放的功能的不斷增多，那么一些小程序也會(huì)不斷地完善自己，開放一些功能且不斷得到匹配，這樣也就提供了更多的接口能力，從而能夠方便開發(fā)者進(jìn)行深度地挖掘。相信未來(lái)小程序也將具備更多的功能，那么企業(yè)所能實(shí)現(xiàn)的功能也會(huì)隨著增加，這對(duì)于其未來(lái)發(fā)展有著至關(guān)重要的作用，同時(shí)也能推動(dòng)微信的發(fā)展。小程序互聯(lián)網(wǎng)公司的代表，如圖所示。四、小程序的發(fā)展前景

小程序?qū)?huì)與其他行業(yè)有更為友好的鏈接，小程序的發(fā)展是在微信的用戶發(fā)展基礎(chǔ)上而發(fā)展的，這樣才能夠用微信更好地結(jié)合，從而可以實(shí)現(xiàn)更多的功能。因此，小程序在未來(lái)不僅方便企業(yè)與用戶，也會(huì)方便企業(yè)與企業(yè)之間、用戶與用戶之間的交流。注冊(cè)小程序賬號(hào)1.2chapter一、登錄微信公眾平臺(tái)官網(wǎng)

訪問(wèn)微信公眾平臺(tái)官網(wǎng)首頁(yè)（），如圖所示。一、登錄微信公眾平臺(tái)官網(wǎng)

如果第一次使用微信小程序，則需要注冊(cè)小程序賬號(hào)。單擊“立即注冊(cè)”鏈接，則出現(xiàn)如圖所示的窗口。在出現(xiàn)的窗口中單擊“小程序”鏈接，然后按照注冊(cè)向?qū)Ь涂梢酝瓿尚〕绦蛸~號(hào)的注冊(cè)，在注冊(cè)小程序賬號(hào)之前應(yīng)先準(zhǔn)備好一個(gè)個(gè)人郵箱。二、填寫賬號(hào)信息

小程序的正式注冊(cè)頁(yè)面包含3個(gè)需要填寫的信息，即郵箱賬號(hào)信息、密碼和確認(rèn)密碼、驗(yàn)證碼，在“注冊(cè)”前還需勾選同意協(xié)議條款選項(xiàng)，如圖所示。三、郵箱激活在提交注冊(cè)后會(huì)看到郵箱激活提醒，此時(shí)頁(yè)面效果如圖所示。三、郵箱激活登錄對(duì)應(yīng)的注冊(cè)郵箱查看激活郵件，如圖所示。四、信息登記

郵箱賬號(hào)激活后，就可以進(jìn)入信息登記頁(yè)面完成信息，如圖所示。

注冊(cè)的時(shí)候，先選擇個(gè)人用戶即可。目前為止是足夠了。如果你有工商營(yíng)業(yè)執(zhí)照，也可以創(chuàng)建企業(yè)賬號(hào)。企業(yè)賬號(hào)能擁有的功能會(huì)更多，比如支付等。注冊(cè)完后，后面會(huì)出現(xiàn)一個(gè)二維碼，讓你掃描這個(gè)二維碼來(lái)綁定你的微信賬號(hào)。一個(gè)微信賬號(hào)只能綁定5個(gè)小程序賬號(hào)。四、信息登記

注冊(cè)國(guó)家/地區(qū)保持默認(rèn)內(nèi)容“中國(guó)大陸”，然后根據(jù)實(shí)際情況進(jìn)行主體類型的選擇。目前小程序允許注冊(cè)的主體類型共有5種，即個(gè)人、企業(yè)、政府、媒體及其他組織，如表所示。賬號(hào)主體類型解釋個(gè)人必須是年滿18歲以上的微信實(shí)名用戶，并且具有國(guó)內(nèi)身份信息企業(yè)企業(yè)、分支機(jī)構(gòu)、個(gè)體工商戶或企業(yè)相關(guān)品牌政府國(guó)內(nèi)各級(jí)、各類政府機(jī)構(gòu)/事業(yè)單位，以及具有行政職能的社會(huì)組織等，主要覆蓋公安機(jī)構(gòu)、黨團(tuán)機(jī)構(gòu)、司法機(jī)構(gòu)、交通機(jī)構(gòu)、旅游機(jī)構(gòu)、工商稅務(wù)機(jī)構(gòu)、市政機(jī)構(gòu)等媒體報(bào)紙、雜志、電視、電臺(tái)、通訊社等其他組織不屬于政府、媒體、企業(yè)或個(gè)人的其他類型四、信息登記

選擇“個(gè)人”類型后，頁(yè)面下方將自動(dòng)出現(xiàn)主體信息登記表單，如圖所示。

開發(fā)者需要填寫真實(shí)姓名、身份證號(hào)和管理員手機(jī)號(hào)（一個(gè)手機(jī)號(hào)碼只能注冊(cè)5個(gè)小程序），然后單擊“獲取驗(yàn)證碼”按鈕等待手機(jī)短信，在收到的短信中會(huì)提供一個(gè)6位驗(yàn)證碼，驗(yàn)證完成后會(huì)提示。四、信息登記輸入身份證姓名、身份證號(hào)碼、管理員手機(jī)號(hào)碼后，單擊“獲取驗(yàn)證碼”，用戶會(huì)自動(dòng)收到一條短信，如圖所示。注意：驗(yàn)證碼必須要在10分鐘之內(nèi)填寫完成，否則會(huì)失效后需重新獲取。四、信息登記

填寫完成后，會(huì)在“管理員身份驗(yàn)證”一欄中自動(dòng)出現(xiàn)一個(gè)二維碼，如圖所示。四、信息登記

身份驗(yàn)證成功后，單擊“繼續(xù)”按鈕，進(jìn)入下一步，系統(tǒng)會(huì)彈出一個(gè)提示框，讓開發(fā)者進(jìn)行最后的信息確認(rèn)，如圖所示。四、信息登記

最后一步，單擊“確認(rèn)”按鈕完成主體信息的確認(rèn)，如圖所示。五、登錄管理頁(yè)面

通過(guò)騰訊服務(wù)器驗(yàn)證后，可以進(jìn)入頁(yè)面進(jìn)行登錄了，登錄后需要利用微信掃描二維碼進(jìn)行身份驗(yàn)證，登錄后的界面如圖所示，登錄后就可以直接進(jìn)行小程序的后續(xù)管理工作。小程序信息的完善1.3chapter一、完善小程序信息

在賬號(hào)注冊(cè)完成后還需完善小程序的基本信息，如圖所示。一、完善小程序信息

單擊“填寫”按鈕彈出“填寫小程序信息”界面，如圖所示。一、完善小程序信息

填寫“小程序名稱”、“小程序頭像”、“小程序介紹”和“小程序服務(wù)類目”這四個(gè)主要的信息，如表所示。填寫信息填寫要求修改次數(shù)小程序名稱小程序名稱需要控制在4~30個(gè)字符，并且不得與平臺(tái)內(nèi)已經(jīng)存在的其他賬號(hào)名稱重名發(fā)布前有兩次改名的機(jī)會(huì)，兩次改名機(jī)會(huì)用完后必須先發(fā)布再通過(guò)微信認(rèn)證進(jìn)行改名小程序頭像圖片格式只能是png、bmp、jpeg、jpg和gif中的一種，并且文件不得大于2MB；注意頭像圖片不允許涉及政治敏感與色情內(nèi)容；圖片最后會(huì)被展示為圓形效果的頭像每個(gè)月可修改5次小程序介紹字?jǐn)?shù)必須控制在4~120個(gè)字符，介紹內(nèi)容不得含有國(guó)家相關(guān)法律或法規(guī)禁止的內(nèi)容每個(gè)月可申請(qǐng)修改5次小程序服務(wù)類目服務(wù)類目分為兩級(jí)，每一級(jí)都必須填寫，不可以為空；服務(wù)類目不得少于1個(gè)，不得多于5個(gè)每個(gè)月可修改1次一、完善小程序信息

全部填寫完畢后就可以點(diǎn)擊最下方的“提交”按鈕，提交小程序的基本信息后就可以看到如圖所示的界面。

二、管理成員

完善小程序信息后，單擊如上圖所示小程序信息完成界面的“添加開發(fā)”按鈕，會(huì)打開“成員管理”界面，如圖所示。二、管理成員小程序成員管理包括對(duì)小程序項(xiàng)目成員及體驗(yàn)成員的管理。◎

項(xiàng)目成員：表示參與小程序開發(fā)、運(yùn)營(yíng)的成員，可登陸小程序管理后臺(tái)，包括運(yùn)營(yíng)者、開發(fā)者及數(shù)據(jù)分析者。管理員可在“成員管理”中添加、刪除項(xiàng)目成員，并設(shè)置項(xiàng)目成員的角色?！?/p>

體驗(yàn)成員：表示參與小程序內(nèi)測(cè)體驗(yàn)的成員，可使用體驗(yàn)版小程序，但不屬于項(xiàng)目成員。管理員及項(xiàng)目成員均可添加、刪除體驗(yàn)成員。在小程序管理后臺(tái)進(jìn)入成員管理入口后，對(duì)管理員和項(xiàng)目成員進(jìn)行管理。小程序AppID1.4chapter一、查看小程序AppID

注冊(cè)完小程序賬號(hào)后，就可以查看AppID了。在后期發(fā)布小程序中，就必須要用到AppID。在點(diǎn)擊左側(cè)的“開發(fā)”鏈接，在出現(xiàn)的右側(cè)界面中點(diǎn)擊“開發(fā)設(shè)置”鏈接，就可以查看自己的AppID了，如圖所示。

即使有了AppID，也不能立即發(fā)布小程序，還需要進(jìn)行小程序基本信息的設(shè)置。在頁(yè)面中進(jìn)行諸如小程序名稱、小程序頭像等內(nèi)容的設(shè)置，設(shè)置完成后的界面如圖所示。二、設(shè)置小程序信息小程序的開發(fā)工具1.5chapter一、下載開發(fā)工具

在完成準(zhǔn)備工作之后就可以進(jìn)行小程序的開發(fā)了，小程序具有官方提供的專屬開發(fā)工具——“微信開發(fā)者工具”，簡(jiǎn)稱“開發(fā)者工具”。

打開頁(yè)面，找到“小程序”—“開發(fā)”—“下載”—“工具”欄，進(jìn)入微信開發(fā)者工具下載界面，如圖所示。一、下載開發(fā)工具

用戶根據(jù)自己的實(shí)際情況選擇對(duì)應(yīng)的下載地址。在這里以Windows64版本為例，進(jìn)行下載，下載完成后用戶會(huì)獲得一個(gè)EXE應(yīng)用程序文件，如圖所示。

該圖中的“1.05.2106300”為軟件版本號(hào)，“_x64”表示W(wǎng)indows64位軟件。用戶可以根據(jù)文件名再次確認(rèn)是否下載了正確的版本。

確認(rèn)下載版本無(wú)誤后，雙擊該文件進(jìn)行開發(fā)者工具的安裝，安裝過(guò)程如圖所示。二、安裝開發(fā)工具三、開發(fā)者工具的登錄

安裝完畢后，就會(huì)在桌面上有一個(gè)“微信開發(fā)者工具”的圖標(biāo)。

微信web開發(fā)者工具在使用開發(fā)者微信賬號(hào)登錄后，才可以進(jìn)入小程序的開發(fā)者工具進(jìn)行開發(fā)。雙擊“微信開發(fā)者工具”圖標(biāo)，彈出二維碼掃描頁(yè)面，如圖所示。三、開發(fā)者工具的登錄

開發(fā)者用手機(jī)微信掃描PC端二維碼進(jìn)行身份確認(rèn)，單擊手機(jī)微信右上角的加號(hào)出現(xiàn)的下拉菜單，選擇“掃一掃”選項(xiàng)進(jìn)行二維碼掃描；掃碼成功后跳轉(zhuǎn)到“微信登錄”的提示頁(yè)面，單擊“確認(rèn)登錄”按鈕即可，如圖所示。三、開發(fā)者工具的登錄

登錄后的界面如圖所示。如果想直接打開一個(gè)最新建立或打開過(guò)的項(xiàng)目，直接選擇編輯、調(diào)試小程序即可。三、開發(fā)者工具的登錄

如果想新建一個(gè)項(xiàng)目，則點(diǎn)擊“+”圖標(biāo)，就會(huì)出現(xiàn)“創(chuàng)建小程序”界面，如圖所示。

如果創(chuàng)建小程序，在“項(xiàng)目名稱”中輸入項(xiàng)目名，然后輸入“目錄”的同時(shí)更改了“項(xiàng)目名稱”，然后單擊AppID后的“測(cè)試號(hào)”，最后單擊“確定”按鈕。三、開發(fā)者工具的登錄

如果想要打開某一個(gè)項(xiàng)目，就選擇界面最上面的“導(dǎo)入項(xiàng)目”按鈕，然后單擊“目錄”最后側(cè)的箭頭，選擇要打開項(xiàng)目的文件夾即可。三、開發(fā)者工具的登錄

單擊“新建”按鈕后，會(huì)打開微信開發(fā)者工具的開發(fā)界面，如圖所示。開發(fā)者工具界面的使用1.6chapter任務(wù)描述

開發(fā)者工具主要由菜單欄、工具欄、模擬器、編輯器和調(diào)試器5個(gè)部分組成，如圖所示。

菜單欄工具欄模擬器編輯器調(diào)試器

菜單欄中主要包括項(xiàng)目、文件、編輯、工具、界面、設(shè)置和微信開發(fā)者工具等菜單欄，它們的下拉菜單選項(xiàng)，如圖所示。一、菜單欄二、工具欄工具欄分為左側(cè)區(qū)域、中間區(qū)域和右側(cè)區(qū)域。左側(cè)區(qū)域中間區(qū)域右側(cè)區(qū)域三、模擬器

模擬器面板可以切換虛擬手機(jī)型號(hào)、顯示比例、模擬網(wǎng)絡(luò)連接狀態(tài)、模擬手機(jī)Home和返回鍵操作、音量開關(guān)、獨(dú)立顯示以及改變模擬器位置，如圖所示。四、編輯器

編輯器主要包含項(xiàng)目完整的目錄結(jié)構(gòu)區(qū)域和代碼區(qū)域，如圖所示。

目錄結(jié)構(gòu)區(qū)代碼區(qū)四、編輯器

在代碼區(qū)中，只需要輸入前面幾個(gè)字母，就可以出現(xiàn)相關(guān)組件的代碼提示，此時(shí)用鍵盤方向鍵選擇正確的內(nèi)容，然后按回車鍵即可全部生成。五、調(diào)試器

調(diào)試器可以在PC段預(yù)覽小程序或者在手機(jī)端調(diào)試小程序時(shí)使用，用于實(shí)時(shí)查看小程序運(yùn)行時(shí)的后臺(tái)輸出、網(wǎng)絡(luò)狀況、數(shù)據(jù)存儲(chǔ)等內(nèi)容變化，如圖所示。第一個(gè)微信小程序1.7chapter一、任務(wù)描述

設(shè)計(jì)一個(gè)小程序，小程序運(yùn)行后在界面上顯示一句話："HelloWorld!"

本任務(wù)涉及了view組件。該組件是微信小程序的基本組件，也是一個(gè)容器組件，用于布局或顯示相關(guān)信息。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果

根據(jù)任務(wù)描述制作調(diào)試運(yùn)行后可以做出如圖所示的效果。在模擬器上運(yùn)行的效果如圖(a)所示在真機(jī)上運(yùn)行的效果如圖(b)所示。

(a)模擬器運(yùn)行效果

(b)真機(jī)運(yùn)行效果四、任務(wù)實(shí)現(xiàn)（1）新建項(xiàng)目HelloWorld；（2）編寫index.wxml文件代碼；（3）編寫app.wxss文件代碼。

使用了樣式.container，使字體紅色、字體大小42px、居中。五、案例運(yùn)行（1）代碼編寫完成后，點(diǎn)擊“編譯”按鈕或按下【Ctrl+S】組合鍵，即可看到如圖所示的模擬器中的運(yùn)行結(jié)果。五、案例運(yùn)行（2）如果想通過(guò)真機(jī)查看運(yùn)行結(jié)果，則可以點(diǎn)擊右上角的“預(yù)覽”按鈕，此時(shí)會(huì)彈出二維碼，利用手機(jī)微信掃碼可以直接在手機(jī)上查看運(yùn)行結(jié)果，如圖所示。感

謝

聆

聽第二章

小程序邏輯層

微信小程序開發(fā)CONTENT目錄2.12.2小程序全局配置文件小程序tabBar欄2.32.4小程序邏輯文件小程序生命周期執(zhí)行順序2.52.6setData視圖渲染變量和函數(shù)的作用域及模塊化小程序全局配置文件2.1chapter一、任務(wù)描述

開發(fā)者根據(jù)實(shí)際需要，重新修改定義全局配置文件app.json中的window屬性，修改window屬性中各種樣式實(shí)現(xiàn)自己想要的效果。

pages用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑（含文件名）信息。文件名不需要寫文件后綴，框架會(huì)自動(dòng)去尋找對(duì)應(yīng)位置的.json,.js,.wxml,.wxss四個(gè)文件進(jìn)行處理。小程序中新增/減少頁(yè)面，都需要對(duì)pages數(shù)組進(jìn)行修改。

小程序的目錄結(jié)構(gòu)主要包含項(xiàng)目配置文件、主體文件、頁(yè)面文件和其他文件。本任務(wù)將基于任務(wù)1.7創(chuàng)建第一個(gè)微信小程序的項(xiàng)目，對(duì)代碼文件的構(gòu)成展開分析。開發(fā)目錄如圖所示。二、導(dǎo)入知識(shí)點(diǎn)二、導(dǎo)入知識(shí)點(diǎn)

項(xiàng)目配置文件是project.config.json，每個(gè)小程序在新建時(shí)都會(huì)自動(dòng)生成一個(gè)project.config.json文件，該文件直接位于項(xiàng)目根目錄下，如左圖所示。

其內(nèi)部代碼可用來(lái)定義小程序的項(xiàng)目名稱、AppID等內(nèi)容，如右圖所示。

1.項(xiàng)目配置文件二、導(dǎo)入知識(shí)點(diǎn)

小程序主體文件名稱均為app，同樣直接位于項(xiàng)目根目錄下，如圖所示。2.主體文件

二、導(dǎo)入知識(shí)點(diǎn)2.主體文件

主體文件app根據(jù)后綴名不同分為3種類型的文件分別是app.json、app.js和app.wxss。

app.json是小程序的全局配置文件，主要包含了小程序所有頁(yè)面文件的路徑地址、導(dǎo)航欄樣式等，必填文件，如圖所示。二、導(dǎo)入知識(shí)點(diǎn)2.主體文件

小程序項(xiàng)目主要包含了pages和window兩個(gè)屬性。事實(shí)上，除了pages和window，app.json還可以配置tabBar、networkTimeout及debug等屬性，這些屬性的具體說(shuō)明，如表所示。屬性類型說(shuō)明pagesStringArray必填屬性，用于記錄小程序所有頁(yè)面文件的路徑地址。其中如果pages中包含多個(gè)頁(yè)面，pages/index/index將默認(rèn)為小程序的初始頁(yè)面windowObject可選屬性，用于設(shè)置頁(yè)面的窗口表現(xiàn)，例如導(dǎo)航欄的背景顏色、標(biāo)題文字內(nèi)容以及文字顏色等tabBarObject可選屬性，用于設(shè)置頁(yè)面底部tab工具條的表現(xiàn)networkTimeoutObject可選屬性，用于設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間debugBoolean可選屬性，用于設(shè)置是否開啟調(diào)試模式二、導(dǎo)入知識(shí)點(diǎn)2.主體文件（1）pages屬性：對(duì)應(yīng)的值是數(shù)組形式，數(shù)組的每一項(xiàng)都是以字符串形式記錄小程序頁(yè)面的路徑地址。表示當(dāng)前共有兩個(gè)頁(yè)面，分別是index和log頁(yè)面，并且其中的index頁(yè)面被默認(rèn)為小程序的初始頁(yè)面。

"pages":[

"pages/index/index",

"pages/logs/logs"

],二、導(dǎo)入知識(shí)點(diǎn)2.主體文件(2）window屬性：對(duì)應(yīng)的值是對(duì)象形式，其中包括了小程序頁(yè)面頂端導(dǎo)航欄的背景顏色、標(biāo)題文字內(nèi)容以及文字顏色等屬性，具體可以包含的對(duì)象屬性，如表所示。屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，默認(rèn)值表示黑色，也可以簡(jiǎn)寫為#000navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，默認(rèn)值表示白色，該屬性值只能是white或blacknavigationBarTitleTextString

導(dǎo)航欄標(biāo)題文字內(nèi)容，默認(rèn)為無(wú)文字內(nèi)容navigationStyleStringdefault導(dǎo)航欄樣式，只支持default或custom,其中custom用于自定義導(dǎo)航欄內(nèi)容，只保留右上角的小圖標(biāo)backgroundColorHexColor#ffffff窗口的背景顏色，默認(rèn)值表示白色，也可以簡(jiǎn)寫為#ffffbackgroundTextStyleStringdark下拉加載的樣式，該屬性值只能是dark或lightbackgroundColorTopString#ffffff頂部窗口的背景顏色，只有iOS有效backgroundColorBottomString#ffffff底部窗口的背景顏色，只有iOS有效enablePullDownRefreshBooleanfalse是否開啟下拉刷新功能onReachBottomDistanceNumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部的距離，單位為像素（px）三、實(shí)現(xiàn)效果

通過(guò)修改app.json文件，把頂部窗口的背景顏色變?yōu)榧t色，導(dǎo)航欄標(biāo)題文字內(nèi)容改為“微信小程序開發(fā)教程”，導(dǎo)航欄標(biāo)題顏色變?yōu)榘咨?，?shí)現(xiàn)如圖所示的效果。三、實(shí)現(xiàn)效果

通過(guò)修改app.json文件，把頂部窗口的背景顏色變?yōu)榧t色，導(dǎo)航欄標(biāo)題文字內(nèi)容改為“微信小程序開發(fā)教程”，導(dǎo)航欄標(biāo)題顏色變?yōu)榘咨瑢?shí)現(xiàn)如圖所示的效果。四、任務(wù)實(shí)現(xiàn)

對(duì)app.json文件中的window屬性進(jìn)行修改。如，頂部窗口的背景顏色"navigationBarBackgroundColor"設(shè)置為"#f00"紅色，導(dǎo)航欄標(biāo)題文字"navigationBarTitleText"設(shè)置為“微信小程序開發(fā)教程”，導(dǎo)航欄標(biāo)題顏色"navigationBarTextStyle"變?yōu)?white"白色，實(shí)現(xiàn)代碼如圖所示。第8行：將導(dǎo)航欄背景顏色從白色”#ffffff”改為紅色”#f00”。第9行：將導(dǎo)航欄文字內(nèi)容從“WeChat”改為“微信小程序開發(fā)教程”。第10行：將導(dǎo)航欄文字顏色從黑色”black”改為白色”white”。小程序tabBar欄2.2chapter一、任務(wù)描述

開發(fā)者根據(jù)實(shí)際需要，定義全局配置文件app.json中的tabBar屬性，通過(guò)添加tabBar屬性，實(shí)現(xiàn)窗口底部tab欄多個(gè)頁(yè)面的切換，實(shí)現(xiàn)自己想要的多頁(yè)面效果。

小程序的全局配置文件是app.json，主要包含了小程序所有頁(yè)面的路徑地址、導(dǎo)航欄樣式等內(nèi)容，頁(yè)面的路徑地址、導(dǎo)航欄樣式為必填信息，如圖所示。二、導(dǎo)入知識(shí)點(diǎn)二、導(dǎo)入知識(shí)點(diǎn)如果小程序是一個(gè)多tab應(yīng)用，即客戶端窗口的底部有tab欄可以切換頁(yè)面，可以通過(guò)tabBar配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。tabBar的屬性值如表2.3所示。屬性類型必填默認(rèn)值說(shuō)明colorHexColor是

tab上的文字默認(rèn)顏色selectedColorHexColor是

tab上的文字選中時(shí)的顏色backgroundColorHexColor是

tab的背景色borderStyleString否blacktabBar上邊框的顏色，僅支持black、whitelistArray是

tab的列表positionString否bottomtabBar的位置，僅支持bottom、top二、導(dǎo)入知識(shí)點(diǎn)其中，list接收一個(gè)數(shù)組，只能配置最少兩個(gè)、最多5個(gè)tab。tab按數(shù)組的順序排序，每項(xiàng)都是一個(gè)對(duì)象，其屬性值如表所示。屬性類型必填描述pagePathString是頁(yè)面路徑，必須在pages中先定義textString是tab上按鈕的文字iconPathString否圖標(biāo)路徑，icon大小限制為40KB,建議尺寸為81px×81px，不支持網(wǎng)絡(luò)圖片selectedlconPathString否選中時(shí)的圖標(biāo)路徑，icon大小限制為40KB,建議尺寸為81pxx81px，不支持網(wǎng)絡(luò)圖片

注意：當(dāng)position屬性值為top時(shí)iconPath和selectedIconPath屬性無(wú)效，不顯示圖標(biāo)。同時(shí)，iconPath和selectedIconPath屬性不是必填內(nèi)容，如下代碼所示：二、導(dǎo)入知識(shí)點(diǎn)

下面將用圖例的方式把tabBar中l(wèi)ist屬性值的對(duì)應(yīng)關(guān)系展示出來(lái)，如圖2.10所示。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果通過(guò)編寫app.json文件中tabBar中l(wèi)ist屬性值，設(shè)置成四個(gè)tab欄顯示，并且可以相互選中切換。沒選中的icon圖標(biāo)的顏色和文字顏色就變成綠色(#1AAD16)，如圖2.11所示的效果。四、任務(wù)實(shí)現(xiàn)首先，進(jìn)入阿里巴巴矢量圖庫(kù)網(wǎng)站/，在“搜索圖標(biāo)”欄上查找需要下載的圖標(biāo)。如在“搜索圖標(biāo)”欄上輸入“首頁(yè)”，就會(huì)出現(xiàn)很多“首頁(yè)”icon圖標(biāo)，如圖所示。四、任務(wù)實(shí)現(xiàn)根據(jù)需求選中一個(gè)“首頁(yè)”icon圖標(biāo)，單擊“下載”，彈出對(duì)話框，分別選中灰色“#515151”和綠色“#1AAD16”進(jìn)行PNG格式的圖標(biāo)下載，以下載“#1AAD16”綠色圖標(biāo)為例，如圖所示。四、任務(wù)實(shí)現(xiàn)然后，除pages目錄下的index和logs外，需另新建“phonebook”通訊錄和“find”發(fā)現(xiàn)2個(gè)頁(yè)面文件，如圖2.14所示。四、任務(wù)實(shí)現(xiàn)新建Page完成后，在app.json文件中的"pages"列表中會(huì)自動(dòng)出現(xiàn)"pages/phonebook/phonebook"和"pages/find/find"，如圖2.15所示。四、任務(wù)實(shí)現(xiàn)最后，在app.json中編寫”tabBar”屬性list列表，代碼如下：小程序邏輯文件2.3chapter一、任務(wù)描述小程序開發(fā)框架的邏輯層又稱為AppService,是由JavaScript編寫和實(shí)現(xiàn)的。開發(fā)者寫的所有代碼最后將被打包成一份JavaScript程序,并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序被銷毀。邏輯層的主要作用是處理數(shù)據(jù)后發(fā)送給視圖層渲染以及接收視圖層的事件反饋。為了更方便地進(jìn)行項(xiàng)目開發(fā)，小程序在JavaScript的基礎(chǔ)上進(jìn)行了一些優(yōu)化。一、任務(wù)描述其提供了不同的方法和接口用于不同的文件。（1）App()方法用于整個(gè)應(yīng)用程序的注冊(cè)。（2）Page()方法用于單獨(dú)頁(yè)面的注冊(cè)。（3）getApp()方法用于獲取整個(gè)應(yīng)用實(shí)例。（4）getCurrentPages()方法用于獲取當(dāng)前頁(yè)面實(shí)例。（5）提供豐富的微信原生API，可以方便地獲取微信用戶信息、本地存儲(chǔ)、掃一掃、微信支付、微信運(yùn)動(dòng)等特殊功能。下面就App()方法和Page()方法的創(chuàng)建做一講解。一、App()方法App.js文件是小程序的全局邏輯文件，也是整個(gè)小程序的入口文件，它控制整個(gè)小程序生命周期的文件。1.默認(rèn)app.js代碼當(dāng)新建一個(gè)項(xiàng)目時(shí)，默認(rèn)的app.js代碼如圖2.16所示。二、導(dǎo)入知識(shí)點(diǎn)一、App()方法省略app.js中具體的函數(shù)內(nèi)容后將得到以下代碼框架，代碼框架如下：二、導(dǎo)入知識(shí)點(diǎn)一、App()方法自動(dòng)生成app()代碼用戶可以使用微信web開發(fā)者工具在空白app.js文件中直接輸入關(guān)鍵詞app,此時(shí)會(huì)自動(dòng)出現(xiàn)提示列表，如圖2.17所示。注意：App()方法只能寫在小程序根目錄下的app.js文件中，并且只能注冊(cè)1個(gè)。二、導(dǎo)入知識(shí)點(diǎn)一、App()方法選擇提示列表中的第三項(xiàng)，直接按回車鍵就可以自動(dòng)生成帶有生命周期全套函數(shù)的代碼結(jié)構(gòu)，如圖2.18所示。事實(shí)上，App()中的這些函數(shù)均為可選函數(shù)，開發(fā)者可以根據(jù)實(shí)際需要?jiǎng)h除其中的部分函數(shù)，或保留這些函數(shù)但空著不填充內(nèi)容。二、導(dǎo)入知識(shí)點(diǎn)一、App()方法App.js用App()來(lái)實(shí)現(xiàn)對(duì)整個(gè)程序的注冊(cè)，同時(shí)App()里面還實(shí)現(xiàn)了對(duì)小程序生命周期的監(jiān)控函數(shù)(onLaunch(),onShow(),onHide())。對(duì)App()內(nèi)部參數(shù)說(shuō)明如表2.5所示。二、導(dǎo)入知識(shí)點(diǎn)屬性類型說(shuō)明描述onLaunch()Function生命周期函數(shù)－－監(jiān)聽小程序初始化當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā)onLaunch（全局只觸發(fā)一次）onShow()Function生命周期函數(shù)－－監(jiān)聽小程序顯示當(dāng)小程序啟動(dòng)或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā)onShow函數(shù)onHide()Function生命周期函數(shù)－－監(jiān)聽小程序隱藏當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā)onHide函數(shù)onError()Function錯(cuò)誤監(jiān)聽函數(shù)當(dāng)小程序發(fā)送腳本錯(cuò)誤時(shí)，會(huì)觸發(fā)onError函數(shù)onPageNotFound()Function頁(yè)面不存在函數(shù)當(dāng)小程序需要打開的頁(yè)面不存在時(shí)觸發(fā)其他自定義函數(shù)Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，用this可以訪問(wèn)二、Page()方法小程序在每個(gè)頁(yè)面JS文件中通過(guò)使用Page(OBJECT)方法進(jìn)行頁(yè)面注冊(cè)，該方法可以用于指定小程序頁(yè)面的生命周期函數(shù)。小程序中每一個(gè)頁(yè)面可以放在一個(gè)文件夾中，這個(gè)文件夾中一般包括4個(gè)文件分別是.js、.json、.wxml和.wxss。注意：這四個(gè)文件的名字最好和文件夾的名字一致，這樣便于在代碼框架中自動(dòng)查找。二、導(dǎo)入知識(shí)點(diǎn)二、Page()方法例如，用戶在微信web開發(fā)者工具的index.js文件中，直接輸入關(guān)鍵詞page，此時(shí)會(huì)自動(dòng)出現(xiàn)提示列表，如圖2.19所示。二、導(dǎo)入知識(shí)點(diǎn)二、Page()方法每個(gè)頁(yè)面都需要注冊(cè)，index.js用Page()這個(gè)函數(shù)來(lái)注冊(cè)一個(gè)頁(yè)面，它接受一個(gè)object參數(shù)，用這個(gè)參數(shù)來(lái)指定頁(yè)面的初始數(shù)據(jù)，生命周期函數(shù)，事件處理函數(shù)。對(duì)Page()內(nèi)部參數(shù)說(shuō)明如表2.6所示。二、導(dǎo)入知識(shí)點(diǎn)屬性類型說(shuō)明dataObject頁(yè)面的初始數(shù)據(jù)onLoadFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面加載onReadyFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面初次渲染完成onShowFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面顯示onHideFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面隱藏onUnloadFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面卸載onPullDownRefreshFunction頁(yè)面相關(guān)事件處理函數(shù)－－監(jiān)聽用戶下拉動(dòng)作二、Page()方法選擇提示列表中的第五項(xiàng)，直接按回車鍵就可以自動(dòng)生成帶有生命周期全套函數(shù)的代碼結(jié)構(gòu)，創(chuàng)建完成后的index.js代碼如圖2.20所示。二、導(dǎo)入知識(shí)點(diǎn)小程序生命周期執(zhí)行順序2.4chapter一、任務(wù)描述設(shè)計(jì)一個(gè)小程序，測(cè)試小程序各個(gè)頁(yè)面和函數(shù)的執(zhí)行順序。

小程序的全局配置文件是app.json，主要包含了小程序所有頁(yè)面的路徑地址、導(dǎo)航欄樣式等內(nèi)容，頁(yè)面的路徑地址、導(dǎo)航欄樣式為必填信息，如圖所示。二、導(dǎo)入知識(shí)點(diǎn)1.小程序應(yīng)用生命周期每個(gè)小程序都需要在app.js中調(diào)用App方法注冊(cè)小程序?qū)嵗?，綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽和頁(yè)面不存在監(jiān)聽函數(shù)等。函數(shù)App(Object

object)用于注冊(cè)小程序，該函數(shù)必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次，如圖2.21所示。二、導(dǎo)入知識(shí)點(diǎn)1.小程序應(yīng)用生命周期函數(shù)參數(shù)Object

object的屬性說(shuō)明如表2.7所示。二、導(dǎo)入知識(shí)點(diǎn)屬性類型必填描述onLaunchFunction否生命周期函數(shù)－監(jiān)聽小程序初始化onShowFunction否生命周期函數(shù)－監(jiān)聽小程序顯示onHideFunction否生命周期函數(shù)－監(jiān)聽小程序隱藏onErrorFunction否錯(cuò)誤監(jiān)聽函數(shù)onPageNotFoundFunction否頁(yè)面不存在函數(shù)其他自定義函數(shù)Any否開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，用this可以訪問(wèn)小程序應(yīng)用與頁(yè)面有各自的生命周期函數(shù)，它們?cè)谑褂眠^(guò)程中也會(huì)互相影響。小程序應(yīng)用生命周期如圖2.22所示。二、導(dǎo)入知識(shí)點(diǎn)打開小程序開始銷毀小程序初始化onLaunch()結(jié)束回到前臺(tái)進(jìn)入后臺(tái)onShow()onHide()2.小程序頁(yè)面生命周期對(duì)于小程序中的每個(gè)頁(yè)面，都需要在頁(yè)面對(duì)應(yīng)的js文件中調(diào)用Page方法注冊(cè)頁(yè)面，指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。函數(shù)Page(Objectobject)用于注冊(cè)小程序中的一個(gè)頁(yè)面。其參數(shù)Objectobject指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等，其主要屬性說(shuō)明如表2.8所示。二、導(dǎo)入知識(shí)點(diǎn)二、導(dǎo)入知識(shí)點(diǎn)屬性類型說(shuō)明dataObject頁(yè)面的初始數(shù)據(jù)onLoadFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面加載onShowFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面顯示onReadyFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面初次渲染完成onHideFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面隱藏onUnloadFunction生命周期函數(shù)－－監(jiān)聽頁(yè)面卸載其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到object參數(shù)中，用this可以訪問(wèn)小程序在被打開時(shí)會(huì)首先觸發(fā)onLaunch()進(jìn)行程序啟動(dòng)，完成后調(diào)用onShow()準(zhǔn)備展示頁(yè)面，如果被切換進(jìn)入后臺(tái)會(huì)調(diào)用onHide(),直到下次程序在銷毀前重新被喚起會(huì)再次調(diào)onShow()。小程序頁(yè)面生命周期如圖2.23所示。二、導(dǎo)入知識(shí)點(diǎn)關(guān)閉頁(yè)面初始化打開頁(yè)面開始o(jì)nLoad()onUnLoad()結(jié)束初次渲染回到前臺(tái)進(jìn)入后臺(tái)onShow()onHide()onReady()3.小程序整個(gè)生命周期在小程序應(yīng)用生命周期調(diào)用完onShow()以后就準(zhǔn)備觸發(fā)小程序頁(yè)面生命周期了。頁(yè)面初次打開會(huì)依次觸發(fā)onLoad()、onShow()、onReady()這3個(gè)函數(shù)。同樣，如果被切換到后臺(tái)，會(huì)調(diào)用頁(yè)面onHide(),從后臺(tái)被喚醒會(huì)調(diào)用頁(yè)面onShow()。直到頁(yè)面關(guān)閉會(huì)調(diào)用onUnload(),下次打開還會(huì)依次觸發(fā)onLoad()、onShow()、onReady()這3個(gè)函數(shù)。小程序整個(gè)生命周期如圖2.24所示。二、導(dǎo)入知識(shí)點(diǎn)二、導(dǎo)入知識(shí)點(diǎn)關(guān)閉頁(yè)面頁(yè)面顯示頁(yè)面隱藏切換后臺(tái)運(yùn)行時(shí)，隱藏頁(yè)面回到前臺(tái)進(jìn)入后臺(tái)頁(yè)面加載程序啟動(dòng)LaunchonShowonHide初次渲染onLoadReadyonUnLoadonShowonHide切換到前臺(tái)運(yùn)行時(shí)，顯示頁(yè)面三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以實(shí)現(xiàn)如下運(yùn)行效果：（1）案例運(yùn)行后，在Console頁(yè)面顯示的程序運(yùn)行順序如圖2.25所示。從圖中可以看出，小程序運(yùn)行后首先執(zhí)行app.js文件中的onLaunch函數(shù)和onShow函數(shù)，然后再執(zhí)行index.js中的onLoad函數(shù)、onShow函數(shù)和onReady函數(shù)。三、實(shí)現(xiàn)效果（2）當(dāng)點(diǎn)擊“通訊錄”標(biāo)簽后，首先隱藏index.js頁(yè)面，然后phonebook.js頁(yè)面被加載、顯示和渲染，如圖2.26所示。三、實(shí)現(xiàn)效果（3）當(dāng)點(diǎn)擊“發(fā)現(xiàn)”標(biāo)簽后，此時(shí)首先隱藏phonebook.js頁(yè)面，然后find.js顯示和渲染，如圖2.27所示。三、實(shí)現(xiàn)效果（4）當(dāng)點(diǎn)擊如圖2.28所示的“切后臺(tái)”按鈕后，小程序首先執(zhí)行find.js中的onHide函數(shù)，然后再執(zhí)行app.js中index.js的onShow函數(shù)，如圖2.28所示。四、任務(wù)實(shí)現(xiàn)在“任務(wù)2.2小程序tabBar欄”基礎(chǔ)上完成以下內(nèi)容。（1）編寫app.js文件代碼。在App函數(shù)的對(duì)象參數(shù)中添加如下函數(shù)：onLaunch、onShow和onHide，每個(gè)函數(shù)都通過(guò)調(diào)用console.log函數(shù)來(lái)在Console窗口中顯示程序執(zhí)行的位置。app.js文件：四、任務(wù)實(shí)現(xiàn)（2）編寫index.js文件代碼。在該文件中添加如下函數(shù)：onLoad、onReady、onShow、onHide、onUnload，在每個(gè)函數(shù)中通過(guò)調(diào)用console.log函數(shù)來(lái)顯示程序執(zhí)行的位置。index.js文件：四、任務(wù)實(shí)現(xiàn)（3）編寫phonebook.js文件代碼。在該文件中添加如下函數(shù)：onLoad、onReady、onShow、onHide、onUnload,在每個(gè)函數(shù)中通過(guò)調(diào)用console.log函數(shù)來(lái)顯示程序執(zhí)行的位置。phonebook.js文件：四、任務(wù)實(shí)現(xiàn)（4）編寫find.js文件代碼。在該文件中添加如下函數(shù)：onLoad、onReady、onShow、onHide、onUnload,在每個(gè)函數(shù)中通過(guò)調(diào)用console.log函數(shù)來(lái)顯示程序執(zhí)行的位置。find.js文件：setData視圖渲染2.5chapter一、任務(wù)描述在頁(yè)面文件中能使用setData()函數(shù)將js中data數(shù)據(jù)渲染到視圖界面，并且能調(diào)用函數(shù)去改變視圖渲染的內(nèi)容。在Page()方法中，setData()函數(shù)用于將數(shù)據(jù)異步從邏輯層發(fā)送到視圖層WXML頁(yè)面上，同時(shí)也可以同步更新data屬性中的數(shù)據(jù)值，并改變對(duì)應(yīng)的this.data的值。setData()參數(shù)格式如下：setData(data,callback);//data需為可JSON化的數(shù)據(jù)，callback在setData對(duì)界面渲染完畢后調(diào)用二、導(dǎo)入知識(shí)點(diǎn)其參數(shù)說(shuō)明如表2.9所示：Page下面的任何一個(gè)方法內(nèi)都可以使用setData方法，它接收兩個(gè)參數(shù)。二、導(dǎo)入知識(shí)點(diǎn)屬性類型必填描述dataObject是要更新的一個(gè)或多個(gè)數(shù)據(jù)，格式為{key1:value1,key2:value2,…,keyN:valueN}callbackFunction否setData引起的界面更新渲染完畢后的回調(diào)函數(shù)第一個(gè)參數(shù)Objectdata，它是必傳的，數(shù)據(jù)類型是Object，即這次要改變的數(shù)據(jù)。第二個(gè)參數(shù)Functioncallback，它是回調(diào)函數(shù)，非必填的，它所代表的含義是setData引起的界面更新渲染完畢后的回調(diào)函數(shù)。三、實(shí)現(xiàn)效果根據(jù)此任務(wù)描述可以做出如圖2.29所示的效果。頁(yè)面載入初始時(shí)，頁(yè)面顯示是“小程序開發(fā)教程”的文字，如圖（a）所示。當(dāng)單擊“更改data數(shù)據(jù)”按鈕時(shí)，頁(yè)面顯示的文字發(fā)生改變，變?yōu)椤拔⑿判〕绦騽?chuàng)始人張小龍”，如圖（b）所示，頁(yè)面渲染的內(nèi)容發(fā)生改變。四、任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)page頁(yè)面名為setdata的文件，并且把a(bǔ)pp.json中的pages屬性中的順序進(jìn)行變換，選中pages/setdata/setdata，按住“Alt+向上”把該頁(yè)面的位置調(diào)整到第一位。如圖2.30所示。四、任務(wù)實(shí)現(xiàn)（2）編寫setdata.wxml文件代碼。編寫需要渲染的內(nèi)容name和“更改data數(shù)據(jù)”button按鈕。setdata.wxml文件：四、任務(wù)實(shí)現(xiàn)（3）編寫setdata.wxss文件代碼。對(duì)頁(yè)面的外框.box、標(biāo)題.title、文本text和按鈕button樣式進(jìn)行設(shè)置。setdata.wxss文件：四、任務(wù)實(shí)現(xiàn)（4）編寫setdata.js文件代碼。當(dāng)單擊“更改data數(shù)據(jù)”按鈕時(shí)，更改渲染到視圖界面上的內(nèi)容，并且在console調(diào)試器中顯示出來(lái)，如圖2.31所示。四、任務(wù)實(shí)現(xiàn)console調(diào)試器setdata數(shù)據(jù)變化變量和函數(shù)的作用域及模塊化2.6chapter一、任務(wù)描述設(shè)計(jì)一個(gè)小程序，在index.js文件中調(diào)用app.js文件、index.js文件和util.js文變量和函數(shù)，從而實(shí)現(xiàn)對(duì)全局變量和函數(shù)、本文件定義的變量和函數(shù)以及其他模塊中定義的變量和函數(shù)的引用。1.文件作用域在小程序的任意JS文件中聲明的變量和函數(shù)只在該文件中有效，不同的JS文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。如果需要跨頁(yè)面進(jìn)行數(shù)據(jù)共享，可以在app.js中定義全局變量，然后在其他JS文件中使用getApp()來(lái)獲取和更新。例如在app.js設(shè)置全局變量globalData中msg的值。二、導(dǎo)入知識(shí)點(diǎn)2.模塊化程序支持將一些公共JavaScript代碼放在一個(gè)單獨(dú)的JS文件中，作為一個(gè)公共模塊可以被其他JS文件調(diào)用。模塊只能通過(guò)module.exports或者exports才能對(duì)外提供接口。例如，在根目錄下新建utils文件夾并創(chuàng)建公共JS文件common.js。二、導(dǎo)入知識(shí)點(diǎn)頁(yè)面JS中使用require引用common.js文件，此時(shí)就可以調(diào)用其中的函數(shù)。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果在app.js文件中定義的變量和函數(shù)是全局變量和函數(shù)，可以在任何js文件中進(jìn)行引用。根據(jù)案例描述運(yùn)行結(jié)果如下圖2.32所示的效果。四、任務(wù)實(shí)現(xiàn)在index.wxml中設(shè)置了六個(gè)調(diào)用變量分別是msg1、msg2、msg3、msg4、msg5和msg6，這六個(gè)變量需要通過(guò)index.js把值渲染到視圖層中。通過(guò)index.js文件中調(diào)用app.js文件，調(diào)用index.js文件本身以及調(diào)用util.js文件。變量和函數(shù)如圖2.33展示了index.wxml、index.js、app.js和utils.js之間的調(diào)用關(guān)系。四、任務(wù)實(shí)現(xiàn)（1）編寫index.wxml文件代碼。本文件綁定了msg1~msg6這6個(gè)變量，通過(guò)在index.js文件中給這6個(gè)變量賦值，來(lái)演示在index.js文件中引用全局變量和函數(shù)、局部變量和函數(shù)以及其他模塊的變量和函數(shù)的方法。文件中使用了view樣式來(lái)設(shè)置文本的大小和行間距。index.wxml文件：四、任務(wù)實(shí)現(xiàn)（2）編寫index.wxss文件代碼。該文件定義了box、title和view的樣式，用來(lái)設(shè)置標(biāo)題大小、文字大小和行間距。index.wxss文件：四、任務(wù)實(shí)現(xiàn)（3）編寫index.js文件代碼。代碼首先獲取全局應(yīng)用實(shí)例和utils模塊實(shí)例，并定義了本模塊的變量和函數(shù)，然后使用了全局變量、全局函數(shù)、utils模塊變量、utils模塊函數(shù)、本模塊變量和本模塊函數(shù)。①如果在本模塊中引用app.js中定義的全局變量和函數(shù)，就必須定義全局對(duì)象并利用getApp()函數(shù)給該對(duì)象賦值。本案例中利用constapp=getApp()語(yǔ)句定義了全局對(duì)象app,并利用app.globalMsg和app.globalFunc()引用app.js文件中定義的變量和函數(shù)，并賦值給msg1和msg2。四、任務(wù)實(shí)現(xiàn)②如果在本模塊中引用模塊內(nèi)定義的變量和函數(shù)，在data中直接引用就可以了，如本例中的msg3和msg4直接引用了indexMsg和indexFunc()。③如果在本模塊中引用其他模塊，如本案例中的util模塊中定義的變量和函數(shù)，首先需要利用require函數(shù)引入util文件，本案例中利用varutil=require('../utils/util.js')創(chuàng)建util實(shí)例，然后利用util引用util.js文件中定義的變量和函數(shù)，本例通過(guò)util.utilMsg和util.utilFunc()引用了util.js文件中定義的變量和函數(shù)給msg5和msg6賦值。四、任務(wù)實(shí)現(xiàn)index.js文件：四、任務(wù)實(shí)現(xiàn)（4）編寫app.js文件代碼。該文件中定義了1個(gè)全局變量globalMsg和1個(gè)全局函數(shù)globalFunc,該變量和函數(shù)可以在本項(xiàng)目的其他任何js文件中進(jìn)行引用。app.js文件：四、任務(wù)實(shí)現(xiàn)（5）在pages文件夾下添加utils文件夾，并在其中添加util.js文件，然后編寫util.js文件代碼。該文件定義了1個(gè)變量和1個(gè)函數(shù)，如果要在其他js文件中引用這個(gè)變量和函數(shù)，就必須通過(guò)module.exports或exports來(lái)輸出該變量和函數(shù)。util.js文件：四、任務(wù)實(shí)現(xiàn)

在JS文件中聲明的變量和函數(shù)只在該文件中有效；不同文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。通過(guò)全局函數(shù)getApp()可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)，可以在App()中設(shè)置。可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js文件作為一個(gè)模塊。模塊通過(guò)module.exports或者exports對(duì)外暴露接口，在需要這些模塊的文件中，使用require(path)將公共代碼引入。主要注意的是path為相對(duì)路徑，暫時(shí)不支持絕對(duì)路徑。感

謝

聆

聽1+X證書第三章

小程序視圖層

微信小程序開發(fā)CONTENT目錄3.13.2小程序數(shù)據(jù)綁定成績(jī)等級(jí)計(jì)算器3.33.4列表渲染九九乘法表3.53.6小程序條件渲染選擇先行示范區(qū)3.7實(shí)現(xiàn)分段函數(shù)CONTENT目錄3.83.9成績(jī)計(jì)算器遞歸求和計(jì)算器3.103.11隨機(jī)數(shù)求和簡(jiǎn)單模板的定義及應(yīng)用3.123.13復(fù)雜模板的定義及應(yīng)用事件綁定CONTENT目錄3.143.15小貓叫溫度轉(zhuǎn)換計(jì)3.163.17事件冒泡與捕獲小程序include引用文件3.183.19旅游攻略WXSS微信樣式表3.20字體樣式設(shè)置小程序數(shù)據(jù)綁定3.1chapter一、任務(wù)描述編寫一個(gè)數(shù)據(jù)綁定和事件綁定的小程序，實(shí)現(xiàn)數(shù)據(jù)和事件的綁定。數(shù)據(jù)綁定包括：算術(shù)運(yùn)算綁定、對(duì)象綁定和數(shù)組綁定，并通過(guò)點(diǎn)擊按鈕事件修改綁定的數(shù)據(jù)。WXML（WeiXinMarkupLanguage）。WXML是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。（1）data對(duì)象。data對(duì)象是頁(yè)面第一次渲染時(shí)使用的初始數(shù)據(jù)，WXML中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng)Page的data。頁(yè)面加載時(shí)，data以JSON字符串的形式由邏輯層傳至渲染層。data中的數(shù)據(jù)包括：字符串、數(shù)字、布爾值、對(duì)象、數(shù)組。（2）數(shù)據(jù)綁定。渲染層可以通過(guò)WXML對(duì)數(shù)據(jù)進(jìn)行綁定。數(shù)據(jù)綁定使用Mustache語(yǔ)法（雙大括號(hào)）將變量包起來(lái)，可以作用于：內(nèi)容、組件屬性（需要在雙引號(hào)之內(nèi)）、控制屬性（需要在雙引號(hào)之內(nèi)）、關(guān)鍵字（需要在雙引號(hào)之內(nèi)）、運(yùn)算、組合、數(shù)組、對(duì)象等場(chǎng)景。二、導(dǎo)入知識(shí)點(diǎn)（3）setData()函數(shù)。此函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步）,同時(shí)改變對(duì)應(yīng)的this.data的值（同步）。（4）事件綁定。事件是視圖層到邏輯層的通信方式，它可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如id,dataset,touches。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.1所示的效果。初始界面如圖（a）所示，在視圖層文件index.wxml中綁定了普通數(shù)據(jù)a、b、c,綁定了對(duì)象數(shù)據(jù)Student和數(shù)組數(shù)據(jù)array,這些數(shù)據(jù)的值都可以通過(guò)邏輯層文件index.js來(lái)傳遞。當(dāng)點(diǎn)擊“修改綁定數(shù)據(jù)”按鈕時(shí)，原來(lái)的數(shù)據(jù)會(huì)發(fā)生相應(yīng)的變化，如圖（b）所示。四、任務(wù)實(shí)現(xiàn)1.編寫index.wxml文件代碼小程序界面主要由文本信息和1個(gè)按鈕構(gòu)成，文本信息可以通過(guò)view組件來(lái)呈現(xiàn)，按鈕利用button組件來(lái)實(shí)現(xiàn)。（1）index.wxml文件中的數(shù)據(jù)通過(guò){{}}符號(hào)與index.js文件中的數(shù)據(jù)進(jìn)行綁定，該綁定是單向的，數(shù)據(jù)只能由index.js文件傳給index.wxml文件，不能反向傳遞。（2）普通數(shù)據(jù)綁定直接使用變量名來(lái)實(shí)現(xiàn)，如本案例中的變量a、b和c;對(duì)象數(shù)據(jù)綁定通過(guò)“對(duì)象名.對(duì)象屬性”來(lái)實(shí)現(xiàn)，如本案例中的Student.stulD、S和Student.birthday;數(shù)組數(shù)據(jù)綁定通過(guò)下標(biāo)變量來(lái)實(shí)現(xiàn)，如本案例中的array[0]、array[1]和array[2]。四、任務(wù)實(shí)現(xiàn)（3）界面最后添加了一個(gè)button組件，并利用該組件進(jìn)行事件綁定。事件綁定通過(guò)在index.js文件中定義事件綁定函數(shù)來(lái)實(shí)現(xiàn)。（4）界面使用<View>組件調(diào)整字體大小和間距。index.wxml文件：四、任務(wù)實(shí)現(xiàn)2.編寫index.wxss文件代碼文件中定義了<View>組件來(lái)設(shè)置字體大小和邊距，該樣式對(duì)wxml文件中的所有<View>組件都起作用。index.wxss文件見附件；3.編寫index.js文件代碼在data對(duì)象中初始化綁定的數(shù)據(jù)，包括普通數(shù)據(jù)、對(duì)象和數(shù)組，在綁定的事件函數(shù)中通過(guò)調(diào)用this.setData()函數(shù)來(lái)修改綁定的數(shù)據(jù)。四、任務(wù)實(shí)現(xiàn)index.js文件：成績(jī)等級(jí)計(jì)算器3.2chapter一、任務(wù)描述編寫一個(gè)成績(jī)等級(jí)計(jì)算器的小程序，輸入成績(jī)后顯示成績(jī)等級(jí)，如果輸入成績(jī)大于100或者小于0，則顯示成績(jī)輸入有誤的提示。本任務(wù)綜合運(yùn)用了input組件和wx:if實(shí)現(xiàn)成績(jī)等級(jí)的判斷。判斷語(yǔ)句wx:if。在框架中，使用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>二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.2所示的效果。如（a）所示，初始界面顯示“請(qǐng)輸入你的考試成績(jī)”；如圖（b）所示，輸入88的分?jǐn)?shù)，顯示成績(jī)等級(jí)為“良好”；如圖（c）所示，輸入68的分?jǐn)?shù)，顯示成績(jī)等級(jí)為“及格”；如圖（d）所示，輸入99的分?jǐn)?shù)，顯示成績(jī)等級(jí)為“優(yōu)秀”。成績(jī)等級(jí)是因?yàn)檩斎氲膕core值通過(guò)wx:if判斷而得出的結(jié)果，正確輸入一個(gè)成績(jī)并點(diǎn)擊其他位置后，將顯示該成績(jī)的等級(jí)，如果輸入成績(jī)大于100或小于0,則顯示“成績(jī)輸入有誤！”的提示。三、實(shí)現(xiàn)效果四、任務(wù)實(shí)現(xiàn)1.編寫index.wxml文件代碼代碼中主要利用input組件來(lái)輸入成績(jī)，該成績(jī)?cè)趈s文件中獲取，并被渲染到WXML視圖層，在視圖層利用wx:if來(lái)判斷成績(jī)等級(jí)并顯示。input組件的上、下外邊距，以及寬度、高度和邊框等樣式通過(guò)input樣式來(lái)設(shè)置。index.wxml文件：四、任務(wù)實(shí)現(xiàn)2.編寫index.wxss文件代碼

文件定義了input組件的樣式，index.wxss文件見附件；四、任務(wù)實(shí)現(xiàn)3.編寫index.js文件中的代碼在data中初始化score的值為0,當(dāng)score<60時(shí)，分?jǐn)?shù)為不及格，這是小程序運(yùn)行后初始界面顯示“不及格”的原因。在scoreInput函數(shù)中利用this.setData()函數(shù)修改score的值為input組件中輸入的值，并把該值渲染到視圖層。index.js文件：列表渲染3.3chapter一、任務(wù)描述編寫一個(gè)小程序，利用wx:for實(shí)現(xiàn)對(duì)綁定數(shù)組、直接數(shù)組、對(duì)象以及字符串的列表渲染，利用wx:for-index和wx:for-item實(shí)現(xiàn)對(duì)index和item的重命名，在block標(biāo)簽中使用wx:for實(shí)現(xiàn)對(duì)多節(jié)點(diǎn)結(jié)構(gòu)塊的渲染。本案例主要涉及知識(shí)要點(diǎn)：（1）利用wx:for對(duì)數(shù)組、對(duì)象和字符串進(jìn)行列表渲染的方法。（2）利用wx:for-index和wx:for-item修改數(shù)組默認(rèn)下標(biāo)index和默認(rèn)數(shù)組元素item的方法。（3）在block標(biāo)簽中使用wx:for對(duì)多節(jié)點(diǎn)結(jié)構(gòu)塊進(jìn)行列表渲染的方法。在組件上使用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。使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名。類似blockwx:if,也可以將wx:for用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。二、導(dǎo)入知識(shí)點(diǎn)如果列表元素的位置會(huì)動(dòng)態(tài)改變或者有新的元素添加到列表中，并且希望列表中的元素保持自己的特征和狀態(tài)（如input中的輸入內(nèi)容，switch的選中狀態(tài)）,需要使用wx:key來(lái)指定列表中元素的唯一的標(biāo)識(shí)符。如不提供wx:key,會(huì)報(bào)一個(gè)warning,如果明確知道該列表是靜態(tài)，或者不必關(guān)注其元素順序，可以選擇忽略warning。（1）當(dāng)wx:for的值為字符串時(shí)，會(huì)將字符串解析成字符數(shù)組array。比如：<viewwx:for="array">{{item}}</view>等同于<viewwx:for="{[['a','r','r','a','y']}}">({item}}</view>二、導(dǎo)入知識(shí)點(diǎn)（2）花括號(hào)和引號(hào)之間如果有空格，將最終被解析成為數(shù)組。比如：<viewwx:for="{[[1,2,3]}}">{{item}}</view>等同于<viewwx:for="{{[1,2,3]+''}}">{{item}}</view>二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.3所示的效果。界面中出現(xiàn)了對(duì)數(shù)組、對(duì)象、字符串列表渲染以及利用block渲染多節(jié)點(diǎn)結(jié)構(gòu)塊的結(jié)果。四、任務(wù)實(shí)現(xiàn)1.編寫index.wxml文件代碼文件利用wx:for先后對(duì)綁定的數(shù)組、直接數(shù)組、對(duì)象、字符串進(jìn)行列表渲染。列表渲染默認(rèn)的數(shù)組下標(biāo)為index,默認(rèn)數(shù)組元素為item,在對(duì)字符串進(jìn)行列表渲染時(shí)，對(duì)默認(rèn)數(shù)組下標(biāo)和數(shù)組元素進(jìn)行了重命名。最后利用block標(biāo)簽和wx:for控制屬性對(duì)3個(gè)view組件進(jìn)行了渲染，打印出了2組紅藍(lán)黃三色帶。（1）本案例使用了4個(gè)樣式：view-item、bc-red、bc-green和bc-blue。view-item用于設(shè)置色條的尺寸，其他3種樣式用于設(shè)置色條的背景顏色。（2）當(dāng)對(duì)對(duì)象進(jìn)行列表渲染時(shí)，index表示對(duì)象的屬性名，item表示對(duì)象的屬性值。（3）當(dāng)對(duì)字符串進(jìn)行列表渲染時(shí)，字符串被解析為字符數(shù)組。四、任務(wù)實(shí)現(xiàn)index.wxml文件：四、任務(wù)實(shí)現(xiàn)2.編寫index.wxss文件代碼文件定義了4個(gè)樣式：view-item、bc-red、bc-green和.bc-blue.index.wxss文件見附件。3.編寫index.js文件代碼文件對(duì)綁定的數(shù)組array和對(duì)象object進(jìn)行了初始化。index.js文件：九九乘法表3.4chapter一、任務(wù)描述編寫一個(gè)小程序，綜合運(yùn)用wx:if條件渲染和wx:for列表渲染在視圖層打印一個(gè)九九乘法表。本次任務(wù)主要涉及以下知識(shí)要點(diǎn)：雙重wx:for列表渲染的應(yīng)用；inline-block樣式的應(yīng)用。綜合運(yùn)用條件渲染和雙重列表渲染實(shí)現(xiàn)了打印九九乘法表的算法，同時(shí)使用了inline-block屬性設(shè)置布局方式。（1）雙重列表渲染是指列表渲染中嵌套了列表渲染。其循環(huán)過(guò)程是這樣的：首先判斷是否滿足外循環(huán)條件，如果滿足，則進(jìn)入內(nèi)循環(huán)，內(nèi)循環(huán)結(jié)束后再判斷是否滿足外循環(huán)條件，如果滿足再次進(jìn)入內(nèi)循環(huán)，如此循環(huán)下去，直至外循環(huán)條件不滿足，退出整個(gè)循環(huán)。二、導(dǎo)入知識(shí)點(diǎn)（2）九九乘法表算法。首先確定在哪個(gè)位置打印三角形九九乘法表，如果在左下角打印，則：第1行打印1列：1×1=1,第2行打印2列：2×1=22×2=4,第1行打印i列……第9行打印9列。假設(shè)用i表示行元素值并進(jìn)行外循環(huán)，利用j表示列元素值并進(jìn)行內(nèi)循環(huán)，i和j的列表渲染數(shù)組都是[1,2,3,4,5,6,7,8,9],從運(yùn)行結(jié)果可以看出，左下角位置的九九乘法表，其行元素值要大于或等于列元素值，因此當(dāng)滿足j<=i時(shí)打印出ixj=i*j,這樣就可以打印出左下角三角形的九九乘法表。（3）利用inline-block設(shè)置布局方式。設(shè)置了inline-block屬性的元素既擁有了block元素可以設(shè)置width和height的特性，又保持了inline元素不換行的特性。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.4所示的九九乘法表。四、任務(wù)實(shí)現(xiàn)1.編寫index.wxml文件中的代碼本任務(wù)利用雙重wx:for列表渲染和wx:if條件渲染來(lái)實(shí)現(xiàn)九九乘法表的打印。代碼中使用了.jiujiu和.inline兩種樣式，.jiujiu用于控制字體大小和邊距，.inline利用inline-block屬性控制某一row行的所有col列都在同一行內(nèi)顯示，而且上一次row循環(huán)與下一次col循環(huán)列之間留有空格。此外，使用width屬性控制每一行的總寬度，從而保證最長(zhǎng)一行文字能夠顯示出來(lái)，顯示的文字大小合適。四、任務(wù)實(shí)現(xiàn)index.wxml文件：四、任務(wù)實(shí)現(xiàn)2.編寫index.wxss文件代碼本案例index.wxml中，已經(jīng)定義了.jiujiu和.inline樣式，現(xiàn)編寫.jiujiu和.inline兩個(gè)定義。index.wxss文件見附件；3.編寫index.json文件代碼該文件用來(lái)顯示小程序標(biāo)題欄的樣式和文本內(nèi)容，前面已經(jīng)講過(guò)，這里就不再賢述。index.json文件：小程序條件渲染3.5chapter一、任務(wù)描述編寫一個(gè)利用wx:if條件渲染實(shí)現(xiàn)顏色顯示的小程序。將wx:if放在<view>組件中實(shí)現(xiàn)如下功能：當(dāng)邏輯層js文件傳遞給視圖層wxml文件的顏色color的值為red、green、blue或其他顏色時(shí)，窗口將顯示顏色的名稱，并在名稱下方顯示這種顏色的顏色條；將wx:if放在<block/>中實(shí)現(xiàn)如下功能：當(dāng)給定的一個(gè)數(shù)值大于10時(shí)，將在窗口下方顯示紅、綠、藍(lán)3種顏色條，否則將不顯示。1.wx:if在框架中，使用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>二、導(dǎo)入知識(shí)點(diǎn)2.blockwx:if因?yàn)閣x: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></block>并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.8所示的效果。四、任務(wù)實(shí)現(xiàn)1.編寫index.wxml文件代碼（1）代碼利用wx:if...wx:elif...wx:else來(lái)判斷color的值是red、green、blue還是其他顏色，然后根據(jù)判斷結(jié)果來(lái)顯示相應(yīng)的顏色條。color的值來(lái)自js文件。（2）代碼利用<blockwx:if="{{condition}}>"來(lái)判斷l(xiāng)ength>10與否，如果條件滿足，則顯示紅、綠、藍(lán)3個(gè)顏色條，否則不顯示。length的值來(lái)自js文件。（3）代碼中使用了4種樣式：view-item、bc-red、bc-green和.bc-blue,view-iter用來(lái)設(shè)置顏色條的尺寸，其他3種樣式用來(lái)設(shè)置顏色條的背景顏色。四、任務(wù)實(shí)現(xiàn)index.wxml文件：四、任務(wù)實(shí)現(xiàn)2.編寫index.wxss文件代碼文件定義了4個(gè)樣式：view-item、bc-red、bc-green和.bc-blue。index.wxss文件見附件；3.編寫index.js文件代碼文件在data對(duì)象中初始化了2個(gè)變量：color和length,這2個(gè)變量在index.wxml文件中已經(jīng)進(jìn)行了綁定，通過(guò)傳值實(shí)現(xiàn)視圖層的條件渲染。先讓length的值為15，渲染出效果，再把length的值修改為5，渲染成另外一個(gè)不同的效果。四、任務(wù)實(shí)現(xiàn)index.js文件：選擇先行示范區(qū)3.6chapter一、任務(wù)描述如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新選項(xiàng)添加到列表中，希望列表中的項(xiàng)目保持自己的特征和狀態(tài)，使用wx:key指定唯一標(biāo)識(shí)符，從而指定列表中選項(xiàng)的唯一標(biāo)識(shí)符，當(dāng)刷新發(fā)生變化時(shí)，<switch/>選中的狀態(tài)不會(huì)隨著變化而改變。本次任務(wù)是選擇先行示范區(qū)，當(dāng)單擊“更新”按鈕時(shí)，仍然會(huì)選擇用戶選擇的項(xiàng)目。若要避免亂序的情況或不想看到該提示，可使用wx:key屬性來(lái)指定列表中的項(xiàng)目唯一標(biāo)識(shí)符。wx:key的值以兩種形式提供：字符串：代表在wx:for循環(huán)的一個(gè)項(xiàng)目屬性，該屬性值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。表達(dá)方式為：數(shù)組多個(gè)節(jié)點(diǎn)wx:key=數(shù)組名.item/index保留關(guān)鍵字*this：代表在wx:for循環(huán)中的項(xiàng)目本身，這種表示需要項(xiàng)目本身是唯一的字符串或者數(shù)字。表達(dá)方式為：數(shù)組一個(gè)節(jié)點(diǎn)wx:key=”*this”二、導(dǎo)入知識(shí)點(diǎn)以wx:key屬性為自定義字符串為例，當(dāng)數(shù)據(jù)改變導(dǎo)致頁(yè)面被重新渲染時(shí)，會(huì)自動(dòng)校正帶有key的組件以確保項(xiàng)目被正確排序并且提高列表渲染時(shí)的效率。如圖3.9中所示，先選中“C、深圳”選項(xiàng)，當(dāng)數(shù)據(jù)更新后，頁(yè)面被重新渲染，上面添加了一個(gè)“E、廈門”選項(xiàng)，但以前選中的C選項(xiàng)仍然是被選中的，選中項(xiàng)沒有發(fā)生改變，這就是wx:key的作用。二、導(dǎo)入知識(shí)點(diǎn)三、實(shí)現(xiàn)效果根據(jù)本次任務(wù)的描述做出如圖3.9所示的wx:key開關(guān)唯一標(biāo)識(shí)符的先行示范區(qū)的選擇。四、任務(wù)實(shí)現(xiàn)（1）表單組件<switch>是開關(guān)選擇器，可以點(diǎn)擊switch按鈕進(jìn)行開關(guān)。預(yù)覽效果如圖3.10所示。四、任務(wù)實(shí)現(xiàn)（2）編寫index.wxml文件代碼。通過(guò)寫入switch開關(guān)選擇器來(lái)渲染一個(gè)列表。index.wxml文件：四、任務(wù)實(shí)現(xiàn)（3）編寫index.wxss文件代碼。代碼中使用了.box和.title兩種樣式，分別用來(lái)修飾外框和標(biāo)題的。index.wxss文件見附件；（4）編寫index.js文件代碼。文件對(duì)列表中的對(duì)象lines進(jìn)行了初始化。index.js文件：四、任務(wù)實(shí)現(xiàn)Ctrl+S保存運(yùn)行，在模擬器中顯示了以列表的方式渲染了4個(gè)switch按鈕，如圖3.11組件switch先行示范區(qū)開關(guān)選擇項(xiàng)目所示。四、任務(wù)實(shí)現(xiàn)（5）Switch開關(guān)的特點(diǎn)是用列表的方式渲染了4個(gè)switch，下面我們將通過(guò)程序編寫再在A選項(xiàng)的上方添加一個(gè)switch5按鈕選項(xiàng)“E廈門”，再次進(jìn)行渲染時(shí)改變了switch的數(shù)量，從1個(gè)switch選項(xiàng)開關(guān)變成了5個(gè)switch選項(xiàng)開關(guān)。現(xiàn)在添加一個(gè)新的switch按鈕選項(xiàng)“E廈門”，給button按鈕“更新”一個(gè)綁定事件，在小程序中給一個(gè)點(diǎn)擊bindtap事件，事件的名字其實(shí)就是函數(shù)的名字，叫tapEvent。在index.wxml中寫入代碼：<button

type="primary"

bindtap="tapEvent">更新</button>四、任務(wù)實(shí)現(xiàn)（6）在index.js中進(jìn)行編寫函數(shù)tapEvent:function(event)，會(huì)傳遞一個(gè)event事件參數(shù)進(jìn)來(lái)。tapEvent:function(event){}接下來(lái)會(huì)更改一下lines的值，首先獲取一個(gè)lines對(duì)象，把它設(shè)置為lines變量，即varlines=this.data.lines；然后，要求在lines的第一項(xiàng)前面即0個(gè)位置添加一個(gè)新的按鈕switch5，使用splice方法來(lái)進(jìn)行操作，即lines.splice(0,0,第五個(gè)元素)，關(guān)于splice()方法在后面有補(bǔ)充講解。在頁(yè)面中刷新后，能同時(shí)把數(shù)據(jù)更新渲染到視圖界面中。四、任務(wù)實(shí)現(xiàn)添加index.js代碼文件如下：四、任務(wù)實(shí)現(xiàn)當(dāng)選中選項(xiàng)“C.深圳”單擊更新后，當(dāng)沒有定義wx:key時(shí)，被選中的選項(xiàng)會(huì)自動(dòng)向前移一個(gè)選項(xiàng)，這時(shí)界面展示所選擇的選項(xiàng)是第三個(gè)，所以從選項(xiàng)C變成了選項(xiàng)B，選項(xiàng)會(huì)發(fā)生變化，顯示效果如圖3.12所示。四、任務(wù)實(shí)現(xiàn)（7）編寫index.wxml文件。先選中switch3開關(guān)選擇器“C.深圳”，當(dāng)更新完后，選中的按鈕就會(huì)從switch3開關(guān)選擇器“C.深圳”的選中項(xiàng)變成“B.上海”。想要更新后選中項(xiàng)不變，就要通過(guò)wx:key指定唯一標(biāo)識(shí)符。在index.wxml的<view>組件中，添加wx:key=”id”，編寫代碼如下：<view

wx:for="{{lines}}"

wx:key="id">保存Ctrl+S刷新后就可以看到本次任務(wù)展示的效果啦！實(shí)現(xiàn)分段函數(shù)3.7chapter一、任務(wù)描述設(shè)計(jì)一個(gè)利用條件結(jié)構(gòu)和數(shù)學(xué)函數(shù)進(jìn)行計(jì)算的小程序。當(dāng)輸入x值時(shí)，根據(jù)下面的公式計(jì)算出y的值。本任務(wù)使用了JavaScript中的條件語(yǔ)句和Math對(duì)象中的函數(shù)。1.JavaScript中的