微信小程序开发项目实战（微课版）课件 3-3 课件-“天天打卡”功能实现

项目三小程序常用组件"Punchthecardeveryday"function任务三“天天打卡”功能实现如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。从图来看，天天打卡小程序的页面可以分成上下两个区域，上面区域用于实现打卡信息的填写，包括用户昵称、打卡名称、打卡地点以及打卡时间。下面区域以标签的形式列出打卡记录。方便用户查看打卡记录。项目三小程序常用组件任务描述获得个人信息-开放数据

微信小程序提供了open-data组件用于展示微信开放的数据。可以直接获取头像和昵称，无需用户授权。open-data组件属性属性类型说明typestring开放数据类型，groupName：拉取群名称，userNickName用户昵称。userAvatarUrl用户头像。userGender用户性别。userCity用户所在城市。userProvince用户所在省份。userCountry用户所在国家。userLanguage用户的语言。open-gidstring当type="groupName"时生效,群iddefault-textstring数据为空时的默认文案打卡名称-输入框组件

小程序中的部分组件是由客户端创建的原生组件，其中包含input输入框组件，input中的字体是系统字体，所以无法设置font-family。在案例中，为input组件绑定了bindinput事件，键盘输入时触发，处理函数可以直接return一个字符串，将替换输入框的内容。

//

设置任务名称

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

},打开pages/card/card.js文件，实现bindKeyInput事件，获取e.detail.value获取到输入里的值，通过setData()函数将e.detail.value值赋给cardName。打卡地点-地理位置API

在微信小程序中，经常需要使用到地理位置功能，可以通过API接口来获取当前的位置。小程序提供了wx.chooseLocation(Objectobject)API来获取地理位置，直接调用微信的接口API，返回一个json数据。打卡地点-地理位置API[代码略]"permission":

{

"scope.userLocation":

{

"desc":

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

}}}

打卡时间-picker组件

picker组件从底部弹起的滚动选择器。在官方文档中，提供了五种类型的picker组件，如普通选择器，多列选择器，时间选择器，日期选择器和省市区选择器，可以用mode属性区分。图picker组件属性属性类型说明header-textstring选择器的标题，仅安卓可用modestring选择器类型，包括selector普通选择器；multiSelector多列选择器；time时间选择器；date日期选择器；region省市区选择器。disabledboolean是否禁用bindcanceleventhandle取消选择时触发打卡时间-picker组件

时间选择器bindchange代表当用户选择了不同的选项时，会触发相应的函数。可以使用bindchange修改js文件里面对应的值。图时间选择器属性属性类型说明valuestring表示选中的时间，格式为"hh:mm"startstring表示有效时间范围的开始，字符串格式为"hh:mm"endstring表示有效时间范围的结束，字符串格式为"hh:mm"bindchangeeventhandlevalue改变时触发change事件，event.detail={value}重复日期-条件运算符

在小程序的开发中，有时候需要根据page的data中的数据来决定页面中的某元素加不加载，或者一个元素有没有某个属性，这时候就可以用条件