[微信小程序]wxs的使用

1、wxs的作用

wxs和Vue中的计算属性一样，作用都是用来辅助处理绑定的数据。

2、wxs的使用

文档地址：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

wxs很简单，只要看文档就行了。

可以直接在wxml文件中写<wxs></wxs>标签，也可以直接在wxml文件目录中建立.wxs文件。推荐第二种做法，因为第一种做法，wxs语法完全没有任何提示和语法高亮(指在微信开发者工具中，其他编辑器不清楚)，出错时，在控制台甚至不输出错误信息。

比如有一个活动列表数据，每一项中有报名开始时间、报名结束时间、活动开始时间、活动结束时间，需要根据时间的不同，给相应的列表项添加不同的class。没有wxs的时候，就要在.js获取到数据后遍历数据，给数据添加上一个标识，比如经过计算，添加一个cssClass属性，这样就可以绑定到元素的class上了：

<view class='item {{item.cssClass}}' wx:for='{{data}}'>
  ...
</view>

有了wxs之后，就可以像下面这样做：

首先，根据喜好找一个地方，右键新建一个tool.wxs文件，根据微信开发文档，内容如下：

module.exports.getClass = function(item) {
  var now = getDate().getTime();
  var joinStartDate = getDate(item.joinStartDate).getTime();
  if (now < joinStartDate) {
    return 'state0'
  }

  var joinEndDate = getDate(item.joinEndDate).getTime();
  if (now < joinEndDate) {
    return 'state1;'
  }

  var partyStartDate = getDate(item.partyStartDate).getTime();
  if (now < partyStartDate) {
    return 'state2';
  }

  var partyEndDate = getDate(item.partyEndDate).getTime();
  if (now < partyEndDate) {
    return 'state3';
  }

  return 'state4';
}

wxs中不支持全部的JavaScript数据类型和方法，比如，new Date()要用getDate()代替

在wxml文件中这样使用：

<view class='item {{tool.getClass(item)}}' wx:for='{{data}}'>
  ...
</view>
<!-- 引入 -->
<wxs src='tool.wxs' module='tool'></wxs>