【微信备忘录小程序的设计与实现15000字（论文）】

微信备忘录小程序的设计与实现摘要伴随移动互联网发展规模的不断扩大，我国手机网民规模也逐渐壮大，网民的上网设备也进一步向移动终端过渡。随着移动通信网络环境的不断完善以及智能手机的进一步普及，移动互联网应用向用户各类生活需求深入渗透。同时，用户对微信的依赖度越来越强，小程序作为一种无需下载安装即可使用的应用形态，用户通过扫一扫或者搜一下即可打开应用，保证了用户使用的便捷性。目前，人们处在被信息包围的环境中，几乎每位用户手机中都需要一款备忘录式的记录软件，帮助用户合理地安排学习及工作日程，以防疏漏。本设计正是基于此想法设计了一款集成记事、提醒、待办任务管理及倒数日功能的备忘录系统，并基于微信小程序平台对该系统进行了实现，有效提高了用户的工作效率。该系统采用了MyEclipse开发平台以及MySQL关系型数据库进行设计，主要应用MVC设计开发模式，实现对各备忘事项的增删改查等基本操作。在记事模块用户可以在不同类型的备忘录册中添加详细的事项内容，并且可以新添不同标题的提醒事项。同时，用户还可以新建不同日期的待办任务本。最后，本文还实现了倒数日功能，用户可以对重要的时间节点进行日程提醒。关键词：微信小程序；备忘录；记事管理；提醒及任务管理目录英文摘要及关键词…………………Ⅵ12192第1章绪论 1114631.1研究的背景 126731.1.1社会背景 124381.1.2技术背景 2158051.2研究目的 3244801.3研究意义 314231.4国内外研究现状 4234021.5本文主要研究工作 5912第2章相关概念与技术介绍 6194362.1相关概念 6139882.1.1MVC设计模式 6226602.1.2微信开发者工具 711422.1.3MyEclipse集成开发平台 9258202.2相关技术 931122.2.1MySQL数据库管理系统 974852.2.2Navicat 1029638第3章系统分析与设计 11140173.1需求分析 11118333.1.1功能需求 1125643.1.2安全需求 11260473.2系统功能模块 1292613.3系统界面设计 13223253.4数据库设计 162453第4章系统实现 1832624.1记事及提醒管理 18323414.2待办任务管理 2167914.3倒数日管理 223195第5章系统测试 24221965.1记事及提醒事项测试 24319305.2待办任务测试 2635215.3日历及倒数日测试 2724019第6章总结与展望 2932472参考文献 30PAGEPAGE13第1章绪论1.1研究的背景1.1.1社会背景近年来，全球移动设备产业发展迅速，特别是在我国，手机的用户数量增长迅猛，根据《中国移动互联网发展报告（2021）》指出，截止2020年12月，中国手机网民规模已达9.86亿，占整体网民的99.7%。目前，移动设备占据了巨大的市场份额，同时各移动设备的功能也越来越强大，已经基本可以代替电脑完成人们日常的生活需求，并且拥有比电脑更方便携带和操作的优势，因此也收获了巨大的用户量。在中国，移动端设备的用户覆盖了各个年龄层，一般集中在15-50岁之间，其中青年用户数量最多。这类人群知识水平相对较高，接受和学习新事物的能力较强，对智能设备比较熟悉，对其功能要求相对较高[1]。随着网络用户基数与互联网的普及率持续上升，人们获取并记录信息的主要媒介也发生了翻天覆地的变化，伴随移动互联网技术的发展，移动智能设备（智能手机、PAD平板电脑、电子书等）也走进千家万户，其中以智能手机为代表的移动智能设备逐渐成为日常学习生活中不可或缺的通讯与学习工具，在此影响下传统的书本记录方式也受到巨大的冲击，数字化的记录方式已经成为主流。移动平台带来了更加快捷与方便的记录方式，用户可以不用担心记录的容量、安全、丢失等一系列问题，只需要一个账号就能实现同步云端记录，数字化的备忘录符合移动互联网时代的发展[2]。从1980年个人计算机诞生以来，微软公司在1983年发布了第一款文字处理软件MicrosoftWord，这是人类第一次采用电子设备记录文本内容。到了1985年前后，微软操作系统内部就増加了简单的记事本软件，可以进行简单的文字处理。到1996年，互联网技术兴起并得到迅速发展，计算机开始可以安装文字记录软件，部分PC版本的文字记录软件开始陆续出现。2002年，OneNote笔记本软件正式对外发布。到2008年，目前全世界使用用户最多的电子笔记软件印象笔记开始被用户使用。这些产品也为后续记录式软件的发展起到了重要意义，它们能够帮助用户保存个人信息，并且能有效地整理各类笔记，人们使用这类软件可以提高自己的办事效率。所以，今后的记录软件将会更加注重于帮助用户管理事务并合理安排日程，同时不仅支持文本的记录方式，还会更多的以语音或图像等多媒体方式来更高效地记录信息。近几年，移动端的备忘录类软件也得到了飞速发展，标志着人们己经进入移动端电子记录的时代，逐渐出现的移动端记事软件，诸如吾记、链子便签、随笔记、微笔记、滴答清单等。它们的共同点就是实现通过手机来记录笔记的功能，但是它们各自也有着自己的特色和优势，满足不同的用户需求，随着智能手机的普及和微信平台的发展，现在手机中几乎都有方便快捷的记录型应用。同时这些软件大多数都是基于不同的手机操作系统开发设计的，以App的形式供用户使用，一般功能较为复杂，有的软件界面固定，无法轻松查看全部事件，并存在着无法直观查看备忘录记录时间的局限。基于此，本设计希望能面向各个年龄层，设计一款能轻松查看所有记录的轻量级备忘录小程序。1.1.2技术背景2016年9月21日，微信推出了一个新功能——小程序。凭借其简单好用，方便高效的特点走红朋友圈。2017年1月9日，腾讯公司开始全面推广微信小程序，作为一款战略级产品，微信小程序一经正式推出，就受到人们的广泛喜爱。用户无需再安装应用就可以享受方便快捷的服务，这与微信小程序“连接一切”的战略目标不谋而合[3]。市场经济不断发展，人们越来越与这个互联网的世界接轨，对于信息服务的需求和要求也越来越高。现在人们每天接受到的信息量是过去的几十或几百倍，这就要求企业打造符合人们信息需求的科技产品。微信小程序无疑就是这样的一款产品。形形色色的APP带来不同的效果，微信小程序将他们连接起来。人们可以通过小程序直接与微信好友进行信息转发，在信息传播过程中，信息得到最大程度的共享，效率成倍提升[4]。此外，微信小程序依托微信这个超级APP，不仅开发成本相对低廉，无需安装、用完即走，非常适合用户在空余时间有效率地记录事项。从微信小程序的本质看，就是将给到微信支付、滴滴等这些被腾讯给予的“特权能力”的一部分，通过标准化的接口让普通开发者使用，以微信支付为例，它始终没有自己单独的APP，但在移动支付市场快速崛起的情况下，丝毫没有影响它的竞争力，这也体现了“顺手”即方便的优势[5]。腾讯官方对微信小程序的开发者文档、开发工具、API接口的开放等正在不断更新和趋于完善，微信小程序的开发技术基本成熟[6]。总之，微信小程序作为内置于微信中的应用形态，它是区别于NativeApp的另外一种App形式，可以直接在微信里面打开，并且拥有和NativeApp几乎一样的功能和形式，在保持使用流畅的前提下，不会占用太多的手机内存。所以，本设计基于微信开发者工具，设计并实现了一款备忘录的小程序，用户在使用微信进行社交的同时，能够更加高效快捷地记录信息。1.2研究目的随着移动互联网迅速发展，手机上安装的移动应用越来越多，而当前人们接收到的信息也越来越多，例如学生群体，在学习生活中，每天都会收到各类学习文件，再加上各个平台上的缓存信息，人们对手机内存的需求越来越大。近年来，各大应用提供商相继提出各自的轻量级应用解决方案，但都没有成功，微信小程序的出现给业界带来了新的震动。本文也选择了基于微信开发者平台提供的工具完成备忘录的设计与实现，主要目的在于当前微信用户数量剧增，依附于微信这个超级App的各种小程序出现在人们视野中，因为它支持分享转发、共享、获取等特性，这也有利于小程序的传播[7]。目前市面上的备忘录应用五花八门，例如有道云笔记、高校TODO等等，同时设计的功能相对比较复杂，有些无法直接查看相关记录事项，例如创建时间等[8]。本文所实现的小程序的页面设计清晰简洁，尽量列出当前事项的所有相关信息，同时提供倒数日功能，对于一些重要的时间节点设置截止日期，更好地提醒用户注意日程安排，提供个性化的管理。1.3研究意义当前，微信用户的年龄覆盖范围很大，特别是在当下处于疫情的社会背景下，有许多的老年人群体也会通过微信进行社交或使用相关的健康码、行程卡等小程序。所以，本项目主要基于微信小程序设计，不仅符合当下年轻人随开随用的使用模式，同时老年人群体也无需下载相关应用，无需担心这些应用相关的授权管理，用户能够更放心的存储自己的事项。微信已经从传统的社交性应用转变为可提供多样服务的应用平台。例如在当前很多的商铺中，商家基本都会提供扫码点餐、下单等功能的二维码，并且现在人们基本会通过相关小程序以提前下单、预约的形式购买商品，这主要是因为当前生活节奏加快，人们需要这种快捷方便的方式。本项目基于微信平台开发，用户只需简单下滑即可打开应用，保证了用户使用的便捷性。总之，在当下信息爆炸的时代，且已经进入5G的时代，信息的获取变得非常便捷，高强度、快节奏的生活已经让人们的压力很大，海量的信息让人们目不暇接，为了避免人们忘了日程的安排而错过了重要的事情，备忘录几乎成为所有手机生产商出产手机必备的一款应用。本文所实现的小程序能够让用户记录自己的重要事项，并能自拟提醒信息以及任务管理，同时提供了个性化的倒数日期功能，能够帮助用户合理地管理自己的学习或是工作安排，有着较强的实用意义和广阔的市场前景。1.4国内外研究现状目前国内外个人备忘录软件经过多年的发展，已经形成了较为完善的技术体系。在现代信息社会中，人们越来越重视信息的交流与沟通，并且更加注重时间的有效利用与管理，因此个人事务的记录在日常生活中成为一项必不可少的内容，方便实用的备忘录对于提高信息利用效率具有重要意义。例如韩国三星GalaxyNote中的备忘录，它支持手写及键盘输入模式，另外还可以进行录音以及图片、即时拍照、剪贴板的插入，整体的功能比较强大。在安卓系统升级后，该备忘录还增设了五个快速进入的热键，支持文本、手写、录音等快速的进入方式也让用户可以即时地创建灵感和记录生活[9]。目前国内个人备忘录也有很多运行在移动端，主要是为用户提供对个人事项的记录与查询功能。以网易的有道云笔记为例，它能够通过云存储技术帮助用户建立一个可以轻松访问、安全存储的云笔记空间，解决个人事务跨平台的管理问题[10]。用户可以将在移动端记录的事项进行保存，然后自动同步到电脑中，免去数据线的传输烦恼，实现多平台的同步管理。根据对国内外研究开发现状的调查分析，各类备忘录都具有复杂实用的功能，关于相关软件的具体分析如表1-1。表1-1备忘录举例分析表备忘录名称介绍特色局限谷果备忘录全面复刻iPhone中备忘录功能。简单使用，进入快捷。提醒能力不好。有道云笔记记事本类型，支持图片、涂鸦、声音、文本、手写记事。实现云端同步，多种记事方式。复杂，需要网络流量实现同步功能。高效TODO日程备忘类的记事应用，事件按照重要度分类规划。按重要程度分类。界面固定，无法轻松查看全部事件。闪记支持拍照、录音输入。界面友好，事件直观。手势控制、录音结合。无法直观查看备忘录记录时间。1.5本文主要研究工作本文的工作主要从以下几个方面展开：（1）查找相关文献，了解人们对软件使用的需求，确定备忘录的主要功能。进行数据库方面的设计，确定表的结构，完成建模。基于MVC设计模式，使用Java语言实现对库的连接，并能完成基本的对数据的增删改查功能。（2）使用微信开发者工具进行页面设计，实现基础的记事功能，并能够创建不同类型的记事册，同时实现了以列表形式显示的提醒事项功能。从而完成了对用户不同类型的事务的存储功能。（3）基于微信开发者平台以及JS语言，设计了对待办任务的管理页面以及日历本和倒数日的管理页面，实现了对各类事项的个性化管理功能，用户能够更高效地进行日程安排。第2章相关概念与技术介绍2.1相关概念2.1.1MVC设计模式MVC（Model–View–Controller）模式是软件工程中的一种软件架构模式，它把软件系统分为模型（Model）、视图（View）和控制器（Controller）三个基本部分。MVC模式的设计目的是实现一种动态的程序设计，简化后续对程序的修改和扩展，并且使程序某一部分的重复利用成为可能。除此之外，MVC模式通过对复杂度的简化，使程序的结构更加直观。软件系统在分离了自身的基本部分的同时，也赋予了各个基本部分应有的功能，开发者可以通过自身的专长进行团队分工实现[11]。MVC模式中三个组件的详细介绍如下：图2-1MVC开发模式框架图模型（Model）：用于封装与应用程序业务逻辑相关的数据以及对数据的处理方法，负责存储系统的中心数据。Model有对数据直接访问的权力，例如对数据库的访问。Model不依赖View和Controller，也就是说，模型不关注它会被如何显示或是如何被操作。但是模型中数据的变化一般会通过一种刷新机制被公布。为了实现这种机制，那些用于监视此模型的视图必须事先在此模型上注册，由此，视图可以了解在数据模型上发生的改变。视图（View）：能够实现数据有目的的显示（可以定义多个视图）。在View中一般没有程序上的逻辑。为了实现View上的刷新功能，View需要访问它监视的数据模型（即Model），因此应该事先在被它监视的数据那里注册；控制器（Controller）：起到不同层面间的组织作用，用于控制应用程序的流程，并由其完成事件的响应与处理。“事件”包括用户的行为和数据模型上的改变。负责管理与用户的交互控制。本设计采用MVC设计模式，主要在于它有着以下优势。通过该模式可以把数据库的开发，程序业务逻辑开发以及页面开发分开，这样方便后期的代码维护。同时，开发者可以为一个模型在运行的同时建立和使用多个视图，使得所有关联的视图和控制器做到行为同步。并且多个视图可共享同一模型，这样能做到最大化地重用代码。通过使用该模式，本设计的后续主要开发将更加清晰化。2.1.2微信开发者工具微信团队于2017年正式开放了微信小程序，这是一种运行在微信中无需下载和安装、即开即用的类似于Web应用的程序，其优势在于微信的庞大用户群体，无需下载和安装，易于推广，不必兼容iOS和Android系统，可以通过微信登录授权进行身份验证和用户信息绑定，很大程度上简化了用户的操作[12]。2017年腾讯公司全年财报指出，微信小程序将作为未来微信发展的重点方向，自微信小程序发布以来日活跃用户己经达到1.7亿，共有超过58万款小程序通过审核并上线[13]。微信小程序的文件目录含有代表整个项目的App文件和多个描述系统页面的page文件，根目录中的app.json文件表示当前项目的全局配置，包含了该小程序的所有页面路径、界面表现形式、网络超时时间和底部tab导航栏。传统的Web程序采用的是HTML、CSS和JS的组合进行开发，其中HTML通过标签搭建页面的DOM结构，CSS通过样式决定如何展现元素，JS通过脚本语言处理页面的行为。而微信小程序的页面由js、wxml、wxss和json文件构成，分别对应页面的交互逻辑、DOM结构、层叠样式和全局配置[14]。微信小程序的框架借鉴了MVC开发模式，由逻辑层、视图层和系统层三部分组成，小程序框架如图2-2所示。图2-2微信小程序框架微信小程序中逻辑层采用JavaScript引擎提供JS代码的运行环境，逻辑层可以通过微信内核调用它的原生API，每个页面注册时，逻辑层将数据进行处理并发送给视图层，并通过回调函数接受视图层的反馈。小程序的各个页面均可通过逻辑层实现初始化数据，绑定生命周期函数等，如onLoad函数在页面加载完毕时触发；onShow函数在页面的所有元素挂载完成时触发；onRead函数在页面的DOM结构加载完成时触发，表示页面此时可以与视图层进行交互；onHide函数在页面隐藏或切入后台时触发；onUnload函数在页面关闭或重定向到其他页面时触发，不同的业务逻辑可以在不同生命周期函数中进行处理。视图层由wxml和wxss组成，通过小程序原生组件进行展示，wxml是基于小程序框架设计且和HTML相似的标签语言，可以通过数据绑定、列表渲染和事件搭建视图结构。wxss是类似于css的层叠样式表，用来设置页面样式，并且wxss在css的基础上进行了封装，其中还包含一些小程序特有的属性，例如自适应移动设备的尺寸等。总之，视图层可以为页面提供不同的丰富的UI样式。系统层包括对微信平台接口的访问，例如微信功能、离线存储和网络请求等。微信功能包括微信用户登录授权、转发分享、获取二维码等，而实现这一类的请求只需要调用相应API即可；离线存储借鉴了基于HTML5的Web存储localStorage和sessionStorage；网络请求通过调用wx.request接口可发起HTTP请求。开发者在使用微信开发工具进行开发时，只需要专注于视图层和逻辑层的开发，不必太多关注不同移动设备的操作系统的差异，大大降低了开发与维护的成本[15]。2.1.3MyEclipse集成开发平台MyEclipse企业级工作平台（MyEclipseEnterpriseWorkbench，简称MyEclipse）是对EclipseIDE的扩展（Eclipse是一种开发工具，基于插件结构，开放很多的接口，MyEclipse是很多插件的综合体集成Eclipse），利用它我们可以在数据库和J2EE上开发、发布，以及在应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的J2EE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML、Struts、JSF、CSS、Javascript、SQL、Hibernate[16]。在功能上，MyEclipse可以被分为7类：JavaEE模型、WEB开发工具、EJB开发工具、应用程序服务器的连接器、JavaEE项目部署服务、数据库服务、MyEclipse整合帮助[17]。对于以上每一种功能上的类别，在Eclipse中都有相应的功能部件，并通过一系列的插件来实现它们。MyEclipse结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级[18]。本设计后端采用Java语言进行设计，实现对数据库的连接以及相关的增删改查操作。而Myeclipse常常用来进行Java、安卓等项目开发，是一款优秀的开发工具。在Myeclipse中可以进行set和get方法的自动添加，也可以进行构造函数的自动生成。Myeclipse工具为Java的编写提供了很多方便，开发者可以手动的配置Tomcat和JDK，还可以在其中进行Web程序的运行。2.2相关技术2.2.1MySQL数据库管理系统MySQL目前属于Oracle甲骨文公司，能够支持在多种操作系统上运行，包括Solaris、MacOS、FreeBSD、Windows和Linux[19]。核心功能就是处理数据。数据库一般不直接面向数据存储，存储是交给表、索引这类对象完成的。MySQL是一种关联型数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了查询速度并提高了灵活性[20]。本设计使用MySQL数据库管理系统，是因为它具有体积小、速度快、总体拥有成本低等优势，一般中小型网站的开发都选择MySQL作为数据库。同时它有着优化的SQL查询算法，能有效地提高查询速度，且既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入其他的软件中。总之，这是一款综合的用于管理、检查、优化数据库操作的管理工具，帮助本人完成了后续的数据库设计。2.2.2NavicatNavicat是一个数据库图形化客户端软件，让你可以以一种安全并且简单的方式对数据库进行操作。Navicat是闻名世界、广受全球各大企业、政府机构、教育机构所信赖，更是各界从业人员每天必备的工作伙伴。自2001年以来，Navicat已在全球被下载超过2,000,000次，并且已有超过70,000个用户的客户群。《财富》世界500强中有超过100家公司也都正在使用Navicat[21]。Navicat是一套快速、可靠并价格适宜的数据库管理工具，适用于三种平台：Windows、macOS及Linux。可以用来对本级或远程的MySQL、SQLServer、SQLite、Oracle等数据库进行管理及开发[22]。专门为简化数据库的操作而设计。它的设计符合数据库管理员、开发人员及中小企业的需求。本设计采用Navicat工具对已建数据库中的表进行设计、管理以及数据字段的处理。Navicat的功能足以符合专业开发人员的所有需求，并且对初学者来说又相当容易学习。该工具的用户界面(GUI)设计良好，让开发人员以更加简单的方法创建、组织、访问和共享信息。Navicat软件为本项目的数据库设计提供了很大的便利。第3章系统分析与设计3.1需求分析3.1.1功能需求在移动互联网的快速发展下，人们对记录事项的方法也慢慢从电脑端转移到了移动端，希望能随时随地的记录各项事务，并实现高效快捷的查看、修改、删除等功能。备忘录软件在移动互联网的发展下也在不断更新与发展，它不仅可以实现随时随地记录一切，而且能够増强与社交平台的交互。对于该小程序中的功能，主要有以下四点：用户首先可以创建自己的账号，即可拥有属于自己的电子备忘录，同时该项目满足注册用户功能。（2）获得账号后，用户可以分类型创建不同主题的记事本，然后在每种记事本下创建笔记，并记录创建时间。同时，用户可以记录提醒事项，每种事项包括标题、具体内容、待办时间，并以列表形式列出。（3）本项目也提供了任务待办功能，用户可以自拟每日或第二日的任务事项，并可以改变任务完成情况，实现当日任务当天完成或者为之后的某一天列出一日安排。特别是针对学生用户群体，可以为自己创建当日学习任务安排，并在记事功能页面创建学习笔记备忘录本，按顺序进行相应任务的处理，完成一项即可划掉一项。（4）小程序提供倒数日功能，用户对于一些重要的时间节点，可以通过形象的日历倒数日来起到提醒作用，帮助用户合理安排行程。3.1.2安全需求在小程序的安全性方面，本项目由于是一款基于微信平台的小程序，不涉及任何联网或者财产安全问题，并且在使用微信开发者工具时已取消“校验合法域名”等选项，同时未使用诸如“微信支付”等功能接口，因此对安全性的需求比较低。数据库方面，因为不涉及云服务器，所有操作都针对本地服务器及数据库，故而不会涉及个人隐私数据。3.2系统功能模块整个系统的功能板块主要分为四个部分，事项记录，提醒管理，待办任务管理，日历倒数日设计，这也是该小程序的四大导航页面。在登录页面后用户将来到类型记事页面，在该页面用户可以对不同分类的备忘录本进行查询。同时用户可以点击列表中任意类型的记事本，进入子页面查看所有记事内容，并可对相关记录进行修改、查询、删除。提醒管理页面中，基本结构与详细记事内容页面相似，以标题及内容的形式列出，每条记录都有设置时间，用户能直接看到自己在未来一段时间内的事项安排，实现内容较短的消息提醒功能。待办任务页面中，用户首先可以按日期添加将会做的事项，同时实现了可以对每一个事项设置完成与否的功能。在数据记录最下方，用户也可以选择只显示未完成的任务项，或者点击“全部完成”将所有事项作阴影化处理，并且配置一键删除所有事项功能。倒数日页面中，用户可以设置个性化的倒数日提醒功能，通过对一些未来重要的时间节点设置截止日期来对用户起到警醒作用。用户可以在倒数日主页面添加事项，同时可以点击任意一条记录，从而查看该项记录离截止日期的天数，并实现了修改与删除的功能。图3-1清晰地说明了用户在整个使用过程中的跳转流程。图3-1功能流程图3.3系统界面设计目前市场上的各种小程序页面，通常都借鉴了商城管理式的页面布局，在进入页面后，能直观地看到几个功能区块，点开这些图标后开发者又罗列出了各项细小功能。但这样的UI设计并不符合本项目的需求，本设计力求在各功能页面上清晰地列出当前所有已记录的事项，减少子模块的引用。例如用户首先进入记事页面，能够在下方清晰地看到所有类型的备忘录本，通过类似文件夹的形式进行页面设计，在上方提供搜索栏进行不同类型的记事项的查询，如图3-2所示。图3-2记事类型主页面点击任意类型的备忘录后可以转到相应记事页面，进行记事内容的添加以及查询，如图3-3是某一类型的备忘录本。在页面上方可以进行内容的查询及添加，下方列出当前备忘录本的所有标题及相关内容。图3-3记事信息子页面对于待办任务页面，同样采取列表形式列出所有已保存的数据。页面上方可以在输入框中添加待做的事，该页面以创建顺序列出待办任务，并在每条记录后方添加“是”“否”完成的两个按钮，对以完成任务进行阴影化处理。所有任务下方有一条统计记录，统计任务项数，并添加只显示未完成的部分任务、标注全部完成及全删的功能。页面如图3-4所示。图3-4待办任务页面日历本及倒数日页面中，上方设计了一个可滑动式日历本，当用户创建了倒数日记录后，该日历本中相应日期会标红色。同时用户可以点击任意一条记录以进入子页面，随后可以进行相应内容的修改或是删除该条记录。如图3-5所示。图3-5日历本页面点击任意记录进入子页面，页面中心可显示截止日期到当前日期的天数，用户可以对该条记录内容进行调整并返回到日历本页面，如图3-6所示。图3-6倒数日页面3.4数据库设计在对数据库中的表结构设计上，需要建立的表主要为记事类型表、详细记事信息表、提醒任务表。表3-1是记事类型表逻辑结构，主要设置类型id为主键，其余字段分别为类型名称以及页面列表中显示的背景图片。表3-1记事类型表逻辑结构字段名称主键字段含义字段类型是否可空默认值是否唯一1id是类型idInt否无否2type_name否类型名称VARCHAR(30)否无否3bg_img否类型背景图VARCHAR(30)否无否表3-2所示为详细记事内容表逻辑结构，同样以记事id为主键，相应地设置用户名称、记事类型、记事标题、记事内容、创建日期、以及在页面中显示的记事背景图字段。表3-2详细记事内容表逻辑结构字段名称主键字段含义字段类型是否可空默认值是否唯一1id是记事idInt否无否2user_name否用户名称VARCHAR(30)否无否3type_name否记事类型VARCHAR(30)否无否4title否记事标题VARCHAR(30)否无否5content否记事内容VARCHAR(30)否无否6date否创建日期VARCHAR(30)否无否7bg_img否记事背景图VARCHAR(30)否否否表3-3所示为提醒任务表逻辑结构，以id为主键，其余字段分别为用户名、标题、内容、待办日期及所配背景图组成。表3-3提醒任务表逻辑结构字段名称主键字段含义字段类型是否可空默认值是否唯一1id是事项idInt否无否2user_name否用户名称VARCHAR(30)否无否3title否事项标题VARCHAR(30)否无否4content否事项具体内容VARCHAR(30)否无否5ddl_date否待办日期VARCHAR(30)否无否6bg_img否事项配图VARCHAR(30)否否否图3-7所示为系统中各实体之间的E-R关系图。首先，每位用户可以创建多本不同类型的备忘录册，并且在不同的备忘录册下可以新建详细的记事内容，用户可以对事项的标题及内容进行修改，新建后可以记录事项的创建时间。同时，用户可以在提醒事项页面上新建提醒任务，并可以对事项的标题、内容及待办日期进行调整。图3-7E-R关系图

第4章系统实现4.1记事及提醒管理本设计后台数据处理使用的是MyEclipse开发环境，首先实现与MySql数据库的连接，创建BaseDao.java文件实现基础的与数据库连接的功能。以下为相关代码段：publicstaticConnectiongetConnection()throwsException{ Class.forName("com.mysql.jdbc.Driver"); Stringurl="jdbc:mysql://localhost:8080/jishiben/"; returnDriverManager.getConnection(url,"root","root");}加载驱动程序后，首先使用getConnection()方法连接数据库。创建statement类对象，用来执行SQL语句，以及创建Result类，用来存放获取的结果集。同时在该文件中编辑接口BaseDao实现针对主键id的相应增删改查的抽象方法。相关SQL语句如下所示：Stringsql1=“INSERTINTOleixing(id,title,bg_img)VALUES(id,title,bg_img)”;//插入Stringsql2=“DELETEFROMleixingWHEREID=i”;//删除Stringsql3=“UPDATEleixingSETtitle=’?’WHEREID=’?’”;//修改Stringsql4=“SELECTtitle,bg_imgFROMleixingWHEREID=i”;//查询本设计主要采用MVC开发模式，模型层主要实现对相关数据的写与读，例如创建note.java文件中实现对记事信息类型的存取：publicvoidsettype(Stringtype){this.type=type;//写入}publicStringgettype(){returntype;//读取}其余字段数据的存取与该段代码范例类似。同时创建leixing.java文件作为记事类型中模型层的部分，相关代码与note.java文件相似。控制器层部分创建noteController.java及leixingController.java文件，当要新添加事项时，在微信开发工具的js文件中创建按钮事件，提交后对data对象中的标题与内容进行更新，并发起请求wx.request()，将data中相应字段设置为：this.data.title及this.data.content。相关代码段如下所示：wx.request({url:getApp().globalData.url+'note.action?add',data:{a1:this.data.title,a2:"生活",a3:this.data.content,a5:'upload/image/img/123.jpg',a6:wx.getStorageSync("userid"),a7:wx.getStorageSync("username")},}在noteController.java文件中实现对服务器数据的添加。创建对象note，使用request.getParameter()方法获得客户端传送给服务器端的参数值，并使用模型层note.java文件中设置的写入数据的方法存储参数值。同时调用BaseDao中写入方法insertSelective(note)对相关数据进行添加。并通过回调函数success返回对象res对属性data进行设置，实现对前端wxml的数据渲染。相关代码段如下所示：publicMap<Object,Object>add(HttpSessionsession,HttpServletRequestrequest,noteparams){Map<Object,Object>map=newHashMap<Object,Object>();notent=newnote();Stringid=request.getParameter("id");Stringuser_name=request.getParameter("user_name");//用户名Stringtype_name=request.getParameter("type_name");//记事类型Stringtitle=request.getParameter("title");//记事标题Stringcontent=request.getParameter("content");//记事内容Stringdate=request.getParameter("date");//创建日期Stringbg_img=request.getParameter("bg_img");//页面背景图nt.setA1(id);nt.setA2(user_name);nt.setA3(type_name);nt.setA4(title);nt.setA5(content);nt.setA6(date);nt.setA7(bg_img);//写入数据try{ noteMapper.insertSelective(nt); map.put("msg","添加成功");map.put("success",true);}catch(Exceptione){ e.printStackTrace(); map.put("success",false);map.put("msg","添加失败"); } returnmap; }关于该处设计的查询，例如记录事项及提醒事项的条件查询方法，使用Map集合。Map是一种键-值对集合，其中的每一个元素都包含一个键对象和一个值对象。其中键对象不允许重复，并且值对象还可以是Map类型的数据，就像数组中的元素还可以是数组一样。Map接口主要有两个实现类：Hashmap与Treemap类。其中Hashmap类按哈希算法来存取键对象，而后者可以对键对象进行排序[23]。本处设计使用Hashmap存取事项标题-内容项。同时使用方法get(objectkey)，put(Kkey,Vvalue)来返回集合中指定键对象所对应的值以及向Map集合中添加键-值对。在写入数据前，先使用request.getParameterNames()方法将发送请求页面中表单里所有具有name属性的表单对象获取，并返回一个枚举类型en，通过hasMoreElements()方法遍历，最后得到value值，同时形成键值对应的map集合，然后调用BaseDao.java文件中的条件查询方法获得结果，相关代码段如下所示：publicMap<Object,Object>get(HttpServletRequestrequest){ Map<Object,Object>queryMap=newHashMap<Object,Object>(); Enumerationen=request.getParameterNames(); while(en.hasMoreElements()){ StringparamName=(String)en.nextElement(); StringparamValue=request.getParameter(paramName); if(paramValue.equals("")){ }else{ queryMap.put(paramName,paramValue);//形成键值对应的map } }Map<Object,Object>map=newHashMap<Object,Object>();try{ List<T>list=dao.get(queryMap);//查询 map.put("total",dao.getCount(queryMap));//查询结果条数 map.put("success",true);map.put("msg","查询成功"); }catch(Exceptione){ map.put("success",false); map.put("msg","查询失败"); returnmap; } returnmap;}4.2待办任务管理该页面每项记录由任务序号、内容、日期，完成与否的两个功能图标构成，首先在相应页面的js文件中，在页面数据data中建立新的列表newLi，分别初始化当前页面上述用到的数据：newLi:{id:'',content:'',begin:util.formatDate2(),needRemind:true,editing:false,done:false}并使用setData函数将每项数据从逻辑层发送到视图层，同时改变对应的this.data的值。然后在data对象中再建立一个空列表lists，作为第一次新添加的任务项的存储列表，之后每项任务添加时即往里面存储。当用户点击提交按钮新添任务时将触发formSubmit()事件，该事件的处理程序将首先创建新的存储列表newLists=this.data.lists，以记录所有任务项。再建立新添的任务列表：newTodo=this.data.newLi。判断newLists是否为空，若非空，便以关键字i记录当前任务项数，并以i+1作为新的列表的项数，然后使用push方法将新添加的任务信息newTodo加入总的列表项newLists中。最后使用this.setData()函数更新数据。相关代码段如下所示：formSubmit(){letnewLists=this.data.lists,i=0,newTodo=this.data.newLi;if(newLists.length>0){i=Number(util.sortBy(newLists,'id',true)[0].id)+1;}newTodo.id=i;if(newTodo.content!=''){newLists.push(newTodo);//新添项非空即写入this.setData({lists:newLists,newLi:{id:'',content:'',begin:util.formatDate2(),needRemind:true,editing: false,done:false}})}this.remind();}如果用户需要设置某项任务已经完成，则需要点击相应任务记录后方的勾选按钮，并触发setDone(e)事件，在该方法的编写中，首先通过e.target.id读取被选中组件的id值，即当前任务项列表的序号id值。并创建一个新的列表newLists用以更新，然后调用map()方法，该方法返回一个新的列表，其中元素为原始元素调用函数处理后的值。最后编写函数，使列表元素done取非即可实现该功能。同时，如果用户需要删除某项任务，只需在函数中调用splice方法即可移除相关id的任务记录。相关代码段如下所示：setDone(e){//该任务已完成leti=e.target.dataset.id,newLists=this.data.lists;newLists.map(function(l,index){if(l.id==i){newLists[index].done=!l.done;newLists[index].needRemind=false;}})},toDelete(e){//删除该任务leti=e.target.dataset.id,newLists=this.data.lists;newLists.map(function(l,index){if(l.id==i){newLists.splice(index,1);//从记录列表中移除相关项}})}4.3倒数日管理主页面下方显示用户当前创建的所有倒数日记录，呈列表形式给出，最前方标出截止日期，后方显示该日程主题。若用户想新添加倒数日，可以点击最下方“新增倒计时”按钮，并触发事件addEvent，编写函数，调用方法wx.navigateTo()，将页面跳转到倒数日编辑页面。在事项编辑页面中，用户可以输入日程的主题以及截止日期。在页面数据对象data中创建event列表记录事项id、主题及日期。若用户点击保存便可提交数据，触发bindNameChange以及bindDateChange事件，通过setData函数更新数据，相关代码段如下所示：bindNameChange:function(e){this.setData({//日程主题更新数据event:{id:this.data.event.id,name:e.detail.value,date:this.data.event.date}})},bindDateChange:function(e){this.setData({//日程截止日期更新数据event:{id:this.data.event.id,name:,date:e.detail.value}})}创建好记录后，用户可以点击任意一条数据查看该项日程的截止天数。在页面数据对象data中创建event列表，其中初始化days属性作为截止日期离当前日期的天数，当用户进入次级页面后，在页面加载事件onLoad中编写函数daysLeft(),其中调用Math.ceil函数用于返回大于或等于一个给定数字的最小整数，并调用getTime()方法返回自1970/01/01以来的毫秒数，对该数据分别除以1000、3600、24即可得到对应的天数。最后将记录项event的截止日期时间值与当前日期作减法所得的返回值作为days值，相关函数代码段如下所示：functiondaysLeft(d){varnow=newDate()returnMath.ceil((d.getTime()-now.getTime())/1000.0/3600/24)}第5章系统测试5.1记事及提醒事项测试该部分用户在通过登录页面后便可进入记事类型页面，在页面上方可以进行记事本类型的查询。如图5-1所示,(a)图为未新建查询时的页面效果，页面所示共有三份记事本，分别为“生活”、“笔记”、“旅行”。而(b)图所示为对笔记类型的记事本进行查询，页面只返回该类型记事本，如图测试成功。(a)记事主页面(b)记事类型查询页面图图5-1记事页面图点击笔记类型的记事本，即可进入该类型下用户创建的事项页面，上方可以对事项进行查询以及添加。在添加页面中用户可以输入标题以及内容，点击添加按钮后返回前一页面。如图5-2所示为事项添加窗口页面，添加标题为“复试”，内容为“计算机”，图5-3为添加结果后呈现的页面，该页面下方成功新添该项记录。图5-2添加窗口页面图5-3添加结果页面提醒管理页面以列表形式列出，每项提醒事项包括标题、具体内容和待办日期，用户也可以上传与事项相关的背景图片，如图5-4所示。同时用户可以点击任意事项进入子页面进行管理，在该页面中有三个输入框，用户可对任意内容进行修改，并在下方提供删除按钮。如图5-5所示测试成功。图5-4提醒页面图5-5具体事项修改页面5.2待办任务测试本设计主要以清单的方式按顺序罗列出用户在指定日期所要完成的任务项，同时用户可以对各项任务进行管理，例如新添、删除等操作，并可以使用每条记录后方的圆圈按钮对当前任务完成情况进行管理。在所有任务栏下方设置“仅显示未完成”按钮，用户也可使用一键完成及一键删除按钮对所有任务项同时处理。用户在输入框内填入待办任务后可以选择日期，日期通过一个滚动的日历本显示出，选择好日期后可以进行提交，如图5-6所示。(a)任务添加页面(b)任务添加成功页面图5-6新添任务页面如5-6(b)图所示成功添加“打羽毛球”任务，并选择时间为3.14，同时针对该项任务上方的记录，用户若选择完成将会以阴影化的形式显示。5.3日历及倒数日测试用户进入该页面后，能在页面上方看到一个可滑动的日历本，单个页面能够罗列出当前六个月的日期信息。用户可以选择点击下方的“新增倒计时”按钮来新添重要的时间节点，所有添加的记录将会在日历下方显示。点击按钮新增时进入子页面，该页面用户可以输入日程主题以及选择截止日期，如5-7(a)图所示。返回主页面后，页面上方的日历可以将用户当前创建的截止日期圈为红色，并在下方新添该日程记录，如5-7(b)图所示，成功添加截止日期为“4月20日”的记录。(a)倒数日日程添加页面(b)日程添加成功页面图5-7添加倒数日页面当用户点击任意一项已经创建的记录后，便可进入倒数日页面，页面正中显示日程离当前日期的天数，同时用户可以在该页面对日程进行修改或者删除。此处测试选择点击“4月20日答辩”记录项，由于论文编写时为3月25日，该页面成功显示倒数26天，如图5-8所示。图5-8倒数日页面第6章总结与展望本设计主要基于微信小程序的开发者平台进行备忘录的设计与实现，在开发者工具中首先搭建各个页面的ui设计，同时本人使用了微信官方提供的组件进行设计，基于wxml与wxss语法完成了五个页面的设计工作，并基于Js语言完成了页面基础逻辑事件的功能设计，最终完成了记事管理、提醒管理、待办任务管理以及日历倒数日管理页面的搭建。本项目使用mysql关系型数据库对各个功能板块的各字段数据进行处理，并基于java语言在myeclipse平台上完成了数据库的连接工作，并能提供基础的增删改查操作，实现对事项的基础操作。该项目也是本人大学近四年的一个积累，通过前端课程.NET的学习让我积累了前端页面开发以及相关JS开发的知识，而JavaWeb课程以及数据库实践类课程让我积累了后端开发的经验。总之，本设计也是对我以前学过的知识以及积累的经验的一个总结，这其中离不开本科所有老师的努力，这才能使我较为顺利的完成本项目设计。当然本设计也存在不足，由于本人能力有限，该项目页面大多以文字形式显示，缺乏个性化的图像反馈，UI设计还可以更加完善。在提醒管理模块，本设计主要还是作为一种存储类式软件，并且由于仅在微信开发者工具中进行模拟，并没有做到传统的以消息形式提醒的功能。对于目前市场上备忘录软件的发展还是很好的，例如现在学生群体很多都在用的anki清单等软件，它们能够帮助我们在生活节奏日益加快的当下更好地管理日常事务，并且通过记录及反馈的方式对用户起到警醒作用。由于传统的备忘录主要还是以文字记录方式，相信在未来人工智能发展的大背景下，各种记录式软件将会采取语音记录的方式，同时可以提供语音转文字等功能，更好的服务用户。同时，由于微信用户的数量剧增，各种公众号或是小程序出现在人们视野中，将会有更多的用户使用小程序的功能，因为它足够轻量级，即开即用，能够提供一种更加方便的服务，并且基于微信平台还能够与微信好友进行分享以及交流等，更加符合现在人们的生活习惯。参考文献[1] 高倩.基于iOS系统的备忘录APP的设计与实现[D].云南大学,2018:5.[2] 阮超.基于Android系统语音云记事本的设计与实现[D].安徽大学,2016:7.[3] 张梁.安卓系统下的备忘录开发与研究[D].吉林大学,2015:4.[4] 王天泥.当图书馆遇上微信小程序[J].图书与情报,2016(06):83-86.[5] 刘红卫.微信小程序应用探析[J].无线互联科技,2016(23):11-15.[6] 舒存叶.E-learning环境下个人知识管理系统的研究与设计[D].东北师范大学,2005:9.[7] 查怀松,吴锦华,张文强.基于Android备忘录软件的设计与实现[J].电脑知识与技 术,2019,15(14):29-31.[8] Wang