微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件 3-3 課件-“天天打卡”功能實(shí)現(xiàn)

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

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

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

//

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

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

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

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

{

"scope.userLocation":

{

"desc":

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

}}}

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

picker組件從底部彈起的滾動(dòng)選擇器。在官方文檔中，提供了五種類(lèi)型的picker組件，如普通選擇器，多列選擇器，時(shí)間選擇器，日期選擇器和省市區(qū)選擇器，可以用mode屬性區(qū)分。圖picker組件屬性屬性類(lèi)型說(shuō)明header-textstring選擇器的標(biāo)題，僅安卓可用modestring選擇器類(lèi)型，包括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í)間選擇器屬性屬性類(lèi)型說(shuō)明valuestring表示選中的時(shí)間，格式為"hh:mm"startstring表示有效時(shí)間范圍的開(kāi)始，字符串格式為"hh:mm"endstring表示有效時(shí)間范圍的結(jié)束，字符串格式為"hh:mm"bindchangeeventhandlevalue改變時(shí)觸發(fā)change事件，event.detail={value}重復(fù)日期-條件運(yùn)算符

在小程序的開(kāi)發(fā)中，有時(shí)候需要根據(jù)page的data中的數(shù)據(jù)來(lái)決定頁(yè)面中的某元素加不加載，或者一個(gè)元素有沒(méi)有某個(gè)屬性，這時(shí)候就可以用條件