Wechat applet——Todo List
| 博客班级 | https://edu.cnblogs.com/campus/zjcsxy/SE2020 |
|---|---|
| 作业要求 | https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334 |
| 作业目标 | 编写一个小程序，熟悉git代码管理流程，将源代码上传到到github，在博客园班级中写一篇相应的博文 |
| 作业源代码 | https://github.com/OptimisticAspirant/Todo-List |
| 学号姓名 | 31801127 李楠 |
-
提交项目所用工具：GitKraken
-
界面展示
-
小程序学习
-
Beginning
- 因为之前上过WEB程序设计课，然后微信小程序的很多内容都是借鉴的HTML，CSS和JS，所以基本布局和样式不会有太大问题，但是因为当初学WEB的时候没怎么学JS，所以这次小程序学习把重点放在了功能上。一开始我想了很长时间，在想有什么小程序是有意义的日常又不太复杂的，想了很久也没有想出什么点子来（这就是所谓的非创新型学习工具人，只会打代码，没有什么有意思的想法），能想到的基本都已经有了。我记得当初有一次我在找一个什么工具，找了很久没找到，小程序没找到，APP也没找到，我竟然没把它记下来，啧，以后遇到找了半天都找不到的工具还有突如其来的点子一定要记下来（错失一个机会）。所以后来在GitHub上找了一个普通的ToDo List的项目，照着他写了第一页（增加删除待办事项）的功能和第三页的记录，然后自己加了一页番茄钟，在第三页加了一个清除使用记录的按钮。
-
Tip 1（按钮大小设置）
- 虽然基本上布局和样式设置都没有问题，但是按钮的大小设置方面遇到了点问题。因为习惯了在css文件里写样式，所以写小程序的时候也是在wxss文件里设置按钮大小，发现怎么设置都不起作用，后来查了官方文档发现，微信小程序里的按钮大小分为mini和default，查找资料后发现可以直接在在<button> 标签中写 style来设置大小，问题解决。
-
<button style="width:60vw" bindtap="switchModal" class="clear" wx:if="{{logs.length}}"> <image class="btnImg" src="../../photos/clear.png"/> Clear History </button>
-
Tip 2（文本换行）
- 显示历史使用记录时，部分文本需要换行展示，直接使用\n换行即可。
-
<view class="item" wx:for="{{ logs }}" wx:key="{{ index }}"> <text class="name">Name: {{ item.name }}\n</text> <text class="action">{{ item.action }}: </text> <text class="timestamp">{{ item.timestamp }}</text> </view>
-
Tip 3（清除使用记录）
- 主要就是这一块的问题，刚接触不是很熟悉，什么onLaunch,onShow等等，过程耗了很久，清除缓存（Storage）的时候明明清除掉了，但是再次添加的时候，会把之前的也重新加进来。一开始以为是小程序生命周期的原因，去看了一下生命周期的知识点，感觉没有太大关系，在看生命周期的时候看到了AppData。之后检查的时候发现，清除的是todo_lists，但我设置显示的是logs，所以数据肯定还存在。看了一下AppData中的数据，测试的时候发现原来数据并没有清除。最后仔细检查，发现是局部变量和全局变量的问题，啊这，还搞了那么久，想了那么多可能性……
- App()函数：注册小程序。接受一个 Object参数，其指定小程序的生命周期回调等。App() 必须在
app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
onLaunch: 生命周期函数，监听小程序初始化，当小程序初始化完成时，全局会触发一次。
onShow：生命周期函数。监听小程序显示，当小程序启动时，或者从后台进入前台时，则会触发onShow。
onHide：生命周期函数。用于监听小程序隐藏，当小程序从前台进入后台时会触发。
onError：错误监听函数，当小程序脚本发生错误，或者API调用失败，则会触发此函数，并附加错误信息。
其他：开发者可以添加任意函数或者数据到Object参数中，用this访问。
-
Tips 4（样式设置无效）
- 这个错误错得很丢人，忘记在两个class名中间加空格了（还好看了一会儿就发现了，狡辩）……
-
Tips 5（获取输入框数据错误）
- 设定番茄钟时间时，需要从输入框获取一个数值，以为设置类型为number就好了（设置为number只是设置输入模式为数字模式），但是拿进来的还是一个字符串，用parseInt()转成数值。
-
Tips 6（参数为null）
- counttime的值应该是settime * 60，但是调试的时候却发现counttime为null。检查发现调用函数时，设置的参数为that.settime导致参数传递错误，应改为that.data.settime。
-
Tips7（多次点击开始倒计时时，时间跳动显示）
- 点击开始倒计时后结束倒计时，再重新开始时时间显示会错误，会在显示当前倒计时的同时跳动显示上一个倒计时的时间。尝试了很多方法，都没改对，决定换个方法写（实在是花了太多时间了，有个大佬曾经告诉我，如果实在是想不通为什么就不要硬钻牛角尖去想为什么，不然就是白白浪费时间，要懂得变通，我觉得他说的有道理）。去看了一下别人是怎么写的，发现别人用的是timer定时器，所以也改成了定时器，最后就改对了。我的问题主要是之前的counttime总是存在着，除非他自己倒计时到了0，不然他是不会停的。
-
修改点
- 美化界面
- 增加清除记录按钮，点击时弹出是否确认删除，确认删除后显示无记录提示
- 增加一个可以自行设定时间的简易番茄钟
-
感想
- 粗心不是借口，基础知识不扎实才会犯这种错误（全局变量和局部变量等）。
