福运通网络营销与深圳SEO优化第一品牌

专为中小企业提供网络营销服务
最新资讯

oopsguy精品教程《三》微信小程序之ES6与事项助手

    Time: 2020-08-01来源:福运通
继作者出产两篇经典之后,有段时间没有出新文章了,这是最新的一篇,强烈推荐阅读;下面的相关文章为作者的另外两篇教程:

好久没有写关于微信小程序的随笔了,其实是不知道写点什么好,之前的豆瓣图书和知乎日报已经把小程序的基础部分写的很详细了,高级部分的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中拥有了类这一概念,声明类的方式很简单,跟其他语言一样,差别不大:

深圳SEO:http://www.tianying888.com

关键词:oopsguy,精品,教程,微信,程序,事项,助手