介绍
今天，我们生活在一个科技高度发达的时代，智能手机已经成为我们生活中不可或缺的一部分。随着科技的发展，小程序已经成为脱离手机操作系统的新功能，小程序运行速度快、体验好，而且安全性高。打卡小程序也是其中一种应用。本文将为您介绍如何制作一个小程序每日记录打卡。
准备工作
在开始制作打卡小程序前，您需要了解以下几点：
微信公众平台账号。（如果您没有微信公众平台账号，请先去注册，注册相关教程可以在百度搜索）
微信开发者工具。（微信开发者工具是微信开发者中心为开发者提供的一个开发辅助工具，该工具包括了公众号开发、小程序开发、移动应用开发者工具。）
基本的 HTML、CSS、JavaScript 等前端技术。
步骤
1.创建小程序项目
首先，打开微信开发者工具，选择小程序，然后创建一个新项目，在创建项目时填写：应用名称、小程序 ID 、小程序目录，选择自定义项目配置，然后进入开发环境。
2. 编写代码
在微信开发者工具中，我们可以看到三个文件，分别是 .json 、.wxml 、.wxss 文件。接下来，我们需要对这三个文件进行修改。
首先，我们需要在 app.json 文件中进行配置：
“`javascript
{
“pages”: [
“pages/index/index”,
“pages/logs/logs”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “打卡小程序”,
“navigationBarTextStyle”: “black”
}
}
“`
然后，我们需要接着在 app.json 文件中引入样式文件、做全局配置等其他操作。
接下来，我们在 index.wxml 文件中编写代码，创建打卡页面：
“`html
{{ title }}
“`
我们还需要编写样式代码:
“`css
/*index.wxss*/
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f7f7;
}
.card {
width: 70%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.card-header {
padding: 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #eee;
}
.card-content {
padding: 20px;
}
.form-label {
display: block;
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.form-input {
width: 100%;
margin-bottom: 20px;
height: 40px;
font-size: 14px;
padding: 5px 10px;
border: 1px solid #eee;
}
.form-btn {
display: block;
width: 100%;
background-color: #0086CB;
color: #fff;
height: 40px;
font-size: 14px;
border: 0;
border-radius: 4px;
cursor: pointer;
}
“`
3.云开发，管理数据
我们在云开发中新建集合名为 punch ，并添加以下字段：
_id
content
date
然后，在小程序中调用云函数，并将数据插入到云数据库中。
4.测试与发布
完成以上任务后，我们就需要进行测试了，测试环节非常重要，通过测试，我们能够及时发现程序中的问题并及时修改。测试通过后，就可以将程序发布至小程序平台。
总结
本文为您介绍了如何自己制作一个小程序每天打卡记录，并详细的分享了步骤。在完成本文中的小程序之后，您可以将其运用到自己的生活中，用它来记录每天的生活、学*、事项等。同时，小程序的应用也非常广泛，未来它将会成为各行各业必备的工具之一，我们应该好好学*，并发掘它更多的应用场景。
….
未经允许不得转载：答案星辰 » 如何自己制作一个小程序每天打卡记录，看文章吧！
