Mpvue开发了简单的待办事项列表功能小程序

简介：

第一次，我学会了用mpvue制作小程序。官方网站是：。它主要通过编写vue转换为小程序版本。让我们看看制作后的效果：

0F601AEE473A4F658BAB5054CDA46AA2.jpg

实现功能：

（1） 在任务框中输入任务，它将显示在下面

（2） 下面有完成和删除按钮

开发过程：

1、Mpvue建设项目

这个过程可以参考官方网站：

也：

2.设置完成后，应编写代码：

（1） 要在页面文件夹中创建待办事项文件夹，请包括：index vue main。Js-main.json（可用或不可用）

F6F44C3F31794599 ABAD579FECEC8EC8.jpg

（2） 在app.json中添加待办事项

“pages/todo/main”，

041D8F0AC3AE4D38BB0D7F41BD6B7456.jpg

为了方便开发，我将其放在第一位，以便在开始时显示此页面

（3） Pages/todo/index.vue页面开发：

A、 已添加UI框架。我之前一直在网上寻找适合mpvue的UI框架，但我还没有找到合适的。我想使用VUX，但它不兼容。如果你们有好的推荐。

最后，我在github中找到了一个：

官方网站：我不会在这里告诉你如何使用它

B、 todo函数的实现：

模板：

80BB4946252C4055A206011B25406F5E.jpg

脚本：总共实现三个方法（1）将任务添加到todo数组；（2） 将任务状态更改为已完成（3）将任务更改为已删除（不可见）

959402D3C4464348B86EEC3EC5734547.jpg

遇到的问题：

（1） 单击输入时，小程序开发工具无法聚焦。解决办法是：长按，短按不能聚焦；

（2） 使用图标图标，这里有一个关于在mpvue中使用图标信息的教程：

（3） 编写绑定样式时，始终会报告错误。发现样式没有用单引号括起来，例如：

2AF5460A2BBA407B971223E9F3D21788.jpg