微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件 項(xiàng)目3 小程序常用組件

項(xiàng)目三小程序常用組件Flexelasticmodellayout任務(wù)一Flex彈性模型布局Flex布局是繼標(biāo)準(zhǔn)流布局、浮動(dòng)布局、定位布局后的第四種布局方式。這種方式可以非常優(yōu)雅的實(shí)現(xiàn)子元素居中或均勻分布，甚至可以隨著窗口縮放自動(dòng)適應(yīng)。Flex布局在瀏覽器中存在一定的兼容性，在小程序中，是完全兼容Flex布局的，并且微信官方也是推薦使用Flex布局的。下面就來詳細(xì)的講下Flex布局。項(xiàng)目三小程序常用組件任務(wù)描述Flex彈性模型布局彈性容器：包含著彈性項(xiàng)目的父元素。彈性項(xiàng)目(Flexitem)：彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目。軸(Axis)：每個(gè)彈性框布局包含兩個(gè)軸。方向(Direction)：可以通過flex-direction來確定主軸和側(cè)軸的方向。Flex彈性模型布局傳統(tǒng)的布局解決方案Flex容器屬性Flex項(xiàng)目屬性小程序Flex布局Flex-directionFlex-wrapjustity-contentalign-contentflex-flowalign-itemsorderflex-growflex-shrinkflex-basisflexalign-selfFlex布局相關(guān)屬性

主軸排列：默認(rèn)情況下，容器在主軸的方向是從左到右。在主軸方向上，可以通過justify-content屬性來設(shè)置他們的排列方式。屬性說明flex-start項(xiàng)目靠近父盒子的左側(cè)。默認(rèn)采用的就是這種排列方式。flex-end項(xiàng)目靠近父盒子的右側(cè)。center所有項(xiàng)目會(huì)挨在一起在父盒子的中間位置。space-around項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。space-between項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器與父容器緊緊挨著。space-evenly項(xiàng)目在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。圖主軸排列方式Flex布局相關(guān)屬性

側(cè)軸排列：默認(rèn)情況下，側(cè)軸的方向是從上到下。在側(cè)軸方向上，可以通過align-items屬性來設(shè)置他們的排列方式。圖側(cè)軸排列方式屬性說明flex-start起始端對(duì)齊。默認(rèn)就是這種對(duì)齊方式。flex-end末尾段對(duì)齊。center中間對(duì)齊。stretch如果項(xiàng)目沒有設(shè)置高度。那么子容器沿交叉軸方向的尺寸拉伸至與父容器一致。Flex布局相關(guān)屬性

主軸和側(cè)軸方向：主軸默認(rèn)的方向是從左到右，側(cè)軸的方向默認(rèn)是從上到下，當(dāng)然也可以進(jìn)行修改。可以通過flex-direction進(jìn)行修改。圖主軸和側(cè)軸方向?qū)傩哉f明row默認(rèn)屬性。從左到右。row-reverse從右到左。column從上到下。column-reverse從下到上。Flex布局相關(guān)屬性

換行：默認(rèn)情況下，元素個(gè)數(shù)如果超過一定數(shù)量，那么在一行當(dāng)中就排列不下。此時(shí)flex默認(rèn)的處理方式是壓縮元素，使其能在一行中排列下來。可以通過flex-wrap來改變排列的方式。圖換行屬性屬性說明nowrap不換行。默認(rèn)方式wrap換行wrap-reverse換行，但是第一行會(huì)在下面。Flex布局相關(guān)屬性

多行排列：在排列中，如果有多行，那么這個(gè)屬性是設(shè)置多行之間的排列方式。可以通過align-content屬性來確定排列的方式。圖多行排列方式屬性說明flex-start從上往下排列。flex-end末尾段對(duì)齊center中點(diǎn)對(duì)齊space-between與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布space-around每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch默認(rèn)方式，如果沒有給元素設(shè)置高度，那么會(huì)占滿整個(gè)交叉軸。Flex項(xiàng)目布局屬性

如果我們想對(duì)某一項(xiàng)子級(jí)元素單獨(dú)設(shè)置屬性，這就要用到flex的項(xiàng)目屬性，設(shè)置在項(xiàng)目（子容器）上的6個(gè)屬性。圖flex項(xiàng)目布局屬性屬性說明order定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。flex-grow定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。flex-shrink定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。負(fù)值對(duì)該屬性無效。如果flex-shrink值為0，表示該項(xiàng)目不收縮。flex-basis定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。flex是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫，默認(rèn)值為01auto。后兩個(gè)屬性可選。align-self允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。Flex布局案例

設(shè)計(jì)一個(gè)小程序頁面，利用flex彈性盒模型布局實(shí)現(xiàn)九宮格效果，在此案例中需要用到Flex彈性模型布局display、更新主軸和側(cè)軸方向?qū)傩詅lex-direction、主軸排列屬性justify-content、側(cè)軸排列屬性align-items。感

謝

觀

看THANK項(xiàng)目三小程序常用組件"Punchineveryday"layoutdesign任務(wù)二“天天打卡”布局設(shè)計(jì)如果需要每天打卡，統(tǒng)計(jì)要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。從圖來看，天天打卡小程序的頁面可以分成上下兩個(gè)區(qū)域，上面區(qū)域用于實(shí)現(xiàn)打卡信息的填寫，包括用戶昵稱、打卡名稱、打卡地點(diǎn)以及打卡時(shí)間。下面區(qū)域以標(biāo)簽的形式列出打卡記錄。方便用戶查看打卡記錄。項(xiàng)目三小程序常用組件任務(wù)描述頁面基本結(jié)構(gòu)

分析了天天打卡小程序并學(xué)習(xí)了Flex布局，接下來編寫天天打卡小程序的基礎(chǔ)頁面結(jié)構(gòu)和樣式，打開pages/card/card.wxml文件編寫頁面結(jié)構(gòu)代碼。<!--

昵稱、打卡名稱

--><view

class="card

mt20"></view><!--

打卡地點(diǎn)

--><view

class="card

mt20"></view>

<!--

打卡時(shí)間：時(shí)間選擇器、重復(fù)日期

--><view

class="card

mt20"></view><!--

新建按鈕

--><view

class="create"></view><!--

打卡標(biāo)簽

--><view

class="list">

</view>案例初始化

在chapter03項(xiàng)目中創(chuàng)建一個(gè)名為card的空白頁面，打開app.json文件，創(chuàng)建新頁面的代碼如下所示。{

"pages":[

"pages/card/card"]}

打開pages/card/card.json文件中編寫頁面配置代碼，設(shè)置具體如下。{

"navigationBarTitleText":

"天天打卡",

"navigationBarBackgroundColor":

"#15a8e2"}感

謝

觀

看THANK項(xiàng)目三小程序常用組件"Punchthecardeveryday"function任務(wù)三“天天打卡”功能實(shí)現(xiàn)如果需要每天打卡，統(tǒng)計(jì)要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。從圖來看，天天打卡小程序的頁面可以分成上下兩個(gè)區(qū)域，上面區(qū)域用于實(shí)現(xiàn)打卡信息的填寫，包括用戶昵稱、打卡名稱、打卡地點(diǎn)以及打卡時(shí)間。下面區(qū)域以標(biāo)簽的形式列出打卡記錄。方便用戶查看打卡記錄。項(xiàng)目三小程序常用組件任務(wù)描述獲得個(gè)人信息-開放數(shù)據(jù)

微信小程序提供了open-data組件用于展示微信開放的數(shù)據(jù)?？梢灾苯荧@取頭像和昵稱，無需用戶授權(quán)。open-data組件屬性屬性類型說明typestring開放數(shù)據(jù)類型，groupName：拉取群名稱，userNickName用戶昵稱。userAvatarUrl用戶頭像。userGender用戶性別。userCity用戶所在城市。userProvince用戶所在省份。userCountry用戶所在國(guó)家。userLanguage用戶的語言。open-gidstring當(dāng)type="groupName"時(shí)生效,群iddefault-textstring數(shù)據(jù)為空時(shí)的默認(rèn)文案打卡名稱-輸入框組件

小程序中的部分組件是由客戶端創(chuàng)建的原生組件，其中包含input輸入框組件，input中的字體是系統(tǒng)字體，所以無法設(shè)置font-family。在案例中，為input組件綁定了bindinput事件，鍵盤輸入時(shí)觸發(fā)，處理函數(shù)可以直接return一個(gè)字符串，將替換輸入框的內(nèi)容。

//

設(shè)置任務(wù)名稱

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

},打開pages/card/card.js文件，實(shí)現(xiàn)bindKeyInput事件，獲取e.detail.value獲取到輸入里的值，通過setData()函數(shù)將e.detail.value值賦給cardName。打卡地點(diǎn)-地理位置API

在微信小程序中，經(jīng)常需要使用到地理位置功能，可以通過API接口來獲取當(dāng)前的位置。小程序提供了wx.chooseLocation(Objectobject)API來獲取地理位置，直接調(diào)用微信的接口API，返回一個(gè)json數(shù)據(jù)。打卡地點(diǎn)-地理位置API[代碼略]"permission":

{

"scope.userLocation":

{

"desc":

"你的位置信息將用于小程序位置接口的效果展示"

}}}

打卡時(shí)間-picker組件

picker組件從底部彈起的滾動(dòng)選擇器。在官方文檔中，提供了五種類型的picker組件，如普通選擇器，多列選擇器，時(shí)間選擇器，日期選擇器和省市區(qū)選擇器，可以用mode屬性區(qū)分。圖picker組件屬性屬性類型說明header-textstring選擇器的標(biāo)題，僅安卓可用modestring選擇器類型，包括selector普通選擇器；multiSelector多列選擇器；time時(shí)間選擇器；date日期選擇器；region省市區(qū)選擇器。disabledboolean是否禁用bindcanceleventhandle取消選擇時(shí)觸發(fā)打卡時(shí)間-picker組件

時(shí)間選擇器bindchange代表當(dāng)用戶選擇了不同的選項(xiàng)時(shí)，會(huì)觸發(fā)相應(yīng)的函數(shù)。可以使用bindchange修改js文件里面對(duì)應(yīng)的值。圖時(shí)間選擇器屬性屬性類型說明valuestring表示選中的時(shí)間，格式為"hh:mm"startstring表示有效時(shí)間范圍的開始，字符串格式為"hh:mm"endstring表示有效時(shí)間范圍的結(jié)束，字符串格式為"hh