『牛角书』鸿蒙简易备忘录

最新推荐文章于 2025-06-21 23:21:38 发布

原创

最新推荐文章于 2025-06-21 23:21:38 发布 · 1.8k 阅读

标签

#harmonyos #华为

『牛角书』鸿蒙简易备忘录

前言
项目运行
- 功能介绍
- 项目截图
项目开发
- 项目创建
- 编写程序

前言

鸿蒙移动应用开发作为本学期的一门选修课，让我第一次了解了手机app的开发过程同时也清楚了鸿蒙应用的开发步骤，自己也试着开发了一个简单的鸿蒙app——备忘录。

项目运行

功能介绍

基本的备忘录功能
时间截止警告
搜索功能

项目截图

初始界面
输入备忘录内容以及截止时间界面
选择截止日期
关键字搜索

项目开发

项目创建

1、选择空项目
在这里插入图片描述
2、确认项目名称、存储路径、包名、开发SDK以及语言

3、完成创建
项目结构

编写程序

1、前端index.html

<div class="container">
    <div class="title-box">
        <text class="title" onclick="onShow"> {
  
  { title }}</text>
        <text class="number"> {
  
  { number }} </text>
    </div>

    <div class="search-box">
        <search onchange="getTodos()" onblur="getTodos()">
        </search>
    </div>

    <div class="text-box">
        <list>
            <list-item for="{
  
  {todoList}}" class="todo-item" onlongpress="LongPressToChoose" onclick="ClickToEdit($idx)">
                <div style="width: 10px;">
                    <button if="{
  
  {$item.color==3}}" style="height: 100%; width: 100%; background-color: red;"></button>
                    <button if="{
  
  {$item.color==2}}" style="height: 100%; width: 100%; background-color: indianred;"></button>
                    <button if="{
  
  {$item.color==1}}" style="height: 100%; width: 100%; background-color: blue;"></button>
                    <button if="{
  
  {$item.color==0}}" style="height: 100%; width: 100%; background-color: skyblue;"></button>
                </div>
                <div class="div-item">
                    <text class="title-text" > {
  
  {$item.title}} </text>

                    <text if="{
  
  {$item.ddl}}" class="date-text" > DDL:{
  
  {$item.ddl}} </text>
                    <text else class="date-text"> {
  
  {$item.date}} </text>

                    <div class="delete-choose">
                        <input type="checkbox" value="{
  
  {$idx}}" disabled="{
  
  {!choose_delete}}" show="{
  
  {choose_delete}}" onchange="ChooseToDelete($idx)">
                        </input>
                    </div>
                </div>

            </list-item>
        </list>
    </div>

    <button class="addButton" type="circle" onclick="AddOrDelete">
        {
  
  {add_delete}}
    </button>
</div>

edit.html