推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
oopsguy精品教程《三》微信小程序之ES6与事项助手
发布时间:2020-12-09
好久没有写关于微信小程序的随笔了，其实是不知道写点什么好，之前的豆瓣图书和知乎日报已经把小程序的基础部分写的很详细了，高级部分的API有些还得不到IDE的调试支持。之前发表了知乎日报小例，有网友问我小程序有没有关于日历显示的组件，可以显示所有天数的，自己看了一遍，好像没有这个组件，所以打算那这个功能来练手，在准备期间，微信开发者工具已经升级了两三次，添加了部分功能和修改了部分功能，导致之前的例子的写法不兼容更新后的IDE，还得修改代码。随着小程序的不断更新，功能越来越完善，我想我也应该紧跟官方的升级步伐，这次的案例使用了IDE支持的ES6和新的API。
这次介绍的是一个比较简单的小应用事项助手，其实跟事项也不沾多少边，只是作为辅助功能，只有数据的添加和删除，主要内容是日历这块内容。日历组件在web应用中应用非常广泛，插件也非常丰富，但是小程序不支持传统的插件写法，而是以数据驱动内容。
大部分的日历选择器都是差不多的，能显示当前的年份、月份和天数，可以选择某天、某月或者某年，我们可以打开操作系统中自带的日历观察一番。
日历的布局大同小异，本次案例的布局也是中规中矩，比较传统，头部显示当前年份月份，头部的左右个显示一个翻页按钮，跳转到上一月和下一月，下半部分显示当月的天数列表，由于每月的天数可能不一样，列表的格数是固定的，所以当月的天数显示使用高亮，其余的使用偏灰色彩。
预备本次案例用到了ES6，先来了解一下案列中用到的几个写法。本人也是顺带学习顺带编写，可能代码中还存在部分老的写法。
变量ES6中声明变量可以用let声明变量，用const声明常量，即不可改变的量。
1
2
3
4
5
let version = '1.0.0';
const weekday = 7;
version = '2.0.0';
weekday = 8; //错误，用const声明的常量，不能修改值
本习惯用大写字母和下划线的组合方式来声明全局的常量
1
const CONFIG_COLOR = '#FAFAFA';
对象方法属性
小程序的每一个页面都有一个相对应的js文件，里面必不可少的就是Page函数，Page函数接受的参数是一个对象，我们经常使用的写法就是：
1
2
3
4
5
6
7
8
9
10
11
12
Page({
data: {
userAvatar: './images/avatar.png',
userName: 'Oopsguy'
},
onLoad: function() {
//....
},
onReady: function() {
//....
}
});
现在换做ES6的写法，我们可以这样：
1
2
3
4
5
6
7
8
9
10
11
12
Page({
data: {
userAvatar: './images/avatar.png',
userName: 'Oopsguy'
},
onLoad() {
//....
},
onReady() {
//....
}
});
我们可以把以前的键值写法省略掉，而且function声明也不需要了。
类ES6中拥有了类这一概念，声明类的方式很简单，跟其他语言一样，差别不大：
