雅星娱乐注册:微信小程序之ES6与事项助手的功能

时间: 作者:火是

  

[微信小程序,es6,小程序,es6,微信开发]微信小程序之ES6与事项助手的功能实现

  

由于官方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');
  
  

这里只是简单的展示了一下不同点,更多的只是还是需要读者自己翻阅更多的资料来学习。 (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台