mpvue开发简单todolist功能小程序

简介:
第一次学习用mpvue制作小程序,官网:http://mpvue.com/,主要是通过写vue方法转换成小程序版,先看下制作后效果:

0F601AEE473A4F658BAB5054CDA46AA2.jpg

实现功能:
(1)在任务框输入任务,会在下面显示
(2)下面有完成和删除按钮

开发过程:
1、mpvue搭建项目
这个过程可以参考官网:http://mpvue.com/mpvue/quickstart/
还有:https://www.jianshu.com/p/692b2e49f33b?t=123&utm_source=oschina-app

2、搭建完成之后,就要进行代码编写:
(1)要在page文件夹中创建一个todo文件夹,里面包含:index.vue main.js main.json(可有可没有)


F6F44C3F31794599ABAD579FECEC8EC8.jpg

(2)要在app.json中添加todo
"pages/todo/main",


041D8F0AC3AE4D38BB0D7F41BD6B7456.jpg

为了开发方便,我放在第一位,这样就会一开始就显示这个页面

(3)pages/todo/index.vue页面开发:
A、添加了一个UI框架,之前一直在网上寻找适合mpvue的UI框架,但一直没找到合适的,想用VUX,但是没兼容成功,如果各位大佬有好的推荐一下。
最后找到一个,在github: https://github.com/MPComponent/mpvue-weui
官网: https://mpcomponent.github.io/mpvue-weui/ 具体使用这里就不说了

B、todo功能的实现:
template:


80BB4946252C4055A206011B25406F5E.jpg

script: 总共实现三个方法(1)往todo数组添加任务;(2)将任务的状态变成完成 (3)将任务变为已删除(不可见)


959402D3C4464348B86EEC3EC5734547.jpg

遇到的问题:
(1)小程序开发者工具点击input无法聚焦,解决办法:要长按,短按无法聚焦;
(2)使用icon图标,这里有一篇在mpvue中使用iconfont的教程:https://blog.csdn.net/weixin_39818813/article/details/80695750
(3)在写绑定样式的时候,一直报错,发现是样式没有加单引号,比如:

2AF5460A2BBA407B971223E9F3D21788.jpg

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容