当前位置: 首页 > news >正文

用 UniApp 构建习惯打卡 App —— HabitLoop 开发记

我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

当我脑海中突然冒出一个念头:“做一个自己能每天打卡的习惯 App 吧”,我立刻打开了 CodeBuddy,向它抛出了这样一个请求:

我要用 UniApp 开发一个习惯打卡 App,命名为 HabitLoop。用户可添加多个习惯(如“早起”、“运动”),每天点击打卡,自动记录状态……

这次开发并不复杂,但需求却不少,除了「今日习惯打卡」「日历查看打卡记录」「统计图显示完成率」「本地数据存储」「轻拟态 UI 风格」这些功能点,我最希望的是能用最轻的方式完成开发。于是我没有列大纲、画原型,也没有思考技术栈,而是直接将想法抛给了 CodeBuddy。


项目结构初始化:从 pages.json 到四个主页面

CodeBuddy 先帮我梳理了需求结构,接着它读入了项目根目录的主要文件并查看了 pages.json,发现我只有一个 index 页面。它当即提议并帮我添加了三个新页面:日历页(calendar)、统计页(stats)和添加/编辑习惯页(edit-habit),并更新了 TabBar 配置和应用名 HabitLoop。

在这里插入图片描述

随后,CodeBuddy 马不停蹄地创建了这三个页面对应的 .vue 文件和目录。让我印象深刻的是,它不仅写好了页面的基本结构,还保持了统一的代码风格,比如 setup 语法和简洁的数据结构绑定,非常便于后续拓展。


为轻拟态 UI 打基础:全局样式与状态管理

接下来,它着手改造 App.vue,引入了我提出的“轻拟态 + 扁平融合”风格。我几乎没有细化设计语言,但 CodeBuddy 自动为我构建了一整套 UI 基础,包括圆角变量、卡片阴影、渐变背景、统一色彩体系。

不仅如此,它还主动集成了简单的全局状态管理逻辑,用于存储今日习惯列表、打卡状态等核心数据,避免了我在每个页面中重复处理 localStorage 的麻烦。


首页打卡实现:从样式到交互的全套流程

当 CodeBuddy 开始处理首页时,它做的事情远比我预想得多。它不仅替我设计了「今日习惯」的卡片样式,加入了软阴影和点击动效,还把打卡功能做得很“聪明”。

比如,每点击一次打卡按钮,对应习惯卡片就自动变灰并打上“已完成”的状态,内部状态立即更新并存入本地缓存。用户添加习惯时则会唤起一个新页面,输入习惯名即可完成添加。

在这里插入图片描述

值得一提的是,CodeBuddy 在实现按钮点击的同时还考虑了节流机制,避免了重复打卡或者 UI 抖动。作为一个前端开发者,我很少在草稿阶段考虑到这么细致的用户体验细节,而它显然比我更认真。

在这里插入图片描述


创建图标资源:从命令行到跨平台适配

创建 TabBar 图标时我遇到了一个小插曲:我给 CodeBuddy发了一个 Unix 风格的批量创建命令,但我用的是 Windows PowerShell,命令直接报错了。

没想到 CodeBuddy 立刻识别出我的终端环境,判断我使用的是 Windows,并主动将命令替换为 PowerShell 版本,分步执行创建图标目录和 PNG 占位图的操作。整个过程我几乎没插手,它就像一个贴心助手一样帮我把细节都兜住了。

在这里插入图片描述


安装依赖与后续开发准备

随着基本页面和样式框架搭建完成,CodeBuddy 安装了 dayjs(日期处理)和 @dcloudio/uni-ui(图标组件)两个必要的依赖,并提示我接下来可以着手开发日历视图与完成率统计图了。

这一点我非常满意:它并不是急着推进,而是在每一步都留下了清晰的结构和扩展点,让我能随时暂停,也能方便地接手。


结语:CodeBuddy,让开发像对话一样轻松

从最初的想法到 HabitLoop 的初步成型,我几乎没写一行 HTML,也没点开 UI 原型工具,而是通过与 CodeBuddy 的一场“对话”完成了整个骨架构建和风格设计。

它能根据语境一步步理解我提出的需求,从结构分析到页面生成,从样式体系到跨平台问题处理,CodeBuddy 全程都保持着一种主动、贴心又理性的“专家感”。我特别欣赏它编写的代码结构清晰、逻辑闭合、注释恰当,尤其是页面组件划分和状态响应都非常符合最佳实践。

比起手写代码,我更像是在和一位技术合伙人一起“构思”这个项目,而它不仅能理解我想做什么,还能准确地实现,并提醒我该怎么走得更远。

这也正是我所理解的未来开发形态:你说出想法,它实现功能,而你只需要把握节奏,享受创作。

在这里插入图片描述

相关文章:

用 UniApp 构建习惯打卡 App —— HabitLoop 开发记

我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 当我脑海中突然冒出一个念头:“做一个自己能每天打卡的习惯 App 吧”,我立刻打开了 Cod…...

NB-IoT技术深度解析:部署模式与节能机制全指南

知识点1【NB-IoT的介绍】 NB-IoT 是指Narrow Band Internet of Things,聚集于低功耗窄带宽广域物联网。 1、License介绍 “有牌照”(license)频谱,指的是政府或者监管机构通过拍卖,划拨等方式,授予给各个…...

Vue百日学习计划Day28-32天详细计划-Gemini版

总目标: 在 Day 28-32 深入理解 Vue 3 的响应式机制,熟练掌握 Composition API 中的 setup, ref, reactive, toRefs, readonly, computed, watch, watchEffect 等核心 API 的使用。 所需资源: Vue 3 官方文档 (组合式 API): https://cn.vuejs.org/guide/introducti…...

Leetcode134加油站

题目链接 134 题意图解: 题目给了n个节点,这些节点呈现环状,每次到一个低点要消耗cost[i]的油量。 从中我们可以得出一个结论:看一个点能不能到下一个点,就要用当前的油量减去消耗的量,那么gas[i] - cost…...

用算术右移实现逻辑右移及用逻辑右移实现算术右移

函数srl()用算术右移实现逻辑右移,函数sra()用逻辑右移实现算术右移。 程序代码 int sra(int x,int k); unsigned int srl(unsigned int x, int k);void main() {int rx1,k,x1;unsigned int rx2,x2;k3;x10x8777;x20x8777;rx1sra(x1, k);rx2srl(x2, k);while(1); }…...

箭头函数及其与普通函数区别的详细解释

一、箭头函数的基本特性 语法简洁性 箭头函数使用 > 符号定义,省略 function 关键字,适合快速定义匿名函数或简单表达式。 // 普通函数 function sum(a, b) { return a b; } // 箭头函数 const sum (a, b) > a b;若函数体为单行表达式&#x…...

Denoising Score Matching with Langevin Dynamics

在自然图像等复杂数据集中,真实数据往往集中分布在一个低维流形上,概率密度函数的梯度(即得分函数)难以定义与估计。为缓解该问题,SMLD 提出使用不同强度的高斯噪声对数据进行扰动,扰动后的数据不再集中于低…...

Flink的时间问题

Apache Flink 中的 时间语义(Time Semantics) 是流处理的核心概念之一。Flink 支持多种时间类型,用于控制窗口计算、事件排序和状态管理等操作。 🕒 一、Flink 时间分类 类型名称描述Processing Time处理时间每个算子基于本地系统…...

3:OpenCV—视频播放

播放来自文件或相机的视频 在本教程中,我将向您展示如何使用OpenCV从文件或相机/网络摄像头捕获和播放视频。尽管OpenCV没有针对视频处理进行优化,但它提供了一个简单的API来播放视频。在我们的OpenCV程序中,我们所要做的就是从视频文件或相…...

AI工程 新技术追踪 探讨

文章目录 一、核心差异维度对比二、GitHub对AI工程师的独特价值三、需要警惕的陷阱四、推荐追踪策略五、与传统开发的平衡建议 以下内容整理来自 deepseek 作为AI工程师,追踪GitHub开源项目 对技术成长和职业发展的影响 比传统应用开发工程师 更为显著,…...

C++:函数模板

所谓函数模板就是定义一个通用的函数&#xff0c;不指定具体的参数&#xff0c;用一个虚拟参数代替&#xff1b; 当函数调用时&#xff0c;会根据实参判断具体的类型。 注意&#xff1a;不要使用默认参数&#xff1b;可以重载但尽量不要重载。 #include<iostream> usi…...

一款适配国内的视频软件,畅享大屏与局域网播放

软件介绍 今天要给大家安利一款超强视频播放软件——MXPlayer。它的解码实力堪称一绝&#xff0c;市面上不管是常见的 MP4、MKV 格式&#xff0c;还是对播放设备要求极高的超高清 4K、HDR 视频&#xff0c;甚至那些鲜为人知的冷门格式&#xff0c;它统统都能流畅播放&#xff…...

SONiC系统之高速数据遥测High Frequency Telemetry

SONiC系统之高速数据遥测High Frequency Telemetry 数据遥测 这篇文章介绍了SONiC系统支持Telemetry的软件架构以及gNMI接口中Telemetry Streaming功能Dial-in和Dial-out两者模式的区别。正如该文指出的那样&#xff0c;该结构面临扩展性问题&#xff0c;当AI训练、推理等大型…...

【Java ee初阶】jvm(3)

一、双亲委派机制&#xff08;类加载机制中&#xff0c;最经常考到的问题&#xff09; 类加载的第一个环节中&#xff0c;根据类的全限定类名&#xff08;包名类名&#xff09;找到对应的.class文件的过程。 JVM中进行类加载的操作&#xff0c;需要以来内部的模块“类加载器”…...

C++ for QWidget:connect(连接)

语法&#xff1a; QObject::connect(发射信号的对象,发射的信号,接收信号的对象,接收后执行的命令) #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui-&g…...

uni-app学习笔记七-vue3事件处理

本文主要用于记录vue3中的点击事件和change事件 点击事件&#xff1a;v-on:click,可简写为click change事件&#xff0c;用于监听值发生改变的的事件处理&#xff1a;change 示例代码&#xff1a; <template><view class"box" click"onClick"…...

【C++进阶篇】C++容器完全指南:掌握set和map的使用,提升编码效率

C容器的实践与应用&#xff1a;轻松掌握set、map与multimap的区别与用法 一. 序列式容器与关联式容器1.1 序列式容器 (Sequential Containers)1.2 关联式容器 (Associative Containers) 二. set系列使用2.1 set的构造和迭代器2.2 set的增删查2.2.1 插入2.2.2 查找2.2.3 删除 2.…...

吴恩达机器学习(1)——机器学习算法分类

1、机器学习算法 1、监督学习 在实际应用中最为常见的快速进度结果 2、非监督学习 2、监督学习&#xff08;Supervised Learning&#xff09; 2.1、回归算法 [!note] 监督学习 是指学习从 x -> y 或者从输入到输出映射的算法 监督学习的关键特征是你给学习算法提供学习…...

我的创作纪念日——512天

2023 年 12 月 19 日&#xff0c;我撰写了第 1 篇记录型博客《数据结构课程设计——报数问题》&#xff0c;这是我记录一段实践经验的开始。 回望那时的自己&#xff0c;还很稚嫩&#xff0c;刚刚迈入计算机的大门不久&#xff0c;一切都显得新鲜而充满挑战。今天是我成为创作者…...

SpringBoot快速上手

1.Maven Maven是项目管理工具&#xff0c;通过pom.xml文件来获取jar包&#xff0c;而不用手动去添加jar包 引入依赖之后需要刷新maven&#xff0c;以下这两个地方都可以 中央仓库 &#xff1a; Central Repository: Maven Repository: Central 2.Spring Boot 2.1创建项目…...

自动化:批量文件重命名

自动化&#xff1a;批量文件重命名 1、前言 2、效果图 3、源码 一、前言 今天来分享一款好玩的自动化脚&#xff1a;批量文件重命名 有时候呢&#xff0c;你的文件被下载下来文件名都是乱七八糟毫无规律&#xff0c;但是当时你下载的时候没办法重名或者你又不想另存为重新重…...

低延迟与高性能的技术优势解析:SmartPlayer VS VLC Media Player

在实时视频流的应用中&#xff0c;RTSP&#xff08;Real-Time Streaming Protocol&#xff09;播放器扮演着至关重要的角色&#xff0c;尤其是在视频监控、远程医疗、直播等高实时性需求的场景中。随着行业需求的不断升级&#xff0c;对播放器的低延迟、稳定性、兼容性等方面的…...

java中的Servlet2.x详解

一、Servlet 2.x 版本演进与核心特性 Servlet 2.x 是 Java Web 开发中承上启下的重要版本系列&#xff0c;主要包括 Servlet 2.4 和 Servlet 2.5 两个子版本。以下是其核心特性与改进&#xff1a; Servlet 2.4&#xff08;2003年发布&#xff09; XML Schema 支持&#xff1a;…...

大模型deepseek如何助力数据安全管理

敏感数据识别与处理 精准定位敏感信息 &#xff1a;运用多模态识别引擎技术&#xff0c;快速扫描上传文件与输入内容&#xff0c;精准识别身份证号、银行卡号、商业合同关键信息等各类敏感数据&#xff0c;并支持金融、医疗等行业定制化规则库&#xff0c;满足不同行业的特殊需…...

【linux驱动】【设备树】按键设备树讲解

设备树你添加电源键示例。 / {gpio-keys {compatible = "gpio-keys";#address-cells = <1>;#size-cells = <0>;button@1 {label = "Power Button";linux,code = <KEY_POWER>; // 按键编码,定义在include/uapi/linux/input-event-code…...

Vibe Coding:编程中的氛围与效率的艺术

引言 在软件开发的世界里&#xff0c;我们常常关注语言特性、框架选择和算法效率&#xff0c;却较少讨论一个同样重要的因素——编程时的"氛围"&#xff08;vibe&#xff09;。Vibe Coding是一种关注开发者心理状态、工作环境和整体"感觉"的编程方法论。它…...

算法岗实习八股整理——深度学习篇(不断更新中)

目录 激活函数特征典型例子sigmod函数tanh函数补充&#xff1a;零中心化输出优势非线性特性如何提升神经网络表现 激活函数 特征 非线性&#xff1a;激活函数满足非线性时&#xff0c;才不会被单层网络替代&#xff0c;神经网络才有意义可微性&#xff1a;优化器大多数是用梯…...

Java IO及Netty框架学习小结

Netty netty官网: Netty 什么是Netty&#xff1f; Netty 是 一个异步事件驱动的网络应用程序框架&#xff0c;用于快速开发可维护的高性能协议服务器和客户端。Netty 是一个 NIO 客户端服务器框架&#xff0c;可以快速轻松地开发网络应用程序&#xff08;例如协议服务器和客…...

理想AI Talk第二季-重点信息总结

一、TL&#xff1b;DR 理想为什么要做自己的基模&#xff1a;座舱家庭等特殊VLM场景&#xff0c;deepseek/openai没有解决理想的基模参数量&#xff1a;服务端-300B&#xff0c;VLencoder-32B/3.6B&#xff0c;日常工作使用-300B&#xff0c;VLA-4B为什么自动驾驶可以达成&…...

软件架构之-论软件系统架构评估以及应用

论软件系统架构评估以及应用 摘要正文 摘要 2023年2月&#xff0c;本人所在集团公司承接了长三角地区某省渔船图纸电子化审查系统项目开发&#xff0c;该项目旨在为长三角地区渔船建造设计院&#xff0c;以及渔船图纸审查机构提供一个便捷化的服务平台。在此项目中&#xff0c;…...

Java面试实战:从Spring Boot到分布式缓存的深度探索

Java面试实战&#xff1a;从Spring Boot到分布式缓存的深度探索 场景介绍 在一家著名的互联网大厂&#xff0c;面试官老王正对求职者“水货程序员”明哥进行Java技术面试。明哥带着一点紧张和自信&#xff0c;迎接这场技术“拷问”。 第一轮&#xff1a;基础问题 老王&#…...

2025年全国青少年信息素养大赛C++小学全年级初赛试题

一、单选题 1、在C中&#xff0c;表示逻辑运算符 "或" 的是&#xff1f;&#xff08; &#xff09;&#xff08;5 分&#xff09; A&#xff0e;|| B&#xff0e;& C&#xff0e; D&#xff0e; 解析&#xff1a;||是或者&#xff0c; &&是并且 2、…...

React中巧妙使用异步组件Suspense优化页面性能。

文章目录 前言一、为什么需要异步组件&#xff1f;1. 性能瓶颈分析2. 异步组件的价值 二、核心实现方式1. React.lazy Suspense&#xff08;官方推荐&#xff09;2. 路由级代码分割&#xff08;React Router v6&#xff09; 总结 前言 在 React 应用中&#xff0c;随着功能复…...

nginx相关面试题30道

一、基础概念与核心特性 1. 什么是 Nginx&#xff1f;它的主要用途有哪些&#xff1f; 答案&#xff1a; Nginx 是一款高性能的开源 Web 服务器、反向代理服务器及负载均衡器&#xff0c;基于事件驱动的异步非阻塞架构&#xff0c;擅长处理高并发场景。 主要用途&#xff1a;…...

java中的Servlet1.x详解

Servlet 1.x 是 Java Web 开发的早期规范&#xff0c;为后续版本奠定了基础。以下是其核心特性、使用方式及与现代版本的对比分析&#xff1a; 一、Servlet 1.x 的核心特性 基础接口与实现 Servlet 1.x 的核心是 javax.servlet.Servlet 接口&#xff0c;开发者必须直接实现其五…...

给大模型“贴膏药”:LoRA微调原理说明书

一、前言&#xff1a;当AI模型开始“叛逆” 某天&#xff0c;我决定教deepseek说方言。 第一次尝试&#xff08;传统微调&#xff09;&#xff1a; 我&#xff1a;给deepseek灌了100G东北小品数据集&#xff0c;训练三天三夜。结果&#xff1a;AI确实会喊“老铁666”了…但英…...

【数字电路】第七章 脉冲波形的产生与整形电路

一、脉冲波形的产生与整形电路概述 1.矩形脉冲的获得方法 2.矩形脉冲的主要参数 3.本章所涉及的电路 4.稳态与暂稳态 电路的暂稳态实际上是通过RC电路的充放电来实现的。 5.TTL电路输入等效电路 6.TTL电路的输出等效电路 7.CMOS电路的输入等效电路 8.CMOS电路的输出等效电路 …...

React Flow 边的基础知识与示例:从基本属性到代码实例详解

本文为《React Agent&#xff1a;从零开始构建 AI 智能体》专栏系列文章。 专栏地址&#xff1a;https://blog.csdn.net/suiyingy/category_12933485.html。项目地址&#xff1a;https://gitee.com/fgai/react-agent&#xff08;含完整代码示​例与实战源&#xff09;。完整介绍…...

DB-MongoDB-00002--Workload Generator for MongoDB

## DB-MongoDB-00002–Workload Generator for MongoDB 1、介绍 Workload Generator for MongoDB was designed to help MongoDB users effortlessly generate data and simulate workloads for both sharded and non-sharded clusters. The generated workloads include s…...

buck变换器的simulink/matlab仿真和python参数设计

什么是Buck电路? BUCK电路是一种降压斩波器&#xff0c;降压变换器输出电压平均值Uo总是小于输出电压UD。通常电感中的电流是否连续&#xff0c;取决于开关频率、滤波电感L和电容C的数值。BUCK也是DC-DC基本拓扑&#xff0c;或者称为电路结构&#xff0c;是最基本的DC-DC电路…...

谷歌地球引擎GEE将多个遥感影像作为多个波段合并成一张图像并下载的方法

本文介绍在谷歌地球引擎&#xff08;Google Earth Engine&#xff0c;GEE&#xff09;中&#xff0c;下载多年的逐日的ERA5土壤湿度数据&#xff0c;并在下载时&#xff0c;将每年同月份内的每一天的图像作为一个波段加以合并的方法。 在之前的文章GEE谷歌地球引擎批量下载逐日…...

Debezium快照事件监听器系统设计

Debezium快照事件监听器系统设计 1. 系统概述 1.1 设计目标 为 Debezium 的快照过程提供可扩展的事件监听机制允许外部系统在快照过程中执行自定义逻辑提供线程安全的事件分发机制确保监听器的异常不会影响主快照流程1.2 核心功能 表快照开始事件监听表快照完成事件监听行数据…...

选择之困:如何挑选合适的 Python 环境与工具——以 Google Colaboratory 为例

引言:选择之困与 Python 的多样性 在过去的十年中,Python 编程语言以其简洁的语法、强大的功能和广泛的适用性迅速崛起,成为全球最受欢迎的编程语言之一。从数据科学到 Web 开发,从自动化脚本到人工智能,Python 无处不在。然而,这种多样性和快速发展也带来了一个显著的问…...

基于Java+MySQL+Servlet的留言系统开发全解析

本系统基于Java Web技术栈开发&#xff0c;采用前后端分离架构&#xff0c;后端通过Servlet实现业务逻辑&#xff0c;前端使用HTML/CSS/JavaScript构建交互界面。本文将详细解析系统设计思路、技术实现与核心代码&#xff0c;助您快速掌握留言系统开发精髓。 一、项目简介 本留…...

实操分享java应用容器化,使用docker作为容器工具

### 一. 目的 将现有的java应用容器化,使用docker作为容器工具。 ### 二. 配置 #### 1. Java应用中的配置 ##### a. Java子项目中的pom文件配置 ```xml <build> <plugins> <plugin> <groupId>org.spring…...

李臻20242817_安全文件传输系统项目报告_第12周

安全文件传输系统项目报告&#xff08;第 9 周&#xff09; 1. 代码链接 Gitee 仓库地址&#xff1a;https://gitee.com/li-zhen1215/homework/tree/master/Secure-file 代码结构说明&#xff1a; project-root/├── src/ # 源代码目录│ ├── main.c # 主程序入口│ ├…...

19-I2C库函数

一、IIC配置流程 IIC配置流程需要添加的库函数&#xff1a;stm32f4xx_i2c.c 1、理解电路原理图 SCL --- PB8 SDA -- PB9 使用I2C1 2、配置I2C库函数的步骤 &#xff08;1&#xff09;使能GPIOB组时钟RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOB, ENABLE);&#xff08;2…...

minicom串口调试助手

sudo apt-get install minicom 配置 sudo minicom -s 然后用方向键向下移动到“Serial port setup”&#xff0c;回车 按键盘“A”把串口的映射文件名输入。 按键盘“E”可以修改波特率 按键盘“F”把硬件流关闭&#xff0c;否则minicom可能无法接收键盘输入。 配置好后&…...

扫描件交叉合并PDF免费软件 拖拽即合并 + 自动对齐页码 档案整合更轻松

各位办公小能手们&#xff01;我跟你们说啊&#xff0c;今天要给你们介绍个超厉害的工具&#xff0c;叫PDFCrossMerge。这玩意儿就像一个神奇的文档小魔法师&#xff0c;专门搞PDF扫描件交叉合并的事儿&#xff0c;能解决单面扫描文件正反面页码顺序的大难题。 先说说它的核心…...

atcoder C - ~

https://atcoder.jp/contests/abc406/tasks/abc406_c 题目简述&#xff1a; 给定一个序列p&#xff0c;让你求出p的所有子序列中波浪形序列的个数 波浪形序列的定义&#xff1a;1&#xff1a;长度>4&#xff1b;2&#xff1a;仅存在一个波峰和波谷&#xff1b;3&#xff1…...