- 创建一个云开发环境,并在云开发控制台中创建一个名为sign的集合用于存储签到记录。
- 在小程序端创建一个页面,用于展示签到按钮、签到状态和签到记录等信息。
- 使用wx.cloud.callFunction()调用云函数,在云函数中进行签到操作。签到操作包括获取用户openid、查询该用户今天是否已经签到、如果未签到则将签到记录写入sign集合中等操作。
- 在云函数中将签到结果返回给小程序端,更新UI展示签到状态和签到记录。
具体步骤如下:
- 登录微信公众平台,在左侧导航栏中选择“云开发”进入云开发控制台。
- 点击“创建环境”按钮,填写环境名称和地域信息,创建一个云开发环境。
- 在云开发控制台中选择“数据库”选项卡,在“集合管理”中点击“新建集合”,创建一个名为sign的集合。
- 在小程序端创建一个签到页面,可以使用wxml创建一个签到按钮,用于触发签到事件;使用wx:if和wx:for循环展示签到状态和签到记录。
- 在小程序端的js文件中,调用wx.cloud.callFunction()方法,将签到请求发送给云函数。
示例代码如下:
小程序端页面代码:
<view>
<button bindtap="onSignButtonClick">签到</button>
<view wx:if="{{isAlreadySign}}">今日已签到</view>
<view wx:if="{{!isAlreadySign}}">今日未签到</view>
<view>签到记录:</view>
<view wx:for="{{signRecord}}" wx:key="index">{{item}}</view>
</view>
小程序端js代码:
// 点击签到按钮触发的事件
onSignButtonClick: function() {
wx.showLoading({
title: '处理中',
})
wx.cloud.callFunction({
name: 'signin',
complete: res => {
console.log('signin callFunction test result: ', res)
wx.hideLoading()
if (res.result.isSigninSuccess) {
this.setData({
isAlreadySign: true,
signRecord: res.result.signRecord
})
} else {
wx.showToast({
title: '签到失败,请稍后重试!',
icon: 'none'
})
}
}
})
}
- 在云函数中编写签到逻辑。
云函数的主要功能是查询当前用户是否已经签到,如果今天还没有签到,则将签到记录写入sign集合中。可以使用以下代码实现:
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const db = cloud.database()
const openid = cloud.getWXContext().OPENID
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const today = year + '-' + month + '-' + day
let isSigninSuccess = false
let signRecord = []
const res = await db.collection('sign').where({
_openid: openid,
date: today
}).get()
if (res.data.length === 0) {
// 今天还未签到,写入签到记录
await db.collection('sign').add({
data: {
date: today
}
})
isSigninSuccess = true
} else {
// 今天已经签到过了,查询签到记录并返回给小程序端
isSigninSuccess = true
signRecord = res.data.map(item => item.date)
}
return {
isSigninSuccess,
signRecord
}
}