小程序TodoList实践_258资源分享网

258资源分享 > 建站学院 > 微信开发 > 小程序TodoList实践

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

小程序TodoList实践

发布时间:2020-10-30

看完官方的文档介绍后，就想找个简单的例子来验证实现一下，TodoList MVC就很好了，简单容易。

之前都用JQ、Backbone、vue简单撸过，大概功能如下：

添加todo

储存在应用缓存

列表展示

区分状态显示：全部、未完成、已完成

改变todo状态

删除todo

根据以上功能，小程序完成如下：

GitHub: github.com/CH563/TodoL…

小程序TodoList实践

下面记录一下我的完成过程：

下载小程序开发工具：开发者工具下载

安装完成后，使用微信扫一扫登录，选好文件夹后创建即可，开发工具会自动生成以下目录：

pages/

app.js

app.json

app.wxss

文录绍构和具体配置查看官方文档： mp.weixin.qq.com/debug/wxado…

基本配置

由于平时开发习惯用Less，如果在直接使用小程序的wxss来编写的话，就恢复原生编写方式，大大的不便，所以直接使用了gulp来实时编译Less，和修改文件名为wxss。小程序开发工具是不支持Less，直接用vscode来开发，小程序开发工具是用实时预览和调试即可，vscode也有丰富的插件支待小程序语法提示。

// gulpfile.js var gulp = require('gulp') var less = require('gulp-less') var plumber = require('gulp-plumber') var rename = require('gulp-rename') gulp.task('less', function () { return gulp.src('./app.less') .pipe(plumber()) // 错误处理 .pipe(less()) // 编译less .pipe(rename((path) => path.extname = '.wxss')) // 编译后生成文件修改后缀为.wxss .pipe(gulp.dest('./')); }); gulp.watch('./app.less', ['less']); // 实时监控app.less文件变化，运行任务

UI组件也直接引用了小程序支持的 weui-wxss

@import "./weui.wxss";

在app.json定义好小程序页面路由和配色：

{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ca2100", "navigationBarTitleText": "TodoList", "navigationBarTextStyle":"white" } } 页面开发

页面文件都存放在pages/目录下，每个功能页面都会创建一个文件夹，TodoList现只需一个页面完成即可

数据绑定使用 Mustache 语法（双大括号）将变量包起来

<text class="userinfo-nickname">{{userInfo.nickName}}</text>  <text class="{{status === '1'?'active':''}}" data-status="1" bindtap="showStatus">全部</text> 添加todo

使用字段 addShow 来判断添加输入层显示隐藏即可

input输出框这里不是双向绑定，所以这里添加一个事件 bindinput="setInput" 来赋值实时变化

实时赋值事件处理

setInput: function (e) { this.setData({ addText: e.detail.value }) }

取消时，需要清空input的值，input里需要绑定 value="{{addText}}"

Page({ data:{ //... }, //... addTodoHide: function () { this.setData({ addShow: false, // 控制添加输入面板隐藏 focus: false, // 失去焦点 addText: '' // 清空值 }) } //... })

添加todo

Page({ data:{ //... }, //... addTodo: function () { // 检查有没有输入 if (!this.data.addText.trim()) { return } var temp = this.data.lists // 取出lists var addT = { id: new Date().getTime(), // 取当前时间 title: this.data.addText, status: '0' } temp.push(addT) // 添加新的todo this.showCur(temp) // 处理当前状态的方法 this.addTodoHide() // 添加成功后，隐藏添加面板方法 wx.setStorage({ // 小程序异步缓存 key:"lists", data: temp }) wx.showToast({ // weui toast组件 title: '添加成功!', icon: 'success', duration: 1000 }); } //... }) 列表部分

scroll-view内滚动

本文标签

程序实践 TodoList

上一篇：微信小程序--如何获取当前页面URL
下一篇：微信小程序中实现手指缩放图片

258资源分享网

分类

推荐文章

推荐下载

小程序TodoList实践

本文标签