模塊2 微信小程序頁面制作《微信小程序》教學(xué)課件

《微信小程序》?精品課件合集第X章XXXX模塊2微信小程序頁面制作【案例2-1】個人信息01案例分析“個人信息”微信小程序的整體頁面可以分為上下兩個部分。其中，上半部分為頭像區(qū)域，用于顯示頭像；下半部分為詳細(xì)信息區(qū)域，用于顯示小麗的姓名、年齡、性別、特長和愛好。

先定一個小目標(biāo)！了解WXML的概念，能夠說出WXML的特點、WXML與HTML的區(qū)別

知識儲備1.WXML簡介知識儲備什么是WXML？1.WXML簡介知識儲備在制作微信小程序頁面時，頁面的結(jié)構(gòu)可以用WXML來實現(xiàn)。WXML是微信團(tuán)隊為微信小程序開發(fā)而設(shè)計的一套語言，可以結(jié)合微信小程序中的各種組件構(gòu)建頁面結(jié)構(gòu)。1.WXML簡介知識儲備HTML和WXML使用的標(biāo)簽不同。例如，HTML經(jīng)常使用<div>標(biāo)簽搭建頁面結(jié)構(gòu)，而WXML則使用<view>標(biāo)簽搭建頁面結(jié)構(gòu)；HTML經(jīng)常使用<span>標(biāo)簽定義行內(nèi)文本

，而WXML則使用<text>標(biāo)簽定義行內(nèi)文本

。WXML提供了和Vue.js中模板語法類似的模板語法，例如數(shù)據(jù)綁定、列表渲染、條件渲染等，而HTML中沒有。WXML與HTML的區(qū)別1.WXML簡介知識儲備HTML頁面可以在瀏覽器中預(yù)覽，而WXML頁面僅能在微信客戶端和微信開發(fā)者工具中預(yù)覽。WXML中的單標(biāo)簽必須在結(jié)尾“>”前面加上“/”，否則微信開發(fā)者工具會報語法錯誤，而HTML中允許省略單標(biāo)簽“>”前面的“/”。WXML中所使用的標(biāo)簽是微信小程序定義的標(biāo)簽，應(yīng)避免使用HTML標(biāo)簽，這樣才能保證頁面被正確轉(zhuǎn)譯。

WXML與HTML的區(qū)別1.WXML簡介

先定一個小目標(biāo)！了解WXSS的概念，能夠說出WXSS的特點、WXSS與CSS的區(qū)別知識儲備2.WXSS簡介知識儲備什么是WXSS？2.WXSS簡介知識儲備在網(wǎng)頁制作中，使用HTML搭建頁面結(jié)構(gòu)以后，還需要使用CSS美化樣式。同樣，在微信小程序的頁面制作中，使用WXML搭建頁面結(jié)構(gòu)以后，也需要設(shè)置樣式來美化頁面。微信小程序提供了一套類似CSS的語言WXSS，通過WXSS可以美化頁面樣式。2.WXSS簡介知識儲備不同的手機屏幕分辨率不同，如果用CSS中的px單位，會遇到屏幕適配的問題，需要手動進(jìn)行像素單位換算。而微信小程序提供了一個新的單位rpx，使用rpx單位可以很輕松地適配各種手機屏幕。在微信小程序中，項目根目錄中的app.wxss文件作為全局樣式，會作用于當(dāng)前微信小程序的所有頁面，而局部頁面的WXSS樣式僅對當(dāng)前頁面生效，CSS則沒有這樣的功能。WXSS與CSS的區(qū)別2.WXSS簡介知識儲備在WXSS中設(shè)置背景圖片的時候，可以使用網(wǎng)絡(luò)圖片或者以Base64格式編碼的圖片，不能使用本地圖片，例如，“background-image:url('/images/1.png');”是無效的，而CSS可以使用本地圖片來設(shè)置背景圖片。WXSS與CSS的區(qū)別2.WXSS簡介

先定一個小目標(biāo)！了解組件的概念，能夠說出組件的特點及常用的組件知識儲備3.常用組件知識儲備什么是組件？3.常用組件知識儲備微信小程序頁面和普通網(wǎng)頁都是通過標(biāo)簽來定義頁面結(jié)構(gòu)的，但是在微信小程序開發(fā)中，更習(xí)慣將這些標(biāo)簽稱為組件，這些組件自帶微信風(fēng)格的UI樣式和特定功能效果。微信小程序提供了豐富的組件，通過組合這些組件可以進(jìn)行高效開發(fā)。3.常用組件知識儲備組件功能組件功能view視圖容器video視頻text文本checkbox復(fù)選框button按鈕radio單選按鈕image圖片input輸入框form表單audio音頻常用組件如下表。

3.常用組件

先定一個小目標(biāo)！掌握頁面路徑的配置方法，能夠運用該方法進(jìn)行頁面管理知識儲備4.頁面路徑配置知識儲備為什么要進(jìn)行頁面路徑配置呢？4.頁面路徑配置知識儲備開發(fā)一個功能完整的微信小程序時，一般需要制作多個頁面。在微信小程序中可以通過app.json全局配置文件中的pages配置項來配置微信小程序的頁面路徑。pages配置項是一個數(shù)組，該數(shù)組用于指定微信小程序由哪些頁面組成，數(shù)組中的每一個元素都對應(yīng)一個頁面的路徑信息。4.頁面路徑配置知識儲備演示如何配置頁面路徑上述代碼中共配置了兩個頁面，分別是pages/index/index頁面和pages/logs/logs頁面。默認(rèn)情況下，pages數(shù)組中的第一項為微信小程序的初始頁面，即pages/index/index頁面。如果想將其他頁面設(shè)置為初始頁面，讀者可以手動調(diào)整數(shù)組中元素的順序，將需要設(shè)為初始頁面的頁面路徑設(shè)為第一項即可。"pages":["pages/index/index","pages/logs/logs"],4.頁面路徑配置知識儲備pages/index/index中的pages表示存放頁面的目錄，index/index中第一個index表示index目錄，第二個index表示文件名。同理，pages/logs/logs中的pages表示存放頁面的目錄，logs/logs中第一logs表示logs目錄，第二個logs表示文件名。文件名不需要寫后綴名，以pages/index/index頁面為例，配置成功后，微信開發(fā)者工具會自動生成index.wxml文件、index.wxss文件、index.js文件和index.json文件。注意4.頁面路徑配置知識儲備如果需要在微信小程序中創(chuàng)建一個新的頁面，可以在app.json文件的pages數(shù)組中增加一項新頁面的信息，微信開發(fā)者工具會創(chuàng)建對應(yīng)的頁面。通過pages數(shù)組中新增一項來新增頁面通過在微信開發(fā)者工具的項目資源管理器的pages目錄下右鍵單擊鼠標(biāo)，選擇“新建Page”來創(chuàng)建頁面，微信開發(fā)者工具會自動在app.json文件中添加對應(yīng)的路徑。通過項目資源管理器新增頁面創(chuàng)建新頁面的方法如果對頁面文件直接進(jìn)行刪除操作，則不會觸發(fā)代碼的自動更新效果，需要手動修改app.json文件中的pages數(shù)組。注意4.頁面路徑配置

先定一個小目標(biāo)！掌握view組件的使用方法，能夠靈活運用view組件實現(xiàn)頁面的布局效果知識儲備5.view組件知識儲備什么是view組件？view組件的作用是什么？5.view組件知識儲備在HTML中，<div>標(biāo)簽可以定義文檔中的分區(qū)或節(jié)，把文檔分割為獨立的、不同的部分，在WXML中，view組件起著類似的作用。view組件表示視圖容器，常用于實現(xiàn)頁面的布局效果。5.view組件知識儲備view組件提供了一些屬性，用于實現(xiàn)特殊的效果。<view>view組件</view>view組件通過<view>標(biāo)簽定義，示例代碼如下。5.view組件知識儲備屬性類型說明hover-classstring指定手指按下去的樣式。當(dāng)該屬性值為none時，沒有點擊態(tài)hover-stop-propagationboolean指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)hover-start-timenumber手指按住后多久出現(xiàn)點擊態(tài)，單位為毫秒hover-stay-timenumber手指松開后點擊態(tài)保留時間，單位為毫秒view組件的常用屬性如下表。

點擊態(tài)是指手指在屏幕上按下時的狀態(tài)。5.view組件知識儲備hover-class屬性使用hover-class屬性實現(xiàn)手指按下后更改文字為加粗效果<viewhover-class="bold">手指按下后我會發(fā)生變化哦~</view>首先在頁面的WXML文件中定義頁面結(jié)構(gòu)，示例代碼如下。.bold{font-weight:bold;}然后在頁面的WXSS文件中定義樣式類，示例代碼如下。5.view組件知識儲備手指按下前，view組件中的文字未加粗；手指按下后，view組件中的文字加粗了，說明view組件的hover-class屬性生效了。使用hover-class屬性實現(xiàn)手指按下后更改文字為加粗效果5.view組件hover-class屬性知識儲備hover-start-time屬性使用hover-start-time屬性實現(xiàn)手指按住1秒后更改文字為加粗效果<viewhover-start-time="1000"hover-class=“bold">1秒后出狀態(tài)</view>設(shè)置hover-start-time屬性實現(xiàn)手指按住1000毫秒后出現(xiàn)點擊態(tài)設(shè)置hover-class屬性實現(xiàn)手指按下去的樣式類為bold5.view組件知識儲備hover-stay-time屬性使用hover-stay-time屬性實現(xiàn)手指松開之后3秒內(nèi)更改文字為加粗效果<viewhover-stay-time="3000"hover-class="bold">我能點亮3秒鐘</view>設(shè)置hover-stay-time屬性實現(xiàn)手指松開后點擊態(tài)保留時間5.view組件

先定一個小目標(biāo)！掌握image組件的使用方法，能夠靈活運用image組件完成圖片插入操作知識儲備6.image組件知識儲備什么是image組件呢？6.image組件知識儲備微信小程序提供了用于顯示圖片的image組件，并且image組件的功能比HTML中的<img>標(biāo)簽更強大，支持對圖片進(jìn)行剪裁和縮放。image組件的默認(rèn)寬度為300px，默認(rèn)高度為240px。6.image組件知識儲備雙標(biāo)簽寫法的示例代碼如下。<imagesrc="圖片資源地址"/>image組件通過<image>標(biāo)簽定義，支持單標(biāo)簽和雙標(biāo)簽兩種寫法，單標(biāo)簽寫法的示例代碼如下。<imagesrc="圖片資源地址"></image>6.image組件知識儲備屬性類型說明srcstring圖片資源地址modestring圖片剪裁、縮放的模式webpboolean默認(rèn)不解析WebP格式，只支持網(wǎng)絡(luò)資源lazy-loadboolean圖片延遲加載image組件的常用屬性如下表。

6.image組件知識儲備屬性類型說明show-menu-by-longpressboolean長按圖片顯示的菜單，菜單提供發(fā)送給朋友、收藏、保存圖片、搜一搜等功能binderroreventhandle當(dāng)錯誤發(fā)生時觸發(fā)bindloadeventhandle當(dāng)圖片載入完畢時觸發(fā)>>接上表圖片資源地址src可以是本地路徑或URL地址。如果使用本地路徑，可以在項目中創(chuàng)建一個目錄，例如images目錄，并在該目錄中放入圖片，例如test.jpg，然后通過本地路徑/images/test.jpg即可引用圖片。注意6.image組件知識儲備模式合法值說明縮放scaleToFill不保持寬高比縮放圖片，使圖片的寬高完全拉伸至填滿image元素。此合法值為mode屬性的默認(rèn)值aspectFit保持寬高比縮放圖片，使圖片的長邊能完全顯示出來，即可以完整地將圖片顯示出來aspectFill保持寬高比縮放圖片，只保證圖片的短邊能完全顯示出來，即圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取widthFix寬度不變，高度自動變化，保持原圖寬高比不變heightFix高度不變，寬度自動變化，保持原圖寬高比不變image組件的mode屬性用于指定圖片的裁剪模式或縮放模式，常用的mode合法值如下表。

6.image組件知識儲備模式合法值說明裁剪top不縮放圖片，只顯示圖片的頂部區(qū)域bottom不縮放圖片，只顯示圖片的底部區(qū)域center不縮放圖片，只顯示圖片的中間區(qū)域left不縮放圖片，只顯示圖片的左邊區(qū)域right不縮放圖片，只顯示圖片的右邊區(qū)域>>接上表

6.image組件知識儲備模式合法值說明裁剪topleft不縮放圖片，只顯示圖片的左上邊區(qū)域topright不縮放圖片，只顯示圖片的右上邊區(qū)域bottomleft不縮放圖片，只顯示圖片的左下邊區(qū)域bottomright不縮放圖片，只顯示圖片的右下邊區(qū)域>>接上表

6.image組件知識儲備aspectFit縮放模式使用aspectFit屬性實現(xiàn)image組件在維持圖片寬高比不變的情況下使圖片完整顯示出來<imagesrc="/images/demo01.jpg"mode="aspectFit"style="width:200px;height:195px;border:1pxsolidblack;"/>將image組件的mode屬性值設(shè)為aspectFit，可以使圖片的長邊能夠完全顯示出來，即將圖片顯示完整。6.image組件知識儲備aspectFit縮放模式使用aspectFit屬性實現(xiàn)image組件在維持圖片寬高比不變的情況下使圖片完整顯示出來6.image組件知識儲備top裁剪模式使用top屬性實現(xiàn)image組件只顯示圖片的頂部區(qū)域<imagesrc="/images/demo02.jpg"mode="top"style="width:300px;height:240px;"/>將image組件的mode屬性值設(shè)為top，可以使圖片只顯示頂部區(qū)域6.image組件知識儲備top裁剪模式使用top屬性實現(xiàn)image組件只顯示圖片的頂部區(qū)域6.image組件知識儲備什么是rpx單位呢？7.rpx單位知識儲備rpx（ResponsivePixel，自適應(yīng)像素）。rpx單位是微信小程序獨有的、用來解決屏幕適配問題的尺寸單位。7.rpx單位知識儲備屏幕寬度rpx換算px(屏幕寬度÷750)px換算rpx(750÷屏幕寬度)320px1rpx≈0.427px1px≈2.34rpx375px1rpx=0.5px1px=2rpx414px1rpx=0.552px1px≈1.81rpxrpx單位的設(shè)計思想是把所有設(shè)備的屏幕在寬度上等分為750份，即屏幕的總寬度為750rpx。微信小程序在不同設(shè)備上運行的時候，會自動把rpx單位換算成對應(yīng)的像素單位來渲染，從而實現(xiàn)屏幕適配。不同屏幕寬度的rpx和px的換算如下表。7.rpx單位

先定一個小目標(biāo)！掌握頁面樣式的導(dǎo)入方法，能夠靈活運用該方法導(dǎo)入公共樣式知識儲備8.樣式導(dǎo)入知識儲備在微信小程序中，多個不同的頁面可能需要編寫相同的樣式代碼，這樣會造成代碼冗余。為了避免代碼冗余，可以將相同的樣式代碼抽為公共樣式，放到一個單獨的文件中，通過只修改公共樣式實現(xiàn)對所有相關(guān)頁面樣式的修改，從而節(jié)約時間、方便管理。8.樣式導(dǎo)入步驟1演示如何創(chuàng)建公共樣式文件并進(jìn)行公共樣式文件導(dǎo)入在微信小程序的目錄下創(chuàng)建一個公共樣式文件page.wxss，在該文件中編寫公共樣式代碼。知識儲備/**page.wxss**/.name{padding:5px;}步驟28.樣式導(dǎo)入在pages/index/index.wxss文件中導(dǎo)入page.wxss文件。知識儲備/**index.wxss**/@import“/page.wxss";步驟1步驟2添加上述代碼后，即可導(dǎo)入page.wxss文件中定義的樣式。演示如何創(chuàng)建公共樣式文件并進(jìn)行公共樣式文件導(dǎo)入8.樣式導(dǎo)入

先定一個小目標(biāo)！掌握“個人信息”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實現(xiàn)1.準(zhǔn)備工作1在微信開發(fā)者工具中創(chuàng)建一個新的微信小程序項目，項目名稱為“個人信息”，模板選擇“不使用模板”。創(chuàng)建項目案例實現(xiàn)2從本書配套源代碼中找到本案例，復(fù)制images文件夾到本項目中。復(fù)制素材1.準(zhǔn)備工作案例實現(xiàn)“個人信息”微信小程序的目錄結(jié)構(gòu)1.準(zhǔn)備工作

先定一個小目標(biāo)！掌握“個人信息”微信小程序頁面結(jié)構(gòu)的實現(xiàn)，能夠完成頁面結(jié)構(gòu)的代碼編寫案例實現(xiàn)2.實現(xiàn)“個人信息”微信小程序的頁面結(jié)構(gòu)案例實現(xiàn)編寫“個人信息”微信小程序的頁面結(jié)構(gòu)2.實現(xiàn)“個人信息”微信小程序的頁面結(jié)構(gòu)

先定一個小目標(biāo)！掌握“個人信息”微信小程序頁面樣式的實現(xiàn)，能夠完成頁面樣式的代碼編寫案例實現(xiàn)3.實現(xiàn)“個人信息”微信小程序的頁面樣式案例實現(xiàn)實現(xiàn)步驟

在pages/index/index.wxss文件中編寫頁面樣式，讓頁面更加美觀。編寫頭像區(qū)域的樣式；編寫詳細(xì)信息區(qū)域的樣式。3.實現(xiàn)“個人信息”微信小程序的頁面樣式【案例2-2】本地生活02案例分析“本地生活”微信小程序展示了本地生活的圖片信息和美食、裝修等分類信息，該頁面分為上下兩部分，上半部分為輪播圖區(qū)域，下半部分為九宮格區(qū)域。

先定一個小目標(biāo)！掌握swiper和swiper-item組件的使用方法，能夠靈活運用swiper和swiper-item組件完成輪播圖的制作知識儲備1.swiper和swiper-item組件知識儲備什么是swiper和swiper-item組件呢？1.swiper和swiper-item組件知識儲備swiper組件表示滑塊視圖容器，用于創(chuàng)建一塊可以滑動的區(qū)域。swiper組件內(nèi)部需要嵌套swiper-item組件，swiper-item組件表示滑塊視圖內(nèi)容。swiper組件的默認(rèn)高度為150px，默認(rèn)寬度為100%。swiper-item組件的初始高度和初始寬度都為100%。1.swiper和swiper-item組件知識儲備<swiper><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>swiper組件通過<swiper>標(biāo)簽定義，swiper-item組件通過<swiper-item>標(biāo)簽定義。swiper組件為外層容器，內(nèi)層有3個swiper-item組件，表示當(dāng)前滑塊視圖內(nèi)容一共有3項?；瑝K視圖內(nèi)容在初始狀態(tài)下只顯示第1項，向左滑動顯示第2項，再向右滑動可以返回第1項。1.swiper和swiper-item組件知識儲備屬性類型說明indicator-dotsboolean是否顯示面板指示點indicator-colorcolor指示點顏色indicator-active-colorcolor當(dāng)前選中的指示點顏色autoplayboolean是否自動切換currentnumber當(dāng)前所在滑塊的index，默認(rèn)為0intervalnumber自動切換時間間隔circularboolean是否采用銜接滑動swiper組件的常用屬性如下表。

1.swiper和swiper-item組件知識儲備演示swiper組件的常用屬性實現(xiàn)輪播圖3秒自動無縫切換效果，同時顯示面板指示點，并設(shè)置指示點顏色為黃色、當(dāng)前選中指示點顏色為紅色<swipercurrent="2"indicator-dotsindicator-color="yellow"indicator-active-color="red"autoplay="true"interval="3000"circular="true"><swiper-itemstyle="background:lightblue">0</swiper-item><swiper-itemstyle="background:lightcoral">1</swiper-item><swiper-itemstyle="background:lightgrey">2</swiper-item></swiper>1.swiper和swiper-item組件知識儲備演示swiper組件的常用屬性實現(xiàn)輪播圖3秒自動無縫切換效果，同時顯示面板指示點，并設(shè)置指示點顏色為黃色、當(dāng)前選中指示點顏色為紅色1.swiper和swiper-item組件

先定一個小目標(biāo)！掌握text組件的使用方法，能夠靈活運用text組件定義行內(nèi)文本知識儲備2.text組件知識儲備什么是text組件呢？2.text組件知識儲備在HTML中，一般通過<span>標(biāo)簽定義行內(nèi)文本，而在微信小程序中，則可以通過text組件定義行內(nèi)文本。需要注意的是，text組件內(nèi)部只能嵌套text組件。2.text組件知識儲備屬性類型說明user-selectboolean文本是否可選，該屬性會使文本節(jié)點顯示為inline-blockspacestring顯示連續(xù)空格，可選參數(shù)為ensp（中文字符空格一半大?。?、emsp（中文字符空格大小）和nbsp（根據(jù)字體設(shè)置的空格大?。ヾecodeboolean是否解碼text組件的常用屬性如下表。

2.text組件知識儲備user-select屬性使用user-select屬性實現(xiàn)長按選中文本的效果<textuser-select="true">微信小程序</text>設(shè)置user-select屬性值為true，實現(xiàn)長按選中文本2.text組件知識儲備user-select屬性使用user-select屬性實現(xiàn)長按選中文本的效果左側(cè)圖片展示了手指長按之前text組件中的文本內(nèi)容，右側(cè)圖片為使用鼠標(biāo)模擬手指長按文本之后的選中效果，此處通過長按選中了“程序”文本。如果在微信客戶端運行的小程序中長按文本，會出現(xiàn)“復(fù)制”選項，可以實現(xiàn)長按復(fù)制文本的效果。2.text組件

先定一個小目標(biāo)！掌握Flex布局的使用方法，能夠使用Flex布局的相關(guān)屬性完成頁面布局知識儲備3.Flex布局知識儲備什么是Flex布局呢？3.Flex布局知識儲備在微信小程序中可以使用Flex布局實現(xiàn)自適應(yīng)頁面。Flex布局又稱為彈性盒（FlexibleBox）布局，它為盒子模型提供了很強的靈活性，任何一個容器都可以指定為Flex布局。3.Flex布局知識儲備Flex容器基本概念采用Flex布局的元素，稱為Flex容器（簡稱容器）。Flex項目Flex容器的所有子元素自動成為容器成員，稱為Flex項目（簡稱項目）。軸Flex容器內(nèi)有兩根軸：主軸（MainAxis）和交叉軸（CrossAxis），默認(rèn)情況下主軸為水平方向，交叉軸為垂直方向，項目默認(rèn)沿主軸排列。若想使用Flex布局，首先要設(shè)置父元素的display屬性為flex，表示將父元素設(shè)置為容器，然后就可以使用容器和項目的相關(guān)屬性了。3.Flex布局知識儲備屬性說明flex-direction決定主軸的方向（即項目的排列方向），默認(rèn)值為row，即主軸為從左到右的水平方向，項目按照主軸方向排列flex-wrap規(guī)定是否允許項目換行，默認(rèn)值為nowrap，即不換行flex-flowflex-direction和flex-wrap的組合屬性，默認(rèn)值為rownowrapjustify-content定義了項目在主軸上的對齊方式，默認(rèn)值為flex-start，即項目在主軸方向上，與主軸起始位置對齊容器的常用屬性如下表。

3.Flex布局知識儲備屬性說明align-items定義項目在交叉軸上的對齊方式，默認(rèn)值為normal（等同于stretch），即如果項目沒有設(shè)置固定的大小，則會被拉伸填充滿交叉軸方向剩余的空間align-content只適用多行的容器，定義項目在交叉軸上的對齊方式，默認(rèn)值為normal（等同于stretch），即交叉軸方向剩余的空間平均分配到每一行，并且行的高度會拉伸，填滿整行的空間>>接上表

3.Flex布局知識儲備屬性說明order定義項目的排列順序，按從小到大排列，默認(rèn)值為0flex-grow定義項目的放大比例，默認(rèn)值為0，即如果存在剩余空間，該項目也不放大flex-shrink定義項目的縮小比例，默認(rèn)值為1，即如果空間不足，該項目將縮小flex-basis定義在分配多余空間之前，項目占據(jù)的主軸空間，默認(rèn)值為autoflexflex-grow、flex-shrink和flex-basis的組合屬性，默認(rèn)值為01autoalign-self允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果父元素沒有設(shè)置align-items屬性，則等同于normal和stretch項目的常用屬性如下表。

3.Flex布局知識儲備flex-direction屬性flex-direction屬性用于設(shè)置主軸方向，通過設(shè)置主軸方向可以規(guī)定項目的排列方向，它有以下4個常用的可選值。row：默認(rèn)值，主軸為從左到右的水平方向。row-reverse：主軸為從右到左的水平方向。column：主軸為從上到下的垂直方向。column-reverse：主軸為從下到上的垂直方向。3.Flex布局步驟1演示flex-direction屬性的使用編寫頁面結(jié)構(gòu)代碼。知識儲備<viewclass="demo1"><view>1</view><view>2</view><view>3</view></view>步驟23.Flex布局編寫頁面樣式代碼。知識儲備.demo1{display:flex;flex-direction:column;}步驟1步驟2演示flex-direction屬性的使用3.Flex布局知識儲備使用flex-direction屬性實現(xiàn)項目縱向排列的效果如下圖。演示flex-direction屬性的使用3.Flex布局知識儲備justify-content屬性justify-content屬性用于設(shè)置項目在主軸方向上的對齊方式，能夠分配項目之間及其周圍多余的空間，它有以下5個常用的可選值。flex-start：默認(rèn)值，表示項目對齊到主軸起點，項目間不留空隙。flex-end：項目對齊到主軸終點，項目間不留空隙。center：項目在主軸上居中排列，項目間不留空隙。主軸上第一個項目離主軸起點的距離等于最后一個項目離主軸終點的距離。space-between：兩端對齊，兩端的項目分別靠向容器的兩端，其他項目之間的間隔相等。space-around：每個項目之間的距離相等，第一個項目離主軸起點和最后一個項目離終點的距離為中間項目間距的一半。3.Flex布局步驟1演示justify-content屬性的使用編寫頁面結(jié)構(gòu)。知識儲備<viewclass="demo2"><view>1</view><view>2</view><view>3</view></view>步驟23.Flex布局編寫頁面樣式。知識儲備.demo2{background-color:lightgrey;display:flex;justify-content:space-between;}步驟1步驟2演示justify-content屬性的使用3.Flex布局知識儲備使用justify-content屬性實現(xiàn)項目兩端對齊的頁面效果如下圖。演示justify-content屬性的使用3.Flex布局知識儲備align-items屬性align-items屬性用于設(shè)置項目在交叉軸上的對齊方式，它有以下6個常用的可選值。normal：默認(rèn)值，等同于stretch。stretch：未設(shè)置項目大小時將項目拉伸，填充滿交叉軸方向剩余的空間。flex-start：項目頂部與交叉軸起點對齊。flex-end：項目底部與交叉軸終點對齊。center：項目在交叉軸的中間位置對齊。baseline：項目的第一行文字的基線對齊。3.Flex布局知識儲備flex-wrap屬性flex-wrap屬性用于規(guī)定是否允許項目換行，能夠設(shè)置多行排列時換行的方向，它有以下3個常用的可選值。nowrap：默認(rèn)值，表示不換行，如果單行內(nèi)容過多，項目寬度可能會被壓縮。wrap：當(dāng)容器單行容不下所有項目時允許換行排列。wrap-reverse：當(dāng)容器單行容不下所有項目時允許換行排列，換行方向為wrap的反方向。3.Flex布局

先定一個小目標(biāo)！掌握“本地生活”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實現(xiàn)1.準(zhǔn)備工作案例實現(xiàn)1.準(zhǔn)備工作1在微信開發(fā)者工具中創(chuàng)建一個新的微信小程序項目，項目名稱為“本地生活”，模板選擇“不使用模板”。創(chuàng)建項目2在app.json文件中配置一個pages/grid/grid頁面，并將其他頁面全部刪除。創(chuàng)建頁面3復(fù)制素材從本書配套源代碼中找到本案例，復(fù)制images文件夾到本項目中。案例實現(xiàn)1.準(zhǔn)備工作“本地生活”微信小程序的目錄結(jié)構(gòu)

先定一個小目標(biāo)！掌握“本地生活”微信小程序頁面結(jié)構(gòu)的實現(xiàn)，能夠完成頁面結(jié)構(gòu)的代碼編寫案例實現(xiàn)2.實現(xiàn)“本地生活”微信小程序的頁面結(jié)構(gòu)案例實現(xiàn)實現(xiàn)步驟

在pages/grid/grid.wxml文件中編寫頁面結(jié)構(gòu)。編寫輪播圖區(qū)域的結(jié)構(gòu)；編寫九宮格區(qū)域的結(jié)構(gòu)。2.實現(xiàn)“本地生活”微信小程序的頁面結(jié)構(gòu)

先定一個小目標(biāo)！掌握“本地生活”微信小程序頁面樣式的實現(xiàn)，能夠完成頁面樣式的代碼編寫案例實現(xiàn)3.實現(xiàn)“本地生活”微信小程序的頁面樣式案例實現(xiàn)實現(xiàn)步驟在pages/grid/grid.wxss中編寫輪播圖區(qū)域和九宮格區(qū)域的頁面樣式。編寫輪播圖區(qū)域的樣式；編寫九宮格區(qū)域的樣式。編寫九宮格區(qū)域的整體樣式；編寫九宮格區(qū)域中每一個格子的樣式；編寫九宮格區(qū)域中每一個格子中的圖片和文字的樣式。3.實現(xiàn)“本地生活”微信小程序的頁面樣式【案例2-3】婚禮邀請函03案例分析“婚禮邀請函”微信小程序由4個頁面組成，分別是“邀請函”頁面、“照片”頁面、“美好時光”頁面和“賓客信息”頁面。每個頁面頂部的導(dǎo)航欄和底部的標(biāo)簽欄是公共部分，在每個頁面中都會出現(xiàn)；頁面中間的部分是頁面內(nèi)容，每個頁面的內(nèi)容都不同?！把埡表撁姘咐治觥罢掌表撁妗懊篮脮r光”頁面“賓客信息”頁面案例分析“邀請函”頁面用于展示頂部圖片、標(biāo)題、合照、新郎和新娘的姓名，以及婚禮信息。“邀請函”頁面各部分位置說明案例分析“照片”頁面用于展示新郎和新娘的婚紗照，該頁面采用縱向輪播的方式進(jìn)行展示。每一張輪播的圖片都占滿整個頁面的圖片區(qū)域，縱向滑動屏幕可以實現(xiàn)圖片的縱向切換，并且右側(cè)會顯示指示點。在用戶無操作時，圖片會自動無縫輪播。“照片”頁面各部分位置說明案例分析“美好時光”頁面用于展示一對新人拍攝的一些視頻，該頁面顯示了一個視頻列表，列表中的每一項都包含標(biāo)題、拍攝日期和視頻。視頻可以顯示出進(jìn)度條、視頻時長，并支持全屏顯示。“美好時光”頁面各部分位置說明案例分析“賓客信息”頁面提供了一個表單，用于填寫賓客的信息，包括姓名、手機號、性別和需要的點心?！百e客信息”頁面各部分位置說明

先定一個小目標(biāo)！掌握導(dǎo)航欄的配置方法，能夠完成導(dǎo)航欄標(biāo)題顏色、背景顏色等頁面效果的設(shè)置知識儲備1.導(dǎo)航欄配置知識儲備在微信小程序中，有時為了頁面美觀，需要更改導(dǎo)航欄的樣式。此時可以通過頁面配置文件或全局配置文件對導(dǎo)航欄的樣式進(jìn)行配置。1.導(dǎo)航欄配置知識儲備配置項類型說明navigationBarTitleTextstring導(dǎo)航欄標(biāo)題文字內(nèi)容，默認(rèn)值為""navigationBarBackgroundColorHexColor導(dǎo)航欄背景顏色，默認(rèn)值為#000000navigationBarTextStylestring導(dǎo)航欄標(biāo)題顏色，僅支持black和white，默認(rèn)值為white導(dǎo)航欄的相關(guān)配置項如下表。

1.導(dǎo)航欄配置知識儲備在頁面配置文件中對導(dǎo)航欄進(jìn)行配置以pages/index/index.json頁面配置文件為例，通過navigationBarTitleText配置項設(shè)置導(dǎo)航欄標(biāo)題為“微信小程序”。{"navigationBarTitleText":"微信小程序"}1.導(dǎo)航欄配置知識儲備在全局配置文件中對導(dǎo)航欄進(jìn)行配置在全局配置文件app.json中，通過window配置項可以對全局默認(rèn)窗口進(jìn)行配置，配置后會對所有頁面都會生效，且優(yōu)先級低于頁面級配置。例如，將導(dǎo)航欄的相關(guān)配置項寫在app.json文件的window配置項中作為全局配置使用。"navigationBarTitleText":"微信小程序"1.導(dǎo)航欄配置知識儲備默認(rèn)導(dǎo)航欄標(biāo)題文字與修改后的導(dǎo)航欄標(biāo)題文字的對比如下圖。1.導(dǎo)航欄配置

先定一個小目標(biāo)！掌握標(biāo)簽欄的配置方法，能夠完成頁面標(biāo)簽欄的配置知識儲備2.標(biāo)簽欄配置知識儲備通過標(biāo)簽欄可以很方便地在多個頁面之間進(jìn)行切換。在微信小程序的全局配置文件app.json中添加tabBar配置項即可實現(xiàn)標(biāo)簽欄配置。2.標(biāo)簽欄配置知識儲備屬性類型必填說明colorHexColor是標(biāo)簽欄上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色selectedColorHexColor是標(biāo)簽欄上的文字選中時的顏色，僅支持十六進(jìn)制顏色backgroundColorHexColor是標(biāo)簽欄的背景色，僅支持十六進(jìn)制顏色borderStylestring否標(biāo)簽欄上邊框的顏色，僅支持black和whitelistArray是標(biāo)簽欄的列表positionstring否標(biāo)簽欄的位置，僅支持bottom（底部）和top（頂部）customboolean否自定義標(biāo)簽欄tabBar配置項的屬性如下表。

2.標(biāo)簽欄配置知識儲備標(biāo)簽欄數(shù)量注意：微信小程序中的標(biāo)簽欄分為頂部標(biāo)簽欄和底部標(biāo)簽欄，標(biāo)簽數(shù)量一般在2~5個之間。2.標(biāo)簽欄配置知識儲備演示tabBar配置項的屬性使用"tabBar":{"color":"#ccc","selectedColor":"#ff4c91","borderStyle":"black","backgroundColor":"#fff","list":[]},list數(shù)組中的每個元素都是一個代表標(biāo)簽按鈕的對象，通過配置該對象的屬性可以對標(biāo)簽欄中的每個標(biāo)簽按鈕進(jìn)行配置。list數(shù)組中最少需要配置2個標(biāo)簽按鈕，最多只能配置5個標(biāo)簽按鈕。2.標(biāo)簽欄配置知識儲備屬性類型必填說明pagePathstring是頁面路徑，頁面必須在pages數(shù)組中預(yù)先定義textstring是標(biāo)簽按鈕上的文字iconPathstring否未選中時的圖標(biāo)路徑，當(dāng)position屬性值為top時，不顯示圖標(biāo)selectedIconPathstring否選中時的圖標(biāo)路徑，當(dāng)position屬性值為top

時，不顯示圖標(biāo)

標(biāo)簽按鈕的相關(guān)屬性如下表。

2.標(biāo)簽欄配置知識儲備演示tabBar配置項的屬性使用"list":[{"pagePath":"pages/index/index","iconPath":"images/home.png","selectedIconPath":"images/home-active.png","text":"首頁"},{"pagePath":"pages/list/list","iconPath":"images/contact.png","selectedIconPath":"images/contact-active.png","text":"聯(lián)系我們"}]需要注意的是，pages/index/index和pages/list/list這兩個頁面都必須在pages數(shù)組中配置并提前創(chuàng)建好對應(yīng)的文件。2.標(biāo)簽欄配置知識儲備演示tabBar配置項的屬性使用標(biāo)簽欄的效果如下圖。2.標(biāo)簽欄配置

先定一個小目標(biāo)！掌握vw、vh單位的使用方法，能夠靈活運用vw、vh單位設(shè)置寬度和高度知識儲備3.vw、vh單位知識儲備什么是vw、vh單位呢？3.vw、vh單位知識儲備在使用CSS編寫移動端的頁面樣式時，由于不同手機的屏幕寬高不同，屏幕適配會比較麻煩。針對這類型問題，通過視口單位可以有效解決。視口表示可視區(qū)域的大小，視口單位主要包括vw（ViewportWidth）和vh（ViewportHeight），在CSS中很常用。3.vw、vh單位知識儲備在微信小程序中也可以使用vw和vh單位。使用視口單位時，系統(tǒng)會將視口的寬度和高度分為100份，1vw占用視口寬度的百分之一，1vh占用視口高度的百分之一。vw、vh是相對長度單位，永遠(yuǎn)以視口作為參考。例如，屏幕寬度為375px，那么1vw=375px/100=3.75px。3.vw、vh單位

先定一個小目標(biāo)！掌握video組件的使用方法，能夠靈活運用video組件實現(xiàn)頁面中視頻的處理知識儲備4.video組件知識儲備什么是video組件呢？4.video組件知識儲備微信小程序提供了video組件用來播放視頻，video組件的默認(rèn)寬度為300px，高度為225px，可通過WXSS代碼設(shè)置寬高。4.video組件知識儲備屬性類型說明srcstring視頻的資源地址durationnumber指定視頻時長controlsboolean是否顯示默認(rèn)播放控件（播放/暫停按鈕、播放進(jìn)度、時間）danmu-listObjectArray彈幕列表danmu-btnboolean是否顯示彈幕按鈕，只在初始化時有效，不能動態(tài)變更video組件的常用屬性如下表。

4.video組件知識儲備屬性類型說明enable-danmuboolean是否展示彈幕，只在初始化時有效，不能動態(tài)變更autoplayboolean是否自動播放loopboolean是否循環(huán)播放mutedboolean是否靜音播放posterstring視頻封面的圖片網(wǎng)絡(luò)資源地址，如果controls屬性值為false則設(shè)置poster屬性無效>>接上表4.video組件知識儲備>>接上表屬性類型說明bindplayeventhandle當(dāng)開始/繼續(xù)播放時觸發(fā)play事件bindpauseeventhandle當(dāng)暫停播放時觸發(fā)pause事件object-fitstring當(dāng)視頻大小與video組件大小不一致時，調(diào)整視頻的表現(xiàn)形式，可選值有：contain（包含）、fill（填充）、cover（覆蓋），默認(rèn)值為containinitial-timestring指定視頻初始播放位置4.video組件知識儲備<videosrc="http://localhost:3000/01.mp4"loop="true"></video>video組件的loop屬性的屬性值設(shè)置為true，表示循環(huán)播放視頻演示將視頻在頁面上循環(huán)播放video組件的src屬性用于設(shè)置要播放視頻的資源地址4.video組件

先定一個小目標(biāo)！掌握表單組件的使用方法，能夠靈活運用表單組件完成表單頁面的制作知識儲備5.表單組件知識儲備什么是表單組件呢？5.表單組件知識儲備微信小程序中的表單組件與HTML中的表單類似。微信小程序在HTML基礎(chǔ)上做了封裝，并且增加了一些組件。表單組件通常用于用戶信息的填寫，以便于把用戶填寫的信息提交給服務(wù)器。5.表單組件知識儲備組件功能組件功能form表單button按鈕checkbox-group多項選擇器checkbox多選項目radio-group單項選擇器radio單選項目textarea多行輸入框input輸入框常用的表單組件如下表。

5.表單組件知識儲備form組件form組件表示表單容器，沒有任何樣式，需要配合其他表單組件一起使用，用于提交用戶輸入的信息和選擇的選項。form組件內(nèi)部可以包含若干個供用戶輸入或選擇的表單組件，允許提交的表單組件為switch、input、checkbox、slider、radio和picker組件。表單中攜帶數(shù)據(jù)的組件（如輸入框）必須帶有name屬性值，否則無法識別提交的內(nèi)容。5.表單組件知識儲備form組件屬性類型說明bindsubmiteventhandle通過攜帶form組件中的數(shù)據(jù)觸發(fā)submit事件bindreseteventhandle表單重置時會觸發(fā)reset事件form組件的常用屬性如下表。5.表單組件知識儲備button組件button組件表示按鈕，功能比HTML中的button按鈕豐富。屬性類型說明sizestring按鈕的大小，可選值：default、mini，默認(rèn)值為defaulttypestring按鈕的樣式類型，可選值：primary、default、warn，默認(rèn)值為defaultplainboolean按鈕是否鏤空，當(dāng)plain屬性值為true時背景色透明，默認(rèn)值為falsebutton組件的常用屬性如下表。5.表單組件知識儲備button組件>>接上表屬性類型說明disabledboolean是否禁用，默認(rèn)值為falseform-typestringform-type屬性值可設(shè)為submit、reset，點擊分別會觸發(fā)form組件中的submit、reset事件，默認(rèn)值為""hover-classstring指定按鈕點擊態(tài)效果，默認(rèn)值為""5.表單組件知識儲備演示button組件的使用<button>普通按鈕</button><buttontype="primary">主色調(diào)按鈕</button><buttontype="warn">警告按鈕</button>利用button組件的type屬性改變按鈕的樣式，type屬性的可選值有3個，分別是primary（綠色）、default（白色）、warn（紅色）。5.表單組件知識儲備演示button組件的使用3種按鈕如下圖。第1個為普通按鈕的樣式類型，第2個為主色調(diào)按鈕的樣式類型，第3個為警告按鈕樣式類型。5.表單組件知識儲備input組件input組件與HTML中的<input>標(biāo)簽作用類似，都用于接收用戶的輸入。在微信小程序中，input組件增加了很多屬性，使input組件使用起來更加簡單、方便。屬性類型說明valuestring輸入框的初始內(nèi)容，默認(rèn)值為""typestringinput的類型，默認(rèn)值為textconfirm-typestring設(shè)置鍵盤右下角按鈕的文字，僅在type="text"時生效，可選值：send、search、next、go、done，默認(rèn)值為doneinput組件的常用屬性如下表。5.表單組件知識儲備>>接上表屬性類型說明passwordboolean是否是密碼類型，默認(rèn)值為falseplaceholderstring輸入框為空時的

占位符，默認(rèn)值為""placeholder-stylestring指定placeholder的樣式，默認(rèn)值為""placeholder-classstring指定placeholder的樣式類，默認(rèn)值為""input組件5.表單組件知識儲備input組件的type屬性的可選值如下表。可選值說明text文本輸入鍵盤number數(shù)字輸入鍵盤idcard身份證輸入鍵盤digit帶小數(shù)點的數(shù)字鍵盤safe-password密碼安全輸入鍵盤nickname昵稱輸入鍵盤input組件5.表單組件知識儲備演示input組件的使用<inputtype="text"/><inputtype="number"/>設(shè)置type屬性值為number，表示在微信客戶端中運行的微信小程序出現(xiàn)數(shù)字輸入鍵盤設(shè)置type屬性值為text，表示在微信客戶端中運行的微信小程序出現(xiàn)文本輸入鍵盤5.表單組件知識儲備演示input組件的使用5.表單組件知識儲備checkbox和checkbox-group組件checkbox組件表示多選項目，在進(jìn)行多項選擇時會用到。checkbox組件一般與checkbox-group組件搭配使用，checkbox-group組件表示多項選擇器，內(nèi)部由多個checkbox組件組成。建議將不同組的checkbox組件嵌套在不同的checkbox-group組件中，從而方便管理和區(qū)分。5.表單組件知識儲備checkbox組件的常用屬性如下表。屬性類型說明valuestringcheckbox組件標(biāo)識，默認(rèn)值為""checkedboolean當(dāng)前是否選中，默認(rèn)值為falsedisabledboolean是否禁用，默認(rèn)值為falsecolorstring顏色，默認(rèn)值為#09BB07checkbox和checkbox-group組件5.表單組件知識儲備演示checkbox和checkbox-group組件的使用<checkbox-group><checkbox>蛋糕</checkbox><checkbox>甜甜圈</checkbox><checkbox>巧克力</checkbox></checkbox-group>5.表單組件知識儲備演示checkbox和checkbox-group組件的使用5.表單組件知識儲備radio和radio-group組件radio組件為單選項目，是表單中常用的組件，用于在從多個選項中選出一個，選項之間是互斥關(guān)系。radio組件一般與radio-group組件搭配使用，radio-group組件表示單項選擇器，內(nèi)部由多個radio組件組成。建議將不同組的radio組件分別嵌套在不同的radio-group組件中，從而方便管理和區(qū)分。5.表單組件知識儲備radio組件的常用屬性如下表。屬性類型說明valuestringradio標(biāo)識，默認(rèn)值為""checkedboolean當(dāng)前是否選中，默認(rèn)值為falsedisabledboolean是否禁用，默認(rèn)值為falsecolorstring顏色，默認(rèn)值為#09BB07radio和radio-group組件5.表單組件知識儲備演示radio和radio-group組件的使用<radio-group><radio>男</radio><radio>女</radio></radio-group>通過radio和radio-group組件實現(xiàn)性別的單項選擇。5.表單組件知識儲備演示radio和radio-group組件的使用5.表單組件

先定一個小目標(biāo)！掌握“婚禮邀請函”微信小程序的準(zhǔn)備工作，能夠成功搭建小程序目錄結(jié)構(gòu)案例實現(xiàn)1.準(zhǔn)備工作案例實現(xiàn)1.準(zhǔn)備工作1在微信開發(fā)者工具中創(chuàng)建一個新的微信小程序項目，項目名稱為“婚禮邀請函”，模板選擇“不使用模板”。創(chuàng)建項目2在app.json中配置4個頁面，分別是pages/index