微信小程序制作学习计划打卡代码
时间: 2023-07-14 10:13:04 浏览: 94
以下是微信小程序制作学习计划打卡的代码示例:
1. 在小程序的页面中添加一个表单,包括计划名称、学习时长、完成情况等字段。
```html
<form bindsubmit="formSubmit">
<label>计划名称</label>
<input type="text" name="planName" placeholder="请输入计划名称">
<label>学习时长</label>
<input type="text" name="studyTime" placeholder="请输入学习时长">
<label>完成情况</label>
<select name="isFinished">
<option value="0">未完成</option>
<option value="1">已完成</option>
</select>
<button type="submit">提交打卡</button>
</form>
```
2. 在小程序的 js 文件中添加表单提交的事件处理函数,将用户输入的数据发送到服务器保存。
```javascript
Page({
formSubmit: function(e) {
wx.request({
url: 'https://api.example.com/plan/daka',
method: 'POST',
data: e.detail.value,
success: function(res) {
console.log(res.data)
// 提交成功后跳转到打卡记录列表页
wx.navigateTo({
url: '/pages/record/list'
})
}
})
}
})
```
3. 在服务器端编写接收表单数据的 API,并保存到数据库中。
```javascript
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
app.post('/plan/daka', (req, res) => {
const planName = req.body.planName
const studyTime = req.body.studyTime
const isFinished = req.body.isFinished
// 将数据保存到数据库中
// ...
res.json({
success: true
})
})
app.listen(3000, () => {
console.log('Server is running on port 3000')
})
```
以上是一个简单的微信小程序制作学习计划打卡的示例,具体实现方式可以根据自己的需求进行调整和完善。