《微信小程序開(kāi)發(fā)案例教程》全套教學(xué)課件

微信小程序開(kāi)發(fā)案例教程主講人:全套可編輯PPT課件全書(shū)目錄微信小程序開(kāi)發(fā)入門(mén)項(xiàng)目一微信小程序的視圖項(xiàng)目二微信小程序的配置和邏輯項(xiàng)目三視圖容器組件與基礎(chǔ)內(nèi)容組件項(xiàng)目四表單組件與其他組件項(xiàng)目五網(wǎng)絡(luò)API與文件API項(xiàng)目六數(shù)據(jù)緩存API與用戶(hù)信息API項(xiàng)目七媒體API與位置API項(xiàng)目八交互API與設(shè)備API項(xiàng)目九微信小程序云開(kāi)發(fā)項(xiàng)目十“私房菜館”微信小程序項(xiàng)目十一項(xiàng)目一微信小程序開(kāi)發(fā)入門(mén)全套可編輯PPT課件項(xiàng)目導(dǎo)讀2017年1月9日，第一批微信小程序產(chǎn)品正式上線(xiàn)。經(jīng)過(guò)幾年的發(fā)展，微信小程序已成為各行各業(yè)開(kāi)展?fàn)I銷(xiāo)活動(dòng)的重要工具。本項(xiàng)目將帶領(lǐng)大家了解微信小程序的概念、特點(diǎn)、功能、開(kāi)發(fā)流程等，并對(duì)其項(xiàng)目結(jié)構(gòu)有一個(gè)整體的認(rèn)識(shí)。知識(shí)目標(biāo)了解微信小程序的概念、特點(diǎn)及功能。了解微信小程序的開(kāi)發(fā)流程。熟悉微信開(kāi)發(fā)者工具界面各區(qū)域的功能及作用。熟悉微信小程序的文件類(lèi)型和目錄結(jié)構(gòu)。技能目標(biāo)通過(guò)自主學(xué)習(xí)微信提供的小程序官方文檔，增強(qiáng)自主學(xué)習(xí)意識(shí)。密切關(guān)注行業(yè)動(dòng)態(tài)，緊跟時(shí)代發(fā)展步伐，提高迎接機(jī)遇和挑戰(zhàn)的能力。素質(zhì)目標(biāo)能夠注冊(cè)微信小程序賬號(hào)。能夠下載并安裝微信開(kāi)發(fā)者工具。能夠創(chuàng)建微信小程序項(xiàng)目。能夠開(kāi)發(fā)簡(jiǎn)單的微信小程序。學(xué)習(xí)目標(biāo)2項(xiàng)目目錄任務(wù)一初識(shí)微信小程序任務(wù)二認(rèn)識(shí)微信小程序的項(xiàng)目結(jié)構(gòu)1任務(wù)一初識(shí)微信小程序（1）認(rèn)識(shí)微信小程序（2）微信小程序的特點(diǎn)（3）微信小程序的功能你常用哪些微信小程序？微信小程序和App一樣嗎？為什么？課堂互動(dòng)微信小程序簡(jiǎn)稱(chēng)小程序，不需要下載安裝即可使用。微信小程序不同于App，它依賴(lài)于微信平臺(tái)。微信小程序入口獲取小程序方式掃碼微信搜索微信公眾號(hào)好友推薦一、認(rèn)識(shí)微信小程序常見(jiàn)的微信小程序頁(yè)面一、認(rèn)識(shí)微信小程序可以結(jié)合微信公眾平臺(tái)進(jìn)行宣傳和推廣，更快獲取用戶(hù)可以在微信內(nèi)被便捷地獲取和傳播無(wú)須安裝、速度快、觸手可及、用完即走、無(wú)須卸載例如，顧客去餐館吃飯，并不需要下載該餐館的App，只需要用微信掃一掃餐館提供的二維碼就可以在小程序中點(diǎn)餐、付款，之后也不需要卸載，直接關(guān)閉小程序即可。二、微信小程序的特點(diǎn)微信小程序與手機(jī)原生App的區(qū)別是什么？課堂互動(dòng)微信小程序與手機(jī)原生App的區(qū)別對(duì)比項(xiàng)微信小程序手機(jī)原生App開(kāi)發(fā)周期開(kāi)發(fā)周期短開(kāi)發(fā)周期長(zhǎng)開(kāi)發(fā)成本開(kāi)發(fā)成本低開(kāi)發(fā)成本高下載無(wú)須下載，通過(guò)掃碼、微信搜索、微信公眾號(hào)、好友推薦等方式獲取從iOS和Android應(yīng)用商店下載安裝無(wú)須安裝，占用內(nèi)存空間可以忽略不計(jì)需要安裝，占用內(nèi)存空間，安裝太多App可能會(huì)導(dǎo)致手機(jī)內(nèi)存不足二、微信小程序的特點(diǎn)微信小程序與手機(jī)原生App的區(qū)別（續(xù)表）對(duì)比項(xiàng)微信小程序手機(jī)原生App跨平臺(tái)可以跨平臺(tái)一般要同時(shí)開(kāi)發(fā)iOS和Android兩種版本升級(jí)無(wú)須升級(jí)需要升級(jí)功能實(shí)現(xiàn)受限于微信平臺(tái)提供的功能功能相對(duì)復(fù)雜，可以提供個(gè)性化的功能消息推送僅能回復(fù)模板消息，不允許主動(dòng)給用戶(hù)發(fā)送消息可以自主推送二、微信小程序的特點(diǎn)1958年對(duì)話(huà)分享1983年線(xiàn)下掃碼1992年搜索查找

1997年1995年掛起狀態(tài)2013年6月消息通知2016年6月歷史列表關(guān)聯(lián)公眾號(hào)三、微信小程序的功能開(kāi)發(fā)微信小程序的流程是怎樣的？課堂互動(dòng)微信小程序開(kāi)發(fā)小程序端開(kāi)發(fā)：開(kāi)發(fā)小程序的前端界面和交互邏輯服務(wù)端開(kāi)發(fā)：開(kāi)發(fā)小程序后臺(tái)的業(yè)務(wù)邏輯任務(wù)實(shí)施：了解微信小程序的開(kāi)發(fā)流程本任務(wù)實(shí)施通過(guò)介紹微信小程序的開(kāi)發(fā)流程，開(kāi)啟微信小程序開(kāi)發(fā)之旅。需要注冊(cè)微信小程序賬號(hào)下載并安裝微信開(kāi)發(fā)者工具創(chuàng)建微信小程序項(xiàng)目上傳和發(fā)布微信小程序開(kāi)發(fā)微信小程序任務(wù)實(shí)施：了解微信小程序的開(kāi)發(fā)流程任務(wù)實(shí)施：了解微信小程序的開(kāi)發(fā)流程注冊(cè)微信小程序賬號(hào)下載并安裝微信開(kāi)發(fā)者工具創(chuàng)建微信小程序項(xiàng)目上傳和發(fā)布微信小程序注冊(cè)小程序賬號(hào)需要用到一個(gè)未被微信公眾平臺(tái)注冊(cè)、未被微信開(kāi)放平臺(tái)注冊(cè)、未被個(gè)人微信號(hào)綁定的郵箱，所以在注冊(cè)小程序賬號(hào)之前最好提前準(zhǔn)備好。小貼士小程序的發(fā)布流程分為3步：第1步填寫(xiě)小程序信息，選擇小程序服務(wù)類(lèi)目；第2步下載開(kāi)發(fā)者工具，進(jìn)行小程序開(kāi)發(fā)；第3步提交代碼，等待審核。在選擇小程序服務(wù)類(lèi)目時(shí)不要選擇游戲類(lèi)目，因?yàn)橛螒蝾?lèi)目的小程序也稱(chēng)小游戲，其開(kāi)發(fā)比較特殊，并且開(kāi)發(fā)接口與其他類(lèi)目的小程序也有所不同。本書(shū)主要介紹非游戲類(lèi)目小程序的開(kāi)發(fā)。總結(jié)AppID是微信小程序的唯一標(biāo)識(shí)。盡管AppID不是開(kāi)發(fā)小程序所必須的（可以使用測(cè)試號(hào)），但是發(fā)布小程序時(shí)必須使用AppID。在小程序管理后臺(tái)左側(cè)的導(dǎo)航欄中選擇“開(kāi)發(fā)”下的“開(kāi)發(fā)管理”選項(xiàng)，然后單擊“開(kāi)發(fā)設(shè)置”選項(xiàng)卡可查看AppID，如下圖所示。填寫(xiě)了AppID后，創(chuàng)建的小程序項(xiàng)目就會(huì)與剛注冊(cè)的小程序賬號(hào)綁定。小貼士小程序的版本說(shuō)明開(kāi)發(fā)版本開(kāi)發(fā)過(guò)程中可以將代碼上傳到開(kāi)發(fā)版本，開(kāi)發(fā)版本的代碼可以提交審核，也可以刪除，不影響審核版本及線(xiàn)上版本審核版本只能有一份代碼處于審核中，審核通過(guò)后可以發(fā)布線(xiàn)上版本，也可以重新提交審核，覆蓋原審核版本線(xiàn)上版本線(xiàn)上所有用戶(hù)都可以使用的版本，舊版本在新版本發(fā)布后會(huì)被覆蓋更新小貼士任務(wù)二認(rèn)識(shí)微信小程序的項(xiàng)目結(jié)構(gòu)（1）熟悉微信開(kāi)發(fā)者工具界面（2）了解微信小程序項(xiàng)目的文件類(lèi)型和目錄結(jié)構(gòu)（3）創(chuàng)建并分析一個(gè)簡(jiǎn)單的微信小程序微信開(kāi)發(fā)者工具提供了一個(gè)可視化的界面，方便開(kāi)發(fā)者進(jìn)行代碼編寫(xiě)、調(diào)試和預(yù)覽。那么微信開(kāi)發(fā)者界面分為幾個(gè)區(qū)域，包括什么？課堂互動(dòng)小程序項(xiàng)目創(chuàng)建成功后，會(huì)進(jìn)入微信開(kāi)發(fā)者工具界面。微信開(kāi)發(fā)者工具界面菜單欄工具欄模擬器編輯器調(diào)試器一、微信開(kāi)發(fā)者工具界面微信開(kāi)發(fā)者工具界面工具欄菜單欄模擬器編輯器調(diào)試器一、微信開(kāi)發(fā)者工具界面菜單欄的功能管理項(xiàng)目、代碼片段及文件管理代碼控制界面中各區(qū)域的顯示和隱藏設(shè)置外觀、快捷鍵、編輯器更換開(kāi)發(fā)模式，切換賬號(hào)等一、微信開(kāi)發(fā)者工具界面菜單欄選擇菜單欄中的“幫助”菜單項(xiàng)，在其下拉菜單中選擇“開(kāi)發(fā)者文檔”菜單項(xiàng)，可以查看微信提供的小程序官方文檔。微信小程序官方文檔提供了關(guān)于框架、組件、API、云開(kāi)發(fā)等的說(shuō)明，供開(kāi)發(fā)者學(xué)習(xí)。小貼士微信小程序官方文檔一、微信開(kāi)發(fā)者工具界面工具欄：提供了常用功能的快捷按鈕常用快捷按鈕控制模擬器、編輯器和調(diào)試器顯示與隱藏的按鈕可視化按鈕云開(kāi)發(fā)按鈕模式切換下拉列表框編譯下拉列表框編譯、預(yù)覽、真機(jī)調(diào)試、清緩存按鈕上傳、版本管理按鈕一、微信開(kāi)發(fā)者工具界面常用按鈕操作單擊“編譯”可以編譯當(dāng)前的代碼文件，并自動(dòng)刷新模擬器；單擊“預(yù)覽”可以利用手機(jī)端或PC端預(yù)覽小程序的實(shí)際運(yùn)行效果；單擊“真機(jī)調(diào)試”可以利用手機(jī)端或PC端調(diào)試代碼，以幫助開(kāi)發(fā)者更好地定位和查找問(wèn)題。一、微信開(kāi)發(fā)者工具界面模擬器用于模擬手機(jī)環(huán)境，開(kāi)發(fā)者可以使用它查看小程序在不同型號(hào)手機(jī)上的運(yùn)行效果。然而，模擬器與真機(jī)環(huán)境仍然有所區(qū)別，當(dāng)開(kāi)發(fā)者需要驗(yàn)證小程序在真機(jī)上的表現(xiàn)或排查真機(jī)故障時(shí)，仍然要使用真機(jī)調(diào)試。此外，模擬器下方的狀態(tài)欄會(huì)顯示當(dāng)前頁(yè)面的路徑，如pages/index/index。模擬器一、微信開(kāi)發(fā)者工具界面編輯器編輯器左側(cè)資源管理器用于展示小程序項(xiàng)目的目錄結(jié)構(gòu)右側(cè)用于編寫(xiě)代碼在編寫(xiě)代碼的過(guò)程中保存代碼文件（如按“Ctrl+S”組合鍵），微信開(kāi)發(fā)者工具會(huì)自動(dòng)編譯運(yùn)行，此時(shí)開(kāi)發(fā)者可通過(guò)模擬器實(shí)時(shí)預(yù)覽代碼效果。一、微信開(kāi)發(fā)者工具界面調(diào)試器：包含多種調(diào)試工具常用調(diào)試工具Wxml幫助開(kāi)發(fā)者開(kāi)發(fā)和調(diào)試Wxml轉(zhuǎn)化后的頁(yè)面，開(kāi)發(fā)者在此處可以看到真實(shí)的頁(yè)面結(jié)構(gòu)及對(duì)應(yīng)的WXSS屬性，還可以修改WXSS屬性Console可以顯示小程序的輸出信息、錯(cuò)誤信息等，還可以直接編寫(xiě)和執(zhí)行代碼Sources顯示當(dāng)前項(xiàng)目的腳本文件Network觀察發(fā)送的請(qǐng)求和調(diào)用文件的信息AppData顯示當(dāng)前項(xiàng)目運(yùn)行時(shí)的具體數(shù)據(jù)，并且開(kāi)發(fā)者還可以在此處編輯數(shù)據(jù)，數(shù)據(jù)會(huì)被實(shí)時(shí)地反饋到頁(yè)面上Storage用于查看和管理本地?cái)?shù)據(jù)存儲(chǔ)的情況一、微信開(kāi)發(fā)者工具界面為方便開(kāi)發(fā)者使用，微信開(kāi)發(fā)者工具提供了大量快捷鍵。熟練使用快捷鍵，可以在很大程度上幫助開(kāi)發(fā)者提高開(kāi)發(fā)效率。小貼士通常情況下，相同類(lèi)型的文件用來(lái)實(shí)現(xiàn)同一類(lèi)功能。類(lèi)型擴(kuò)展名屬性作用WXML文件wxml結(jié)構(gòu)文件用于描述小程序的頁(yè)面結(jié)構(gòu)WXSS文件wxss樣式文件用于描述小程序的頁(yè)面樣式JSON文件json配置文件用于設(shè)置小程序的頁(yè)面路徑、窗口表現(xiàn)、標(biāo)簽導(dǎo)航、網(wǎng)絡(luò)超時(shí)時(shí)間、debug模式等JavaScript文件js邏輯文件用于開(kāi)發(fā)小程序的業(yè)務(wù)邏輯功能（如響應(yīng)用戶(hù)操作），以及調(diào)用小程序的API（如獲取用戶(hù)數(shù)據(jù)）圖片文件Png、Jpggif圖片資源二、文件類(lèi)型其他類(lèi)型文件音頻視頻二、文件類(lèi)型通過(guò)樣例小程序可以了解微信小程序項(xiàng)目的目錄結(jié)構(gòu)。打開(kāi)樣例小程序，在資源管理器中可以看到其目錄結(jié)構(gòu)樣例小程序的目錄結(jié)構(gòu)目錄結(jié)構(gòu)全局文件頁(yè)面文件工具類(lèi)文件三、目錄結(jié)構(gòu)在pages屬性中添加頁(yè)面路徑，編譯或保存代碼后會(huì)自動(dòng)生成相關(guān)的頁(yè)面文件，頁(yè)面中默認(rèn)顯示的是什么路徑？課堂互動(dòng)步驟1打開(kāi)微信開(kāi)發(fā)者工具，選擇“項(xiàng)目”→“新建項(xiàng)目”菜單項(xiàng)，新建一個(gè)項(xiàng)目并命名為“helloworld”。步驟2創(chuàng)建“helloworld”項(xiàng)目后，微信開(kāi)發(fā)者工具會(huì)自動(dòng)添加默認(rèn)的目錄和頁(yè)面。在模擬器中，可以看到用戶(hù)頭像、用戶(hù)昵稱(chēng)及“HelloWorld”文本內(nèi)容。創(chuàng)建并分析簡(jiǎn)單的微信小程序任務(wù)實(shí)施模擬器運(yùn)行效果步驟

3在app.json文件中，通過(guò)pages屬性配置頁(yè)面路徑，其中包含index和logs兩個(gè)頁(yè)面。創(chuàng)建并分析簡(jiǎn)單的微信小程序任務(wù)實(shí)施pages屬性在pages屬性中添加頁(yè)面路徑，編譯或保存代碼后會(huì)自動(dòng)生成相關(guān)的頁(yè)面文件，頁(yè)面中默認(rèn)顯示的是其本身的路徑。小貼士步驟4在index.wxml文件中，由于用戶(hù)頭像及用戶(hù)昵稱(chēng)都是開(kāi)放數(shù)據(jù)，所以通過(guò)open-data組件顯示，而“HelloWorld”文本內(nèi)容（motto變量值）則通過(guò)text組件顯示。創(chuàng)建并分析簡(jiǎn)單的微信小程序任務(wù)實(shí)施index.wxml文件步驟5在index.js文件中，Page中的data屬性用于定義頁(yè)面的初始數(shù)據(jù)。例如，變量motto的值為“HelloWorld”。創(chuàng)建并分析簡(jiǎn)單的微信小程序任務(wù)實(shí)施變量motto步驟6在index.wxss文件中，為組件添加樣式。例如，使用margin-top屬性可以設(shè)置上外邊距，此處使用它設(shè)置“HelloWorld”文本內(nèi)容距頂部的高度為200px（像素）。創(chuàng)建并分析簡(jiǎn)單的微信小程序任務(wù)實(shí)施

為組件添加樣式設(shè)置用戶(hù)昵稱(chēng)的樣式設(shè)置用戶(hù)頭像的樣式設(shè)置文本內(nèi)容的樣式1．實(shí)訓(xùn)目標(biāo)（1）練習(xí)使用微信開(kāi)發(fā)者工具創(chuàng)建小程序項(xiàng)目。（2）練習(xí)閱讀和修改代碼。2．實(shí)訓(xùn)內(nèi)容創(chuàng)建一個(gè)微信小程序項(xiàng)目，在空白頁(yè)面顯示“HelloWeChat”文本內(nèi)容。3．操作提示（1）在微信開(kāi)發(fā)者工具中創(chuàng)建一個(gè)小程序項(xiàng)目，項(xiàng)目名稱(chēng)為“hellowechat”。（2）在pages文件夾中刪除index和logs子文件夾。項(xiàng)目實(shí)訓(xùn)項(xiàng)目實(shí)訓(xùn)（3）在app.json文件中刪除原有的頁(yè)面路徑，并添加hellowechat頁(yè)面路徑，代碼如下。"pages":["pages/hellowechat/hellowechat"],（4）編譯或保存代碼，自動(dòng)生成hellowechat.wxml、hellowechat.wxss、hellowechat.json和hellowechat.js4個(gè)基本文件。（5）修改hellowechat.wxml文件中的代碼，代碼如下。<text>HelloWeChat</text>（6）編譯或保存代碼，在模擬器中查看運(yùn)行效果。1．選擇題（1）下列關(guān)于微信小程序的說(shuō)法，錯(cuò)誤的是（

）。A．微信小程序不需要下載安裝即可使用B．微信小程序不支持跨平臺(tái)C．微信小程序具有開(kāi)發(fā)周期短、開(kāi)發(fā)成本低等優(yōu)點(diǎn)D．用戶(hù)可以通過(guò)掃碼、微信搜索等方式快速獲取微信小程序項(xiàng)目考核（2）下列關(guān)于微信小程序功能的說(shuō)法，錯(cuò)誤的是（

）。A．微信小程序支持對(duì)話(huà)分享B．微信小程序支持搜索查找和歷史列表C．微信小程序可以與微信公眾號(hào)關(guān)聯(lián)D．微信小程序不支持掛起狀態(tài)項(xiàng)目考核（3）下列關(guān)于微信開(kāi)發(fā)者工具的說(shuō)法，正確的是（

）。A．在Wxml面板中不可以修改WXSS屬性B．在Console面板中可以直接編寫(xiě)和執(zhí)行代碼C．AppData面板用于顯示當(dāng)前項(xiàng)目的腳本文件D．Sources面板用于顯示當(dāng)前項(xiàng)目運(yùn)行時(shí)的具體數(shù)據(jù)項(xiàng)目考核（4）下列關(guān)于微信小程序目錄結(jié)構(gòu)的說(shuō)法，錯(cuò)誤的是（

）。A．a(chǎn)pp.js文件用于設(shè)置小程序的全局邏輯B．project.config.json文件是項(xiàng)目公共配置文件C．a(chǎn)pp.json文件用于設(shè)置小程序的全局樣式D．pages文件夾用于存放小程序的頁(yè)面文件項(xiàng)目考核2．填空題（1）用戶(hù)可以通過(guò)掃碼、微信搜索、微信公眾號(hào)、好友推薦等方式快速獲取___________。（2）微信小程序的開(kāi)發(fā)流程主要包括4個(gè)步驟，分別是注冊(cè)微信小程序賬號(hào)、___________、創(chuàng)建微信小程序項(xiàng)目，以及________________________。（3）微信開(kāi)發(fā)者工具界面包括__________、工具欄、__________、編輯器和__________。（4）線(xiàn)上所有用戶(hù)都可以使用的微信小程序版本是__________。（5）微信小程序的目錄結(jié)構(gòu)包括__________、__________和工具類(lèi)文件3類(lèi)。項(xiàng)目考核3．操作題創(chuàng)建一個(gè)微信小程序項(xiàng)目，在空白頁(yè)面顯示“myprogram”文本內(nèi)容并上傳小程序。

項(xiàng)目考核完成所有學(xué)習(xí)任務(wù)之后，請(qǐng)學(xué)生按照以下要求完成學(xué)習(xí)成果評(píng)價(jià)。全班同學(xué)每4人一組，各組成員結(jié)合課前、課中和課后的學(xué)習(xí)情況，以及項(xiàng)目實(shí)訓(xùn)和項(xiàng)目考核情況，按照表1-4的評(píng)價(jià)標(biāo)準(zhǔn)對(duì)本項(xiàng)目的學(xué)習(xí)成果進(jìn)行自評(píng)和互評(píng)（組內(nèi)成員互相打分），然后配合指導(dǎo)教師完成師評(píng)及總評(píng)。

項(xiàng)目評(píng)價(jià)項(xiàng)目評(píng)價(jià)學(xué)習(xí)成果評(píng)價(jià)表評(píng)價(jià)項(xiàng)目評(píng)價(jià)內(nèi)容分值評(píng)價(jià)得分自評(píng)互評(píng)師評(píng)知識(shí)

（50%）微信小程序的概念5分

微信小程序的特點(diǎn)和功能10分

微信小程序的開(kāi)發(fā)流程15分

微信開(kāi)發(fā)者工具界面各區(qū)域的功能及作用10分

微信小程序的文件類(lèi)型和目錄結(jié)構(gòu)10分

能力

（40%）注冊(cè)微信小程序賬號(hào)5分

下載并安裝微信開(kāi)發(fā)者工具10分

創(chuàng)建微信小程序項(xiàng)目15分

開(kāi)發(fā)簡(jiǎn)單的微信小程序10分

素養(yǎng)

（10%）具備良好的學(xué)習(xí)態(tài)度和學(xué)習(xí)習(xí)慣5分

高質(zhì)量地完成項(xiàng)目實(shí)訓(xùn)和項(xiàng)目考核5分

合計(jì)100分

總評(píng)自評(píng)（20%）+互評(píng)（20%）+師評(píng)（60%）=綜合等級(jí)：

教師（簽名）：

注：綜合等級(jí)可以“優(yōu)”（總評(píng)得分≥90分）、“良”（80分≤總評(píng)得分<90分）、“中”（60分≤總評(píng)得分<80分）、“差”（總評(píng)得分<60分）為標(biāo)準(zhǔn)進(jìn)行評(píng)價(jià)。

課堂小結(jié)謝謝！微信小程序開(kāi)發(fā)案例教程主講人:全書(shū)目錄微信小程序開(kāi)發(fā)入門(mén)項(xiàng)目一微信小程序的視圖項(xiàng)目二微信小程序的配置和邏輯項(xiàng)目三視圖容器組件與基礎(chǔ)內(nèi)容組件項(xiàng)目四表單組件與其他組件項(xiàng)目五網(wǎng)絡(luò)API與文件API項(xiàng)目六數(shù)據(jù)緩存API與用戶(hù)信息API項(xiàng)目七媒體API與位置API項(xiàng)目八交互API與設(shè)備API項(xiàng)目九微信小程序云開(kāi)發(fā)項(xiàng)目十“私房菜館”微信小程序項(xiàng)目十一項(xiàng)目二微信小程序的視圖項(xiàng)目導(dǎo)讀微信小程序的每個(gè)頁(yè)面都由視圖層和邏輯層兩部分組成，其中視圖層用于描述頁(yè)面的結(jié)構(gòu)和樣式，由WXML和WXSS兩個(gè)文件共同實(shí)現(xiàn)。本項(xiàng)目將帶領(lǐng)大家了解WXML文件和WXSS文件的基礎(chǔ)知識(shí)，并學(xué)習(xí)通過(guò)這兩個(gè)文件設(shè)置小程序頁(yè)面結(jié)構(gòu)和樣式的方法。知識(shí)目標(biāo)了解WXML文件和WXSS文件的基礎(chǔ)知識(shí)。掌握數(shù)據(jù)綁定、事件綁定、條件渲染及列表渲染的方法。掌握模板定義、模板使用及文件引用的方法。熟悉選擇器、盒模型及flex布局的相關(guān)知識(shí)。了解尺寸單位、樣式導(dǎo)入及內(nèi)聯(lián)樣式的相關(guān)知識(shí)。技能目標(biāo)培養(yǎng)實(shí)踐能力，在實(shí)踐中學(xué)習(xí)，在學(xué)習(xí)中實(shí)踐。學(xué)習(xí)目標(biāo)素質(zhì)目標(biāo)能夠使用WXML文件構(gòu)建微信小程序的頁(yè)面結(jié)構(gòu)。能夠使用WXSS文件設(shè)置微信小程序的頁(yè)面樣式。2項(xiàng)目目錄任務(wù)一WXML文件——小程序的結(jié)構(gòu)任務(wù)二WXSS文件——小程序的樣式1任務(wù)一WXML文件——小程序的結(jié)構(gòu)（1）認(rèn)識(shí)WXML（2）數(shù)據(jù)綁定和事件綁定（3）條件渲染和列表渲染（4）模板與引用任務(wù)一WXML文件——小程序的結(jié)構(gòu)任務(wù)描述（1）認(rèn)識(shí)WXML，學(xué)習(xí)數(shù)據(jù)綁定、事件綁定、條件渲染、列表渲染、模板的定義和使用，以及文件引用的方法。（2）使用WXML文件設(shè)置“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)。WXML的基本語(yǔ)法格式一、認(rèn)識(shí)WXML<標(biāo)簽名屬性名1="屬性值1"屬性名2="屬性值2"…>組件內(nèi)容</標(biāo)簽名>文件含義作用類(lèi)比WXML（WeiXinmarkuplanguage）小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言構(gòu)建頁(yè)面的結(jié)構(gòu)網(wǎng)頁(yè)開(kāi)發(fā)中的HTML<view>標(biāo)簽——引用視圖容器組件HTML中的<div>標(biāo)簽一、認(rèn)識(shí)WXML內(nèi)容作用位置要求標(biāo)簽名組件的名稱(chēng)——必須使用小寫(xiě)字母屬性修飾組件位于開(kāi)標(biāo)簽（<標(biāo)簽名>）中標(biāo)簽名之后除一些特殊屬性外，大多數(shù)屬性的格式均為屬性名="屬性值"（key="value"），屬性值通常使用雙引號(hào)引起來(lái)組件內(nèi)容——位于開(kāi)標(biāo)簽和閉標(biāo)簽（</標(biāo)簽名>）之間小貼士組件由微信小程序框架提供，是微信小程序頁(yè)面的基本組成單元，在WXML文件中用標(biāo)簽來(lái)引用組件。微信小程序中有許多組件，如view、text、input、progress、image等，項(xiàng)目四和項(xiàng)目五會(huì)對(duì)它們進(jìn)行詳細(xì)介紹。例如，具有class屬性的text組件的示例代碼一、認(rèn)識(shí)WXML<textclass="title">這是一個(gè)標(biāo)題</text>各部分含義<text>標(biāo)簽由開(kāi)標(biāo)簽“<text>”和閉標(biāo)簽“</text>”組成class屬性的值由開(kāi)發(fā)者決定開(kāi)發(fā)時(shí)通常將其設(shè)為有意義的值，這樣可以增強(qiáng)代碼的可讀性屬于雙邊標(biāo)簽“這是一個(gè)標(biāo)題”組件內(nèi)容一、認(rèn)識(shí)WXML有的組件沒(méi)有組件內(nèi)容，此時(shí)開(kāi)標(biāo)簽和閉標(biāo)簽可以合并為一個(gè)單邊標(biāo)簽，單邊標(biāo)簽必須以“/>”結(jié)尾，否則會(huì)報(bào)錯(cuò)。示例代碼如下。<inputtype="number"/>一個(gè)組件可以有多個(gè)屬性，也可以沒(méi)有屬性。WXML中所有組件都支持的屬性稱(chēng)為共同屬性。一、認(rèn)識(shí)WXML屬性類(lèi)型描述注解idstring組件的唯一標(biāo)識(shí)在整個(gè)頁(yè)面是唯一的classstring組件的樣式類(lèi)名為組件設(shè)置樣式stylestring組件的內(nèi)聯(lián)樣式為組件設(shè)置內(nèi)聯(lián)樣式hiddenboolean組件是否顯示所有組件默認(rèn)顯示data-*any自定義屬性組件上的事件觸發(fā)時(shí)，會(huì)將該屬性發(fā)送給事件處理函數(shù)bind*/catch*eventhandle組件的事件綁定事件處理函數(shù)，用于響應(yīng)用戶(hù)操作組件的共同屬性動(dòng)態(tài)改變界面的功能可以通過(guò)數(shù)據(jù)綁定和事件綁定實(shí)現(xiàn)。二、數(shù)據(jù)綁定和事件綁定（一）數(shù)據(jù)綁定數(shù)據(jù)綁定通常會(huì)涉及WXML和JS兩個(gè)文件。涉及的文件WXMLJS1．簡(jiǎn)單綁定（1）文本內(nèi)容綁定。該綁定是將數(shù)據(jù)動(dòng)態(tài)綁定到組件的文本內(nèi)容中。例如，在WXML文件中輸入如下代碼。二、數(shù)據(jù)綁定和事件綁定<view>{{message}}</view>數(shù)據(jù)綁定簡(jiǎn)單綁定文本內(nèi)容綁定組件屬性綁定運(yùn)算綁定組合綁定二、數(shù)據(jù)綁定和事件綁定Page({data:{ //初始化數(shù)據(jù)

message:'HelloWeChat'}})在相應(yīng)的JS文件中輸入如下代碼。文本內(nèi)容綁定示例運(yùn)行效果二、數(shù)據(jù)綁定和事件綁定<viewid="user-{{uid}}"></view>（2）組件屬性綁定。該綁定是將數(shù)據(jù)動(dòng)態(tài)綁定到組件的屬性中。例如，在WXML文件中輸入如下代碼。在相應(yīng)的JS文件中輸入如下代碼。Page({data:{ //初始化數(shù)據(jù)

uid:'001'}})二、數(shù)據(jù)綁定和事件綁定編譯或保存上述代碼后，在調(diào)試器的Wxml面板中可以看到代碼執(zhí)行情況。此外，還可以使用組件的控制屬性綁定數(shù)據(jù)。例如，在WXML文件中輸入如下代碼。<!--wx:if是控制屬性，如果condition為true則顯示組件，否則不顯示--><viewwx:if="{{condition}}">hello</view>Wxml面板中的代碼執(zhí)行情況二、數(shù)據(jù)綁定和事件綁定在相應(yīng)的JS文件中輸入如下代碼。編譯或保存上述代碼后，模擬器中不顯示view組件。Page({data:{ //初始化數(shù)據(jù)

condition:false}})小貼士在WXML文件中，只能使用<!--……-->格式的注釋?zhuān)荒苁褂谩?/”格式的注釋。在WXML文件中，為什么只能使用<!--……-->格式的注釋?zhuān)荒苁褂谩?/”格式的注釋?zhuān)慷?、?shù)據(jù)綁定和事件綁定2．運(yùn)算綁定運(yùn)算綁定是指對(duì)雙花括號(hào)內(nèi)綁定的數(shù)據(jù)進(jìn)行運(yùn)算。<viewclass="title">運(yùn)算綁定示例</view><view>三元運(yùn)算：{{result?1:2}}</view><view>算術(shù)運(yùn)算：{{a}}+{}+{{c}}={{a+b+c}}</view><viewwx:if="{{a>5}}">邏輯運(yùn)算</view><view>字符串運(yùn)算：{{"hello"+name}}</view><view>數(shù)據(jù)路徑運(yùn)算：{{Student.stuID}}{{S}}+{{array[2]}}</view>運(yùn)算綁定支持的運(yùn)算類(lèi)型三元運(yùn)算算術(shù)運(yùn)算邏輯運(yùn)算字符串運(yùn)算數(shù)據(jù)路徑運(yùn)算是指根據(jù)結(jié)構(gòu)性變量（如對(duì)象、數(shù)組等）的結(jié)構(gòu)，對(duì)通過(guò)對(duì)象屬性或數(shù)組下標(biāo)等方式獲取的數(shù)據(jù)進(jìn)行運(yùn)算。例如，在WXML文件中輸入如下代碼。二、數(shù)據(jù)綁定和事件綁定在相應(yīng)的JS文件中輸入如下代碼。Page({data:{ //初始化數(shù)據(jù)

result:'true', //初始化普通數(shù)據(jù)

a:100,b:200,c:300,name:'張三',Student:{ //初始化對(duì)象數(shù)據(jù)

stuID:'20230112',name:'張三'},array:[ //初始化數(shù)組數(shù)據(jù)

'2021','2022','2023']}})二、數(shù)據(jù)綁定和事件綁定3．組合綁定組合綁定就是在雙花括號(hào)內(nèi)將綁定的數(shù)據(jù)進(jìn)行組合，構(gòu)成新的組合。組合綁定常用于數(shù)組或?qū)ο?。下面以?shù)組的組合綁定為例進(jìn)行介紹。例如，在WXML文件中輸入如下代碼。<!--wx:for是控制屬性，使用wx:for綁定數(shù)組并對(duì)組件進(jìn)行渲染--><viewwx:for="{{[zero,1,2,3,4]}}">{{item}}</view>二、數(shù)據(jù)綁定和事件綁定在相應(yīng)的JS文件中輸入如下代碼。Page({data:{ //初始化數(shù)據(jù)

zero:0}})組合綁定示例運(yùn)行效果二、數(shù)據(jù)綁定和事件綁定（二）事件綁定事件綁定是指在組件中綁定一個(gè)事件，用于將用戶(hù)在視圖層的行為反饋到邏輯層進(jìn)行處理，其寫(xiě)法與組件屬性綁定類(lèi)似，以key="value"的形式呈現(xiàn)。key以bind或catch開(kāi)頭，后面跟事件類(lèi)型，如bindtap、catchtouchstartvalue是一個(gè)字符串，需要在相應(yīng)JS文件的Page中定義同名的函數(shù)，否則事件觸發(fā)時(shí)會(huì)報(bào)錯(cuò)。二、數(shù)據(jù)綁定和事件綁定相應(yīng)JS文件的Page中的事件處理函數(shù)代碼如下。Page({myTap(event){ //定義事件處理函數(shù)myTap，接收參數(shù)eventconsole.log('Theitemistapped') //在調(diào)試器的Console面板中輸出提示信息

console.log(event.timeStamp+'-tap')//在調(diào)試器的Console面板中輸出單擊前后的毫秒數(shù)

}})<view><buttontype="primary"bindtap="myTap">點(diǎn)我吧</button></view>例如，在WXML文件的button組件中綁定一個(gè)tap事件，代碼如下。小貼士事件處理函數(shù)的event參數(shù)包含許多信息，可通過(guò)console.log(event)在調(diào)試器的Console面板中輸出event參數(shù)的內(nèi)容。二、數(shù)據(jù)綁定和事件綁定當(dāng)用戶(hù)單擊button組件時(shí)，myTap函數(shù)會(huì)自動(dòng)執(zhí)行。模擬器中的運(yùn)行結(jié)果Console面板中的輸出結(jié)果單擊button組件保存上述代碼單擊“點(diǎn)我吧”按鈕查看輸出結(jié)果二、數(shù)據(jù)綁定和事件綁定WXML文件中一些常見(jiàn)的事件類(lèi)型如表所示。常見(jiàn)的事件類(lèi)型類(lèi)

型描述touchstart手指觸摸動(dòng)作開(kāi)始touchmove手指觸摸后移動(dòng)touchcancle手指觸摸動(dòng)作被打斷，如來(lái)電提醒、彈窗等touchend手指觸摸動(dòng)作結(jié)束tap手指觸摸后馬上離開(kāi)longpress手指觸摸后，超過(guò)350ms再離開(kāi)，如果指定了事件回調(diào)函數(shù)并觸發(fā)了該事件，tap事件將不會(huì)被觸發(fā)二、數(shù)據(jù)綁定和事件綁定例如，有3個(gè)單擊事件，它們是嵌套關(guān)系，并且都用bind綁定，WXML文件中的代碼如右圖。<viewid="outer"bindtap="outer">outerview<viewid="middle"bindtap="middle">middleview<viewid="inner"bindtap="inner">innerview</view></view></view>事件分類(lèi)觸發(fā)效果綁定冒泡事件向父節(jié)點(diǎn)傳遞使用bind事件綁定非冒泡事件不會(huì)向父節(jié)點(diǎn)傳遞，而是只處理相應(yīng)的事件使用catch事件綁定微信小程序默認(rèn)的事件均為冒泡事件二、數(shù)據(jù)綁定和事件綁定相應(yīng)JS文件的Page中的事件處理函數(shù)代碼如下。Page({outer(){console.log('outerbindtapclick')},middle(){console.log('middlebindtapclick')},inner(){console.log('innerbindtapclick')}})二、數(shù)據(jù)綁定和事件綁定保存上述代碼后，在模擬器中分別單擊“outerview”“middleview”和“innerview”，Console面板中的輸出結(jié)果如圖所示。單擊“outerview”的輸出結(jié)果單擊“innerview”的輸出結(jié)果單擊“middleview”的輸出結(jié)果Console面板中的輸出結(jié)果二、數(shù)據(jù)綁定和事件綁定如果將WXML文件中middleview對(duì)應(yīng)組件的bindtap改為catchtap，保存代碼后，分別單擊“middleview”和“innerview”，Console面板中的輸出結(jié)果如圖所示?？梢钥闯鰞纱螁螕舳紱](méi)有輸出“outerbindtapclick”，這是因?yàn)閏atchtap阻止了tap事件冒泡。Console面板中的輸出結(jié)果單擊“middleview”的輸出結(jié)果單擊“innerview”的輸出結(jié)果（一）條件渲染在WXML文件中，使用wx:if控制屬性判斷是否渲染組件。由于wx:if是一個(gè)控制屬性，因此可以將其添加到組件中。示例代碼如下。三、條件渲染和列表渲染<viewwx:if="{{condition}}">True</view>上述代碼中，當(dāng)condition為true時(shí)，會(huì)渲染對(duì)應(yīng)的組件，否則不會(huì)渲染。小貼士wx:if控制屬性與hidden控制屬性實(shí)現(xiàn)的功能類(lèi)似，區(qū)別在于，wx:if屬性是根據(jù)條件判斷是否渲染組件，而hidden屬性控制的組件始終會(huì)進(jìn)行渲染，只是根據(jù)屬性值決定組件是否在頁(yè)面中顯示。一般來(lái)說(shuō)，wx:if屬性的切換消耗更高，而hidden屬性的初始渲染消耗更高。因此，如果組件顯示或切換比較頻繁，最好使用hidden屬性，反之則使用wx:if屬性。三、條件渲染和列表渲染<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>3}}">2</view><viewwx:else>3</view>多條件判斷方法使用wx:if和wx:else使用wx:if和wx:elif使用wx:if、wx:elif和wx:else三、條件渲染和列表渲染如果需要一次性判斷多個(gè)組件，可以使用<block>標(biāo)簽將多個(gè)組件包裝起來(lái)，并在開(kāi)標(biāo)簽中使用wx:if控制屬性。示例代碼如下。<blockwx:if="{{condition}}"><view>view1</view><view>view2</view></block>小貼士<block>并不是一個(gè)組件，它只是一個(gè)包裝元素，只支持控制屬性，并不會(huì)對(duì)頁(yè)面進(jìn)行任何渲染。wx:if控制屬性與hidden控制屬性的區(qū)別？怎樣在對(duì)象數(shù)組中唯一標(biāo)識(shí)一個(gè)對(duì)象？三、條件渲染和列表渲染（二）列表渲染在開(kāi)發(fā)微信小程序時(shí)，可以使用列表渲染將數(shù)組中的所有數(shù)據(jù)依次顯示在頁(yè)面上。在WXML文件中，使用wx:for控制屬性綁定一個(gè)數(shù)組，就可以使用數(shù)組中的數(shù)據(jù)重復(fù)渲染組件。<!--綁定數(shù)組渲染--><viewwx:for="{{array}}">{{index}}:{{item}}</view>在相應(yīng)的JS文件中輸入如下代碼。Page({data:{array:['view1','view2','view3']}})在WXML文件中輸入如下代碼。小貼士當(dāng)wx:for綁定的數(shù)據(jù)為字符串時(shí)，會(huì)將字符串解析為字符數(shù)組。例如，<viewwx:for="array"></view>等同于<viewwx:for="{{['a','r','r','a','y']}}"></view>。三、條件渲染和列表渲染此外，還可以使用wx:for-index指定數(shù)組當(dāng)前元素的下標(biāo)變量名，使用wx:for-item指定數(shù)組當(dāng)前元素的變量名。示例代碼如下。<viewwx:for="{{array}}"wx:for-index="i"wx:for-item="j">{{i}}:{{j}}</view>三、條件渲染和列表渲染如果數(shù)組元素的位置會(huì)動(dòng)態(tài)改變或有新的元素添加到數(shù)組中，但希望數(shù)組中的元素保持已有的特征和狀態(tài)（如input中的輸入內(nèi)容、switch的選中狀態(tài)等），則需要使用wx:key指定數(shù)組中元素的唯一標(biāo)識(shí)符。示例代碼：<!--*this代表for循環(huán)中的item,此時(shí)需要item是一個(gè)唯一的字符串或數(shù)字--><viewwx:for="{{array}}"wx:key="*this">{{index}}:{{item}}</view>小貼士如果wx:for綁定的數(shù)組為對(duì)象數(shù)組，則wx:key的值應(yīng)為對(duì)象的key，這樣就可以在對(duì)象數(shù)組中唯一標(biāo)識(shí)一個(gè)對(duì)象。三、條件渲染和列表渲染操作：打開(kāi)1號(hào)開(kāi)關(guān)→單擊“Addtothefront”按鈕增加一個(gè)開(kāi)關(guān)。結(jié)果：1號(hào)開(kāi)關(guān)仍保持打開(kāi)狀態(tài)。wx:key的使用效果三、條件渲染和列表渲染如果明確知道數(shù)組是靜態(tài)的，或者不關(guān)注其順序，則可以不使用wx:key。與blockwx:if類(lèi)似，也可以將wx:for用在<block>標(biāo)簽中，以此來(lái)渲染包含多個(gè)組件的結(jié)構(gòu)塊。示例代碼如下。<blockwx:for="{{[1,2,3,4,5,6]}}"><view>這是序號(hào)：{{index}}</view><view>這是值：{{item}}</view></block>四、模板與引用（一）模板<templatename="stuTemp"><view>stuName:{{name}}</view><view>stuSex:{{sex}}</view><view>stuAge:{{age}}</view></template>例如，新建template.wxml文件，并在其中定義一個(gè)名為stuTemp的模板，用于顯示學(xué)生的姓名、性別和年齡。模板的定義模板是在<template>標(biāo)簽中定義的代碼片段。定義模板時(shí)，通常會(huì)新建一個(gè)WXML文件放置模板，并使用name屬性定義模板名稱(chēng)。四、模板與引用（2）模板使用模板使用利用<import>標(biāo)簽的src屬性引用模板所在的文件通過(guò)<template>標(biāo)簽的is屬性聲明需要使用的模板，通過(guò)data屬性傳入需要的數(shù)據(jù)其中，對(duì)象數(shù)據(jù)的傳入可以通過(guò)“…對(duì)象名”或“屬性名1:'屬性值1',屬性名2:'屬性值2',……”的方式實(shí)現(xiàn)。小貼士WXS（WeiXinscript）是微信小程序的一套腳本語(yǔ)言，它將本應(yīng)該放在JS文件中處理的代碼直接放在WXML文件中處理，并結(jié)合WXML文件共同構(gòu)建頁(yè)面的結(jié)構(gòu)。WXS有兩種使用方式，一種是以<wxs>標(biāo)簽的形式嵌入WXML文件中，另一種是以擴(kuò)展名為“wxs”的文件獨(dú)立存在，然后在WXML文件中引用。四、模板與引用舉例:在WXML文件中通過(guò)兩種方法使用stuTemp模板。<importsrc="template.wxml"/><!--“...對(duì)象名”方式--><templateis="stuTemp"data="{{...person}}"/><!--“屬性名1:'屬性值1',屬性名2:'屬性值2',……”方式--><templateis="stuTemp"data="{{name:'李四',sex:'男',age:'24'}}"/>四、模板與引用在相應(yīng)的JS文件中定義person對(duì)象。Page({data:{person:{name:'張三',sex:'男',age:'23'}}})四、模板與引用<template>標(biāo)簽的is屬性還可以使用三元運(yùn)算來(lái)動(dòng)態(tài)決定使用的模板。例如，在template.wxml文件中定義temp1和temp2兩個(gè)模板。<templatename="temp1"><view>使用temp1模板</view></template><templatename="temp2"><view>使用temp2模板</view></template>四、模板與引用在WXML文件中使用wx:for屬性綁定一個(gè)數(shù)組，然后使用<template>標(biāo)簽的is屬性判斷數(shù)組中元素的奇偶來(lái)決定使用的模板，代碼如下。<blockwx:for="{{[1,2,3,4,5]}}"><!--偶數(shù)使用temp1模板，奇數(shù)使用temp2模板--><templateis="{{item%2==0?'temp1':'temp2'}}"/></block>四、模板與引用（二）引用引用方式importinclude四、模板與引用在A.wxml文件中定義模板A，代碼如下。<templatename="A"><text>Atemplate</text></template>（1）import引用import有作用域的概念。例如，有A、B、C3個(gè)頁(yè)面，其中B引用A，C引用B，則B可以使用A中定義的模板，C可以使用B中定義的模板，但不可以使用A中定義的模板，否則會(huì)輸出警告信息。四、模板與引用在B.wxml文件中引用A.wxml文件，并使用模板A，然后定義模板B。<importsrc="A.wxml"/><templateis="A"/><templatename="B"><text>Btemplate</text></template>在C.wxml文件中引用B.wxml文件，并使用模板A和模板B。<importsrc="B.wxml"/><templateis="A"/><templateis="B"/>四、模板與引用編譯C.wxml文件后，Console面板會(huì)輸出警告信息，提示“TemplateAnotfound”。Console面板輸出的警告信息四、模板與引用（2）include引用include可以引用目標(biāo)文件中除<template>標(biāo)簽和<wxs>標(biāo)簽外的其他內(nèi)容。示例代碼如下。<includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/>引用的header.wxml文件中的代碼如下。<viewclass="header">首頁(yè)</view><templatename="A"><text>Atemplate</text></template>四、模板與引用引用的footer.wxml文件中的代碼如下。<viewclass="footer">歡迎訪問(wèn)</view>include引用示例運(yùn)行效果開(kāi)發(fā)微信小程序的流程是怎樣的？“家電商城”微信小程序的首頁(yè)主要包括搜索區(qū)、海報(bào)輪播區(qū)（后續(xù)任務(wù)實(shí)施會(huì)講解，本任務(wù)實(shí)施暫時(shí)用廣告語(yǔ)代替）、宮格導(dǎo)航區(qū)及家電秒殺區(qū)。本任務(wù)實(shí)施主要構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)。構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)任務(wù)實(shí)施“家電商城”微信小程序首頁(yè)結(jié)構(gòu)后續(xù)會(huì)不斷完善該頁(yè)面。構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)任務(wù)實(shí)施“家電商城”微信小程序首頁(yè)最終效果在index.wxml文件中通過(guò)view組件構(gòu)建小程序首頁(yè)結(jié)構(gòu)的示范代碼構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)任務(wù)實(shí)施<viewclass="content"><viewclass="background"><!--搜索區(qū)--><viewclass="search"><textclass="searchContent">搜索商品</text></view><!--海報(bào)輪播區(qū)--><viewclass="logo"><viewclass="first">家電商城</view><viewclass="second">讓家變得更完美</view>構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)任務(wù)實(shí)施</view></view><!--宮格導(dǎo)航區(qū)--><viewclass="nav"><blockwx:for="{{navs}}"><viewclass="nav-item"><view>{{}}</view></view></block></view><!--分隔條--><viewclass="hr"></view><!--家電秒殺區(qū)--><viewclass="menu">家電秒殺</view></view>續(xù)在index.js文件的data屬性中添加頁(yè)面渲染初始數(shù)據(jù)的代碼。構(gòu)建“家電商城”微信小程序首頁(yè)的結(jié)構(gòu)任務(wù)實(shí)施Page({data:{navs:[{"name":"領(lǐng)優(yōu)惠券"},{"name":"掃碼購(gòu)物"},{"name":"物流查詢(xún)"},{"name":"拼團(tuán)"}]}})任務(wù)二WXSS文件——小程序的樣式（1）認(rèn)識(shí)WXSS （2）選擇器（3）尺寸單位

（4）盒模型（5）flex布局

（6）樣式導(dǎo)入（7）內(nèi)聯(lián)樣式任務(wù)描述（1）帶領(lǐng)大家認(rèn)識(shí)WXSS，學(xué)習(xí)選擇器、尺寸單位、盒模型、flex布局，以及樣式導(dǎo)入、內(nèi)聯(lián)樣式的相關(guān)知識(shí)；（2）使用WXSS文件設(shè)置“家電商城”微信小程序首頁(yè)的樣式。一、認(rèn)識(shí)WXSSWXSS（WeiXinstylesheets）是微信小程序的樣式語(yǔ)言，用于描述WXML文件中組件的樣式，如字體、顏色、布局等?；菊Z(yǔ)法格式如下。selector{property:value;}小貼士定義在app.wxss文件中的樣式為全局樣式，作用于所有頁(yè)面；定義在頁(yè)面的WXSS文件中的樣式為頁(yè)面樣式，只作用于對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋app.wxss文件中相同的選擇器，即頁(yè)面樣式中的選擇器優(yōu)先級(jí)大于全局樣式中的選擇器。二、選擇器WXSS支持的選擇器選擇器示例示例說(shuō)明類(lèi)選擇器（.class）.intro選擇所有具有class="intro"屬性的組件ID選擇器（#id）#firstname選擇具有id="firstname"屬性的組件元素選擇器（element）view,text選擇所有view組件和所有text組件偽元素選擇器（::after）view::after在view組件后插入內(nèi)容偽元素選擇器（::before）view::before在view組件前插入內(nèi)容二、選擇器元素選擇器是一種最簡(jiǎn)單的選擇器，它以組件的名稱(chēng)作為選擇器。text{color:red;}二、選擇器（一）類(lèi)選擇器類(lèi)選擇器在實(shí)際開(kāi)發(fā)中應(yīng)用比較廣泛。在WXML文件中為組件添加class屬性在相應(yīng)的WXSS文件中通過(guò)class屬性值選擇組件，方法是在class屬性值前添加符號(hào)“.”二、選擇器在相應(yīng)的WXSS文件中輸入如下代碼。.myclass_1{ /*選擇class屬性值為myclass_1的組件*/font-size:15pt; /*設(shè)置文字大小為15pt*/}.myclass_2{ /*選擇class屬性值為myclass_2的組件*/font-size:17pt;font-weight:bold; /*設(shè)置文字加粗*/margin:20rpx; /*設(shè)置外邊距為20rpx*/}<viewclass="myclass_1">myclass_1的樣式</view><viewclass="myclass_2">myclass_2的樣式</view>舉例在WXML文件中輸入如下代碼。二、選擇器運(yùn)行效果類(lèi)選擇器示例運(yùn)行效果小貼士如果一個(gè)組件的class屬性有多個(gè)值，那么這些值對(duì)應(yīng)的類(lèi)選擇器設(shè)置的樣式都會(huì)應(yīng)用到該組件上。（1）WXML文件中的代碼。<viewclass="myclass_1title">myclass_1title的樣式</view>（2）WXSS文件中的代碼。.myclass_1{font-size:15pt;font-weight:bold;}.title{font-size:17pt; /*會(huì)覆蓋前一個(gè)類(lèi)選擇器設(shè)置的font-size*/margin:27rpx;}二、選擇器（二）ID選擇器ID選擇器可以為具有id屬性（組件的唯一標(biāo)識(shí)，在整個(gè)頁(yè)面是唯一的）的組件設(shè)置樣式，方法是在id屬性值前添加符號(hào)“#”。例如，在WXML文件中輸入如下代碼。<view><text>普通文本</text><textid="myid">ID選擇器的文本</text></view>二、選擇器在相應(yīng)的WXSS文件中輸入如下代碼。#myid{color:white; /*設(shè)置文本顏色為白色*/background-color:black; /*設(shè)置背景顏色為黑色*/}

ID選擇器示例運(yùn)行效果三、尺寸單位尺寸單位——rpx（responsivepixelrpx規(guī)定所有手機(jī)的屏幕寬度均為750rpx，微信小程序編譯后，會(huì)進(jìn)行一次單位換算，將rpx轉(zhuǎn)換為px，自適應(yīng)屏幕寬度。三、尺寸單位不同型號(hào)手機(jī)屏幕寬度的單位換算手機(jī)型號(hào)屏幕寬度（px）rpx轉(zhuǎn)換為px（屏幕寬度/750）px轉(zhuǎn)換為rpx（750/屏幕寬度）iPhone53201rpx≈0.43px1px≈2.34rpxiPhone63751rpx=0.5px1px=2rpxiPhone12/13（Pro）3901rpx=0.52px1px≈1.92rpxiPhone14ProMax4281rpx≈0.57px1px≈1.75rpx小貼士通常情況下，設(shè)置組件的寬度、高度或邊距時(shí)，使用rpx作為尺寸單位，這樣設(shè)置的樣式通用性會(huì)更強(qiáng)。三、尺寸單位舉例input組件（輸入框）的寬度為700rpx，在模擬器中將手機(jī)型號(hào)分別切換為iPhone5和iPhone14ProMax，兩種型號(hào)手機(jī)的顯示效果如圖所示。

（a）iPhone5（b）iPhone14ProMaxrpx單位顯示效果三、尺寸單位如果將input組件的寬度由700rpx改為400px，然后在模擬器中將手機(jī)型號(hào)分別切換為iPhone5和iPhone14ProMax，兩種型號(hào)手機(jī)的顯示效果如圖所示。

（a）iPhone5（b）iPhone14ProMaxpx單位顯示效果四、盒模型盒模型（boxmodel）是頁(yè)面布局的一個(gè)重要概念。它將WXML文件中的每個(gè)組件看作一個(gè)盒子，模型結(jié)構(gòu)如圖所示。盒模型結(jié)構(gòu)四、盒模型盒模型外邊距不同盒子之間的距離邊框圍繞在內(nèi)容和內(nèi)邊距外的邊框，可以設(shè)置其線(xiàn)條、粗細(xì)、顏色等內(nèi)邊距內(nèi)容與邊框之間的距離內(nèi)容盒子的內(nèi)容區(qū)域，可以放置文本、圖像等四、盒模型在相應(yīng)的WXSS文件中輸入如下代碼。.box{width:80%; /*設(shè)置寬度為其父容器寬度的80%*/height:234rpx; /*設(shè)置高度為234rpx*/border:5rpxsolid#000000; /*設(shè)置邊框樣式：寬度為5rpx，實(shí)線(xiàn)，黑色*/padding:20rpx; /*設(shè)置內(nèi)邊距為20rpx*/margin:20rpx; /*設(shè)置外邊距為20rpx*/}舉例WXML文件中輸入如下代碼。<viewclass="box"><text>盒模型的內(nèi)容</text></view>四、盒模型運(yùn)行效果盒模型示例運(yùn)行效果四、盒模型默認(rèn)情況下，width和height屬性的值就是content的寬度和高度改變padding屬性的值，組件大小會(huì)隨之改變。將組件的box-sizing樣式屬性設(shè)置為border-box?width屬性的值就是content的寬度加左右內(nèi)邊距，?

height屬性的值就是content的高度加上下內(nèi)邊距。?改變padding屬性的值，組件大小不會(huì)改變。小貼士在微信小程序開(kāi)發(fā)中，容器是指包含和組織頁(yè)面內(nèi)容的組件，用于提供一個(gè)可以放置其他組件的區(qū)域。父容器是指當(dāng)前組件的上一級(jí)組件。text組件是行內(nèi)（inline）元素，view組件是塊級(jí)（block）元素。兩者明顯的區(qū)別是，行內(nèi)元素可以與其他行內(nèi)元素在一行顯示，而塊級(jí)元素單獨(dú)占一行；行內(nèi)元素不能設(shè)置寬度和高度，其默認(rèn)寬度就是文本的寬度，而塊級(jí)元素可以設(shè)置寬度和高度，其默認(rèn)寬度為父容器寬度。五、flex布局flex是flexiblebox的縮寫(xiě)，意為“彈性布局”，用于對(duì)容器進(jìn)行布局，在小程序開(kāi)發(fā)中比較常見(jiàn)。任何一個(gè)容器都可以設(shè)置flex布局。示例代碼如下。.container{display:flex;}設(shè)置flex布局操作對(duì)塊級(jí)元素使用display:flex設(shè)置對(duì)行內(nèi)元素使用display:inline-flex設(shè)置五、flex布局采用flex布局的容器稱(chēng)為flex容器，其所有子元素會(huì)自動(dòng)成為容器成員。默認(rèn)情況下，flex容器的主軸（mainaxis）為水平方向，交叉軸（crossaxis）為豎直方向，子元素在主軸方向上按順序排列。flex容器五、flex布局樣式屬性含義可選值flex-direction主軸方向，即子元素的排列方向row（默認(rèn)，主軸為水平方向，從左到右排列）column（主軸為豎直方向，從上到下排列）row-reverse（主軸為水平方向，從右到左排列，與row相反）column-reverse（主軸為豎直方向，從下到上排列，與column相反）flex-wrap子元素是否換行及換行的方式nowrap（默認(rèn)，自動(dòng)縮小子元素，不換行）wrap（換行，且第一行在第二行上方）wrap-reverse（換行，且第一行在第二行下方）justify-content子元素在主軸上的對(duì)齊方式flex-start（默認(rèn)，左對(duì)齊，若主軸為豎直方向，則為頂端對(duì)齊）flex-end（右對(duì)齊，若主軸為豎直方向，則為底部對(duì)齊）center（居中對(duì)齊）space-between（兩端對(duì)齊）space-around（沿軸線(xiàn)均勻分布）align-items子元素在交叉軸上的對(duì)齊方式flex-start（與交叉軸的起點(diǎn)對(duì)齊）flex-end（與交叉軸的終點(diǎn)對(duì)齊）center（與交叉軸的中點(diǎn)對(duì)齊）baseline（子元素第一行文字的底部對(duì)齊）stretch（默認(rèn)，若子元素未設(shè)置高度或高度為auto，則子元素與容器等高）五、flex布局例如，在WXML文件中使用view組件嵌套3個(gè)view組件，代碼如下。<viewclass="container"><viewclass="item">item_1</view><viewclass="item">item_2</view><viewclass="item">item_3</view></view>上述代碼中，class屬性值為container的view組件是class屬性值為item的view組件的父容器。五、flex布局在相應(yīng)的WXSS文件中為組件設(shè)置樣式，代碼如下。.container{display:flex; /*設(shè)置flex布局*/height:200rpx; /*設(shè)置高度為200rpx*/border:1rpxsolid#000000; /*設(shè)置邊框樣式：寬度為1rpx，實(shí)線(xiàn)，黑色*/justify-content:space-between;/*設(shè)置子元素在主軸上的對(duì)齊方式為兩端對(duì)齊*/align-items:center; /*設(shè)置子元素在交叉軸上的對(duì)齊方式為中點(diǎn)對(duì)齊*/}.item{border:1rpxsolid#000000;}flex布局示例運(yùn)行效果小貼士view組件是微信小程序中比較常見(jiàn)的容器組件。在容器組件中，可以包含text、image等非容器組件，也可以包含view等容器組件。六、樣式導(dǎo)入在WXSS文件中可以導(dǎo)入外聯(lián)樣式表，方法是在@import后加上需要導(dǎo)入的外聯(lián)樣式表的路徑，然后用“;”結(jié)尾。例如，在pages/index目錄下創(chuàng)建common.wxss文件，并輸入如下代碼。.myclass_1{font-weight:bold;}六、樣式導(dǎo)入在index.wxss文件中導(dǎo)入common.wxss文件，代碼如下。@import"common.wxss"; /*導(dǎo)入common.wxss文件*/.myclass_2{font-size:17pt;font-weight:bold;margin:20rpx;}通過(guò)上述代碼創(chuàng)建并導(dǎo)入樣式文件后，就可以在index.wxml文件中使用common.wxss文件中的樣式了。七、內(nèi)聯(lián)樣式組件的style屬性用于設(shè)置內(nèi)聯(lián)樣式，該屬性會(huì)在運(yùn)行時(shí)進(jìn)行解析。<!--獲取動(dòng)態(tài)樣式--><viewstyle="color:{{color}};"></view><!--寫(xiě)入靜態(tài)樣式--><viewstyle="color:red"></view>內(nèi)聯(lián)樣式動(dòng)態(tài)樣式靜態(tài)樣式盡量避免將靜態(tài)樣式寫(xiě)入style，否則會(huì)影響渲染速度拓展閱讀軟件開(kāi)發(fā)人員應(yīng)具備規(guī)范嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)。規(guī)范嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)通常體現(xiàn)在程序設(shè)計(jì)的點(diǎn)點(diǎn)滴滴中，如項(xiàng)目的詳細(xì)設(shè)計(jì)方案、各個(gè)模塊和頁(yè)面的編碼、各階段的項(xiàng)目文檔等。軟件開(kāi)發(fā)人員應(yīng)具備怎樣的工作作風(fēng)？本任務(wù)實(shí)施在任務(wù)一的基礎(chǔ)上設(shè)置“家電商城”微信小程序首頁(yè)的樣式。設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施“家電商城”微信小程序首頁(yè)在index.wxml文件中完善小程序首頁(yè)的結(jié)構(gòu)，添加image組件，并為一些組件設(shè)置內(nèi)聯(lián)樣式，參考代碼。設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施<viewclass="content"><viewclass="background"><!--搜索區(qū)--><viewclass="search"><imagesrc="/pages/images/icon/search.png"style="width:46rpx;height:46rpx"></image><textclass="searchContent">搜索商品</text></view><!--海報(bào)輪播區(qū)--><viewclass="logo"><viewclass="first">家電商城</view><viewclass="second">讓家變得更完美</view></view></view>設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施<!--宮格導(dǎo)航區(qū)--><viewclass="nav"style="margin-top:35rpx;"><blockwx:for="{{navs}}"wx:key="name"><viewclass="nav-item"><view><imagesrc="{{item.img}}"style="width:77rpx;height:70rpx;"></image></view><view>{{}}</view></view></block></view><!--分隔條--><viewclass="hr"></view><!--家電秒殺區(qū)--><viewclass="menu">家電秒殺</view></view>續(xù)在index.js文件的data屬性中添加宮格導(dǎo)航區(qū)圖片的路徑，代碼如下。設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施Page({data:{navs:[{"img":"/pages/images/icon/lyhq.png","name":"領(lǐng)優(yōu)惠券"},{"img":"/pages/images/icon/smgw.png","name":"掃碼購(gòu)物"},{"img":"/pages/images/icon/wlcx.png","name":"物流查詢(xún)"},{"img":"/pages/images/icon/pt.png","name":"拼團(tuán)"}]}})在index.wxss文件中通過(guò)類(lèi)選擇器選擇組件，然后為其設(shè)置樣式，代碼如下。設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施.content{font-family:"MicrosoftYaHei"; /*設(shè)置字體類(lèi)型*/}.background{height:398rpx; /*設(shè)置高度*/padding-top:23rpx; /*設(shè)置上內(nèi)邊距*/background-color:#c81623; /*設(shè)置背景顏色*/text-align:center; /*設(shè)置文本水平居中*/}.search{width:94%;margin:12rpxauto; /*上下外邊距為12rpx，左右外邊距自動(dòng)*/background-color:#f9f9f9;續(xù)前表設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施border-radius:117rpx; /*設(shè)置邊框圓角效果*/line-height:81rpx; /*設(shè)置行高*/}.searchContent{margin-left:12rpx; /*設(shè)置左外邊距*/font-size:37rpx; /*設(shè)置字體大小*/color:#777777; /*設(shè)置文本顏色*/}.logo{color:#ffffff;}.first{margin-top:70rpx;font-size:24px;續(xù)前表設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施font-weight:bold; /*文字加粗*/}.second{font-size:13px;}.nav-item{width:25%;display:inline-block; /*將元素設(shè)置為行內(nèi)塊級(jí)元素，并在同一行排列顯示*/margin-bottom:23rpx; /*設(shè)置下外邊距*/text-align:center;font-size:15px;}.hr{續(xù)前表設(shè)置“家電商城”微信小程序首頁(yè)的樣式任務(wù)實(shí)施height:23rpx;background-