微信小程序之ES6与事项助手的功能实现

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。

好久没有写关于微信小程序的随笔了,其实是不知道写点什么好,之前的豆瓣图书和知乎日报已经把小程序的基础部分写的很详细了,高级部分的API有些还得不到IDE的调试支持。之前发表了知乎日报小例,有网友问我小程序有没有关于日历显示的组件,可以显示所有天数的,自己看了一遍,好像没有这个组件,所以打算那这个功能来练手,在准备期间,微信开发者工具已经升级了两三次,添加了部分功能和修改了部分功能,导致之前的例子的写法不兼容更新后的IDE,还得修改代码。随着小程序的不断更新,功能越来越完善,我想我也应该紧跟官方的升级步伐,这次的案例使用了IDE支持的ES6和新的API。

这次介绍的是一个比较简单的小应用事项助手,其实跟事项也不沾多少边,只是作为辅助功能,只有数据的添加和删除,主要内容是日历这块内容。日历组件在web应用中应用非常广泛,插件也非常丰富,但是小程序不支持传统的插件写法,而是以数据驱动内容。

大部分的日历选择器都是差不多的,能显示当前的年份、月份和天数,可以选择某天、某月或者某年,我们可以打开操作系统中自带的日历观察一番。

日历的布局大同小异,本次案例的布局也是中规中矩,比较传统,头部显示当前年份月份,头部的左右个显示一个翻页按钮,跳转到上一月和下一月,下半部分显示当月的天数列表,由于每月的天数可能不一样,列表的格数是固定的,所以当月的天数显示使用高亮,其余的使用偏灰色彩。

微信小程序之ES6与事项助手的功能实现

预备

本次案例用到了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;

再比如引入一个文件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxzfs.html