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

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

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

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

//

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

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

},打開pages/card/card.js文件，實現(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，返回一個json數(shù)據(jù)。打卡地點(diǎn)-地理位置API[代碼略]"permission":

{

"scope.userLocation":

{

"desc":

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

}}}

打卡時間-picker組件

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

時間選擇器bindchange代表當(dāng)用戶選擇了不同的選項時，會觸發(fā)相應(yīng)的函數(shù)。可以使用bindchange修改js文件里面對應(yīng)的值。圖時間選擇器屬性屬性類型說明valuestring表示選中的時間，格式為"hh:mm"startstring表示有效時間范圍的開始，字符串格式為"hh:mm"endstring表示有效時間范圍的結(jié)束，字符串格式為"hh:mm"bindchangeeventhandlevalue改變時觸發(fā)change事件，event.detail={value}重復(fù)日期-條件運(yùn)算符

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