由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。
好久没有写关于微信小程序的随笔了,其实是不知道写点什么好,之前的豆瓣图书和知乎日报已经把小程序的基础部分写的很详细了,高级部分的API有些还得不到IDE的调试支持。之前发表了知乎日报小例,有网友问我小程序有没有关于日历显示的组件,可以显示所有天数的,自己看了一遍,好像没有这个组件,所以打算那这个功能来练手,在准备期间,微信开发者工具已经升级了两三次,添加了部分功能和修改了部分功能,导致之前的例子的写法不兼容更新后的IDE,还得修改代码。随着小程序的不断更新,功能越来越完善,我想我也应该紧跟官方的升级步伐,这次的案例使用了IDE支持的ES6和新的API。
这次介绍的是一个比较简单的小应用事项助手,其实跟事项也不沾多少边,只是作为辅助功能,只有数据的添加和删除,主要内容是日历这块内容。日历组件在web应用中应用非常广泛,插件也非常丰富,但是小程序不支持传统的插件写法,而是以数据驱动内容。
大部分的日历选择器都是差不多的,能显示当前的年份、月份和天数,可以选择某天、某月或者某年,我们可以打开操作系统中自带的日历观察一番。
日历的布局大同小异,本次案例的布局也是中规中矩,比较传统,头部显示当前年份月份,头部的左右个显示一个翻页按钮,跳转到上一月和下一月,下半部分显示当月的天数列表,由于每月的天数可能不一样,列表的格数是固定的,所以当月的天数显示使用高亮,其余的使用偏灰色彩。
预备
本次案例用到了ES6,先来了解一下案列中用到的几个写法。本人也是顺带学习顺带编写,可能代码中还存在部分老的写法。
变量
ES6中声明变量可以用let声明变量,用const声明常量,即不可改变的量。
let version = '1.0.0'; const weekday = 7; version = '2.0.0'; weekday = 8; //错误,用const声明的常量,不能修改值
本习惯用大写字母和下划线的组合方式来声明全局的常量
const CONFIG_COLOR = '#FAFAFA';
对象方法属性
小程序的每一个页面都有一个相对应的js文件,里面必不可少的就是Page函数,Page函数接受的参数是一个对象,我们经常使用的写法就是:
Page({ data: { userAvatar: './images/avatar.png', userName: 'Oopsguy' }, onLoad: function() { //.... }, onReady: function() { //.... } });
现在换做ES6的写法,我们可以这样:
Page({ data: { userAvatar: './images/avatar.png', userName: 'Oopsguy' }, onLoad() { //.... }, onReady() { //.... } });
我们可以把以前的键值写法省略掉,而且function声明也不需要了。
类
ES6中拥有了类这一概念,声明类的方式很简单,跟其他语言一样,差别不大:
class Animal { constructor() { } eat() { } static doSomething(param) { //... } } module.exports = Animal;
class关键字用于声明类,constructor是构造函数,static修饰静态方法。不能理解?我们看一下以前的js的简单写法:
var Animal = function() { }; Animal.prototype.eat = function() { }; Animal.doSomething = function(param) { }; module.exports = Animal;
简单的调用示例
let animal = new Animal(); animal.eat(); //静态方法 Animal.doSomething('param');
这里只是简单的展示了一下不同点,更多的只是还是需要读者自己翻阅更多的资料来学习。
解构
其实本人对结构也不太懂怎样解释,简单的来说就是可以把一个数组的元素或者对象的属性分解出来,直接获取,哈哈,解释的比较勉强,还是看看示例吧。
let obj = { fullName: 'Xiao Ming', gender: 'male', role: 'admin' }; let arr = ['elem1', 1, 30, 'arratElem3']; let {fullName, role} = obj; let [elem1, elem2] = arr; console.log(fullName, role, elem1, elem2);
大家可能猜出了什么,看看输出结果:
> Xiao Ming admin elem1 1
我们只要把需要获取的属性或者元素别名指定解构体中,js会自动获取对应的属性或者下标对应的元素。这个新特性非常有用,比如我们需要在一个Pages data对象中一个属性获取对了属性值:
let year = this.data.year, month = this.data.month, day = this.data.day;
但是用解构的写法就很简洁:
let {year, month, day} = this.data;
再比如引入一个文件: